Fellow visitors! In New Year add a super cool compact social subscription box widget below post’s of your Blogger blog. This widget is very trendy designed and will make sure to get maximum social fan and email subscriber with style. This widget got three social follow buttons (they change look with mouse hover with sliding effect) Facebook, Twitter and Google plus. Made with CSS, HTML, CSS3, Script, Google font, Font awesome, keyframes and hard work. Easy to configure and add to your site. Let’s see how it looks, how to add and configure:-
Superb Feedburner subscription+Social Follow widget below posts of Blogger
How to add This widget set up has two part, read on-
First, Log into your Blogger, select your blog,
Select 'Template', select 'Edit HTML'
Now search for (Using Ctrl+F in Windows, Cmd+F in Mac) into code snippet </head>
Above </head> copy and paste part 1's codes
Second, Again search for
<div class='post-footer-line post-footer-line-1'>
You may find this line twice, select sound line, and copy and paste part 2's codes below that line
If your template doesn't contain this line <div class='post-footer-line post-footer-line-1'> (Basically HTML5 templates) search for </article>
And below </article> copy and paste Part 2's codes. and configure
How to configure
To configure your Feedburner email subscription form. replace crawlist with your feeburner id, it can be found in (http://feeds.feedburner.com/your feed id)
To configure Facebook like button, just replace your Facebook fan page full address on 'Your Facebook Fanpage Adress'
To configure twitter follow button, just replace your twitter account url on https://twitter.com/k_shazzad and @your account name
After configure hit 'Save template' and check out your blogger blog.
Compatibility
This widget is compatible with all browser's latest version (old version's are supports too except IE),
All stranded structured template will show this widget correctley, if some template don't show it right, you may have to change #ks-share 's margin values and .ks-button 's margin values. This widget will not appear on homepage.
So any feedback don’t forget to mention. Goodluck and Happy new year…
Icon styled social subscription widget is looks random and simple, on the another hand metro/windows style social media subscription widget looks cool and smart. Before I published 2 different styled metro social media profile widget, and with this post I exposing just another metro social subscription widget with different format, Contains Facebook, Twitter, Google plus, Pinterest, Linkedin and Feedburner slot with hover effect and tool-tip. This widget will fit to any kind of website no matter it Blog or portfolio website. Let's see how it looks like and how to use it in your Blogger blog and wordpress sites.
Metro Social Subscription Widget for Blogger/Wordpress
#ks-social-icons { display: block; } #ks-social-icons img { -webkit-opacity: 1; -moz-opacity: 1; opacity: 1; -webkit-transition: all .5s ease; -moz-transition: all .5s ease; -o-transition: all .5s ease; -ms-transition: all .5s ease; transition: all .5s ease; border:#FFF 1px hidden;}
#ks-social-icons img:hover { -webkit-opacity: 0.8; -moz-opacity: 0.8; opacity: 0.8; -webkit-transition: all .5s ease; -moz-transition: all .5s ease; -o-transition: all .5s ease; -ms-transition: all .5s ease; transition: all .5s ease; border:#FFF 1px hidden; }/*crawlist.net CSS ends*/ </style> <div class="ks-metro"><div id="ks-social-icons"> <!--crawlist.net widget Starts--><div class="ks-fbbox"> <a href="http://www.facebook.com/your profile" target="_blank" rel="nofollow" title="Join us on Facebook"><img height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2cIceYoqqvLx_UGzuGLGS835de8xvNMv6-nRz3oEWVBjzvurzx0or_4-Le3YSp5JsQZHxPxoOto36oWdgDDKN1IEuy_fQZ4vFOV4mQAvJ9oklVdF_5NwxuUMmUBbJD_y_whRne8ZZatCV/s1600/1.png" width="150" /></a></div> <div class="ks-gpbox"> <a href="http://plus.google.com/your profile" target="_blank" rel="nofollow" title="Join us on Google Plus"><img height="78" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCNvB5Y8vxU2B3w9Put_GqNGnH8RM-FXnkp9sfSLoRCCa9Q6Yk0ZB2oN7kKrl0aK0bNOYr1j4nuHsI_ejH-GjMmkwbdbJrvt6btjanestLgVNXugT29uYM3CKIWzj2eueON3JaB6tNa6lJ/s1600/2.png" width="136" /></a></div> <div class="ks-ttbox"> <a href="http://www.twitter.com/your profile" target="_blank" rel="nofollow" title="Join us on Twitter"><img height="70" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlIR7ivLhFeeQiEy5hyphenhyphen2CiYOg3u9NcyAJnOfkwQM20FQgbjFSex67BWb2CsWkXqj0idaI0BcxUs9yjSSo0j_aw7trD4GBi-1xyztbRvzZA062RH6n5LLy7FQwRlppgUlkYFY_sn-Y1l3Hp/s1600/3.png" width="136" /></a></div> <div class="ks-febox"> <a href="http://feedburner.com/your profile" target="_blank" rel="nofollow" title="Never miss a post"><img height="147" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhed2QOkmMW4do2Pb3T_TWFaq2Mu7CEfnNw6hd1SCmeKn3vjDFdDNekIFMXYXDLEkNxGm0fb1-J75NpGsfGka8lmRP8Fj4adb2-w-0dLhQAtV-FabYHaMNeYzNTGeWgBS2JXvv8n5xdUW9s/s1600/4.png" width="136" /></a></div> <div class="ks-lnbox"> <a href="http://www.linkedin.com/your profile" target="_blank" rel="nofollow" title="Join us on Linkedin"><img height="70" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjR5UqrxkgpvOyg5QiWzug8N5x9OA7uUkoE45D-OYxKf4MtKeSCXIIIaKiH7aEXE4rPCeTGH24GNHHvDxnkan-HYNFGu28yZGfx63leDEonkBpH7z_P48Ruqy-AlCbx8TDijnZFULhTVb0L/s1600/5.png" width="150" /></a></div> <div class="ks-ptbox"> <a href="http://www.pinterest.com/your profile" target="_blank" rel="nofollow" title="Join us on Pinterest"><img height="75" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiew4l0v9xc8f6MMH4AS-rXIFGRHInB5i6I89og7JRv1vadNa3S7QXAfeXJPv8KyOHq1aY_TbnF0S4Ca_uqaEQbZrDy_NKKbd0p9w5_oKc-V-pTYRfpxDBgkfk4X239rIILJU8YhtsLNac/s1600/6.png" width="150" /></a></div><!--crawlist.net widget ends--></div>
How to add this widget in Blogger
First log in to your Blogger, select your Blog,
Go to 'Layout' tab then click 'add a gadget'
Select 'html/javascript' from pop up menu.
Copy following codes and configure
How to add this widget in Wordpress
From dashboard hover mouse on 'Appearance' tab,
From 'appearance' menu select 'widgets',
Then drag and drop 'Text' content box in widget area,
Copy following codes and paste into 'text' box
New Dashboard: Click on 'Text' add it to sidebar and paste following codes.
How to configure First collect your following social media profiles direct links and replace with default links. All links are red colored;
So, what you think about this widget and how it working on your Blog don't forget to mention :) And don't forget to subscribe and like Crawlist on Facebook for more cool widget's updates.
Feedburner email subscription box is a must have widget for both Blogger and wordpress users. But the default subscription widget is pretty simple and non attractive, that’s what I did published custom attractive and eye catchy subscription box before (like- Cool Feedburner email subscription box, Total social subscription box widget, 4 stylish Feedburner subscription widget) And here I am publishing another one The Unique subscription box here. This widget is both attractive and eye catchy, it made with Pure CSS3 ribbon, retina ready background, flat pressable submit button and so so. It also smaller sized and will be fit with any kind of website I guess. Let’s see how it looks like and how to add it in your Blogger and wordpress blogs.
Ribbon: Feedburner Email Subscription box for Blogger/Wordpress
Then drag and drop 'Text' content box in widget area,
Copy following codes and paste into 'text' box,
For new dashboard click on 'Text' add it to sidebar and paste following codes and configure
How to configure First log into your Feedburner account, get your Feedburner Id and replace FeedId pink colored (example- http://feeds.feedburner.com/your website’s feed id) Then save widget. Visit your site to see this widget working.
Widget compatibility
This widget tested with many templates and it compatible with all of them. Some template will not show this widget properly, in that case you have to fix widget’s margin code.
This widget works fine on All major web browser (latest versions)
So what you think about this widget do not forget to mention by comment, I would love to hear. And stay subscribed for more widget update in future. Goodluck
Now check your blog out for new link outlook. FAQ and Caution:
This code won’t work if your template has a different name for Post body class, so if this code fails then search within your template for the class name of the post area, and replace them with my given default codes classes.
You can change the links and underlines color, together or separately; just find and replace the color code with your demand.
This code chunk made with CSS and CSS3 should work nicely on any latest web browsers.
So what your opinion about this tutorial don’t forget to mention :) Goodluck,,,
Letting your social networking fan know about your new published post instantly ‘Auto tweet and auto post to Facebook’ your post is very effective and time saving. For Wordpress - using plugin can solve this auto tweet and auto post job but Blogger doesn’t have option like this. But there is also solution exists. Let’s see what I’m talking about Auto tweet and Auto post to Facebook your blogger blog’s post.
How to Auto tweet and Auto post to Facebook your Blogger’s post
Twitter Feed, does the job easily. All you need to do is set up your blog URL at their service. Here is a quick overview: How to submit you blog at Twitter Feed for Auto tweeting and Auto posting to Facebook your Blog post.
Below walk through steps are written; just read on:-
Open an account at Twitter Feed, confirm your email, and visit dashboard.
Click on ‘Create new feed’, you will direct to setup page
In setup page ‘Name your feed’ and ‘add your source URL’ you’ll be fill up with your site’s feed. Every site has feed. Your Blogger site too, default source URL looks like-
http://www.crawlist.net/feeds/posts/default
So place at ‘add your source URL’ input area you’ll be placing your site’s default feed
Set up ‘Update Frequency’ (30 minute to – 24 hours) Set up ‘And post up to new update’ (1-5) at a time. Set up ‘How link will be shown’, Just Title, Just description or both. Set up ‘Shorten link through’ service
Available Services is ‘Twitter’, ‘Facebook’, ‘LinkedIn’, ‘LinkedIn Company Page’, ‘App.Net’. Authenticate those services with your following profiles.
Job is done, check your status at dashboard anytime.
Hope you successfully made this job done. Any question or feedback don’t forget to mention by comment. Chill....
Blogger’s default list/bulleting system is using dots, dotting style is cool but not that much cool if you are little bit of stylish and want to stay trendy and also want to represent your lists with high-end taste. That’s reason here I am publishing 6 different style of bullet system calls Arrow, Minus, Check, Plus, Carrow and Star. Made with CSS, Google font, Sprite images and they are super easy to add; designed that way. Let’s see how they look like and how to add them to your Blogger blog.
Arrow style
.post-body ul {margin:0; padding:6px 0; list-style:none;} .post-body ul li {margin:10px; padding:0 0 5px 22px; color:#222222; background-repeat:no-repeat; background-position:-67px -558px; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8_bZA_nYwwgdNP14uc9TwuSlWNyzSV7apaETLFaQG6r0ICK-VQIbAJb-HfYnUDjq0uWJ6LRtpnLqY3OXjwYut3kfCHmrnOVhfI1vVwR5zHCi3UVfJ1WJmEvvwwrA9FxdMPbeCwE5YPRY4/s1600/oh.png); background-position:-303px -322px; font-size:15px; line-height:1;font-family: 'Droid Serif', serif; font-weight:100;}/*crawlist.net bullet*/ @import url(https://fonts.googleapis.com/css?family=Droid+Serif);
Minus style
.post-body ul {margin:0; padding:6px 0; list-style:none;} .post-body ul li {margin:10px; padding:0 0 5px 22px; color:#222222; background-repeat:no-repeat; background-position:-67px -558px; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8_bZA_nYwwgdNP14uc9TwuSlWNyzSV7apaETLFaQG6r0ICK-VQIbAJb-HfYnUDjq0uWJ6LRtpnLqY3OXjwYut3kfCHmrnOVhfI1vVwR5zHCi3UVfJ1WJmEvvwwrA9FxdMPbeCwE5YPRY4/s1600/oh.png); background-position:-101px -520px; font-size:15px; line-height:1;font-family: 'Droid Serif', serif; font-weight:100;}/*crawlist.net bullet*/ @import url(https://fonts.googleapis.com/css?family=Droid+Serif);
Check style
.post-body ul {margin:0; padding:6px 0; list-style:none;} .post-body ul li {margin:10px; padding:0 0 5px 22px; color:#222222; background-repeat:no-repeat; background-position:-67px -558px; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8_bZA_nYwwgdNP14uc9TwuSlWNyzSV7apaETLFaQG6r0ICK-VQIbAJb-HfYnUDjq0uWJ6LRtpnLqY3OXjwYut3kfCHmrnOVhfI1vVwR5zHCi3UVfJ1WJmEvvwwrA9FxdMPbeCwE5YPRY4/s1600/oh.png); background-position:-461px -163px; font-size:15px; line-height:1;font-family: 'Droid Serif', serif; font-weight:100;}/*crawlist.net bullet*/ @import url(https://fonts.googleapis.com/css?family=Droid+Serif);
Plus style
.post-body ul {margin:0; padding:6px 0; list-style:none;} .post-body ul li {margin:10px; padding:0 0 5px 22px; color:#222222; background-repeat:no-repeat; background-position:-67px -558px; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8_bZA_nYwwgdNP14uc9TwuSlWNyzSV7apaETLFaQG6r0ICK-VQIbAJb-HfYnUDjq0uWJ6LRtpnLqY3OXjwYut3kfCHmrnOVhfI1vVwR5zHCi3UVfJ1WJmEvvwwrA9FxdMPbeCwE5YPRY4/s1600/oh.png); background-position:-141px -480px; font-size:15px; line-height:1;font-family: 'Droid Serif', serif; font-weight:100;}/*crawlist.net bullet*/ @import url(https://fonts.googleapis.com/css?family=Droid+Serif);
Carrow style
.post-body ul {margin:0; padding:6px 0; list-style:none;} .post-body ul li {margin:10px; padding:0 0 5px 22px; color:#222222; background-repeat:no-repeat; background-position:-67px -558px; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8_bZA_nYwwgdNP14uc9TwuSlWNyzSV7apaETLFaQG6r0ICK-VQIbAJb-HfYnUDjq0uWJ6LRtpnLqY3OXjwYut3kfCHmrnOVhfI1vVwR5zHCi3UVfJ1WJmEvvwwrA9FxdMPbeCwE5YPRY4/s1600/oh.png); background-position:-619px -3px; font-size:15px; line-height:1;font-family: 'Droid Serif', serif; font-weight:100;}/*crawlist.net bullet*/ @import url(https://fonts.googleapis.com/css?family=Droid+Serif);
Star style
.post-body ul {margin:0; padding:6px 0; list-style:none;} .post-body ul li {margin:10px; padding:0 0 5px 22px; color:#222222; background-repeat:no-repeat; background-position:-67px -558px; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8_bZA_nYwwgdNP14uc9TwuSlWNyzSV7apaETLFaQG6r0ICK-VQIbAJb-HfYnUDjq0uWJ6LRtpnLqY3OXjwYut3kfCHmrnOVhfI1vVwR5zHCi3UVfJ1WJmEvvwwrA9FxdMPbeCwE5YPRY4/s1600/oh.png); background-position:-580px -44px; font-size:15px; line-height:1;font-family: 'Droid Serif', serif; font-weight:100;}/*crawlist.net bullet*/ @import url(https://fonts.googleapis.com/css?family=Droid+Serif);
How to add:
Log in to your Blogger, select your blog
Go to ‘Template’ tab, select ‘Edit HTML’
Search for ]]>< into code snippet (using Ctrl+F or Cmd+F)
Before ]]>< copy paste any of style you want to use
Save template, and see the changes by visiting blog or new post editing
Caution and FAQ:
Most of Template have default list/bullet style designed into template codes; and those code stays in
.post-body ul {} and .post-body ul li {}
So you your template already have these lines; mark them and delete them. And set my given codes.
You can’t use two or more style. But if you know little bit of coding then change the CSS class,
.post-body ul {} and .post-body ul li {} to .1 ul {} and .1 ul li {}
And in post editor switch to HTML, after listing being done; and add CSS class to following ul (like: <ul class="1">)
So what you opinion, feedback about this tutorial don’t forget mention. Goodluck.....
Email marketing is an important option for both entrepreneurBlogger and Internet marketers. For email marketing's essential tools is email sending services. Awber, Mailchimp, Madmimi, Get response are very popular. In these email sending services Mailchimp is very good choice for no matter you are beginner or pro and of course it's free and have ability to send beautiful customized newsletters. For sending newsletter you will need to have a list what can be done by sign up form. Problem is there Mailchimp Optin/email subscription/newsletter sign up forms are very simple and looks a bit of awkward with our themes/templates, Right? So reveling you from these boring-ness with sign up form here I publishing a homemade professional looking mailchimp sign up/subscription form. It's easy to configure and flat designed and it will easily match with any blogsites/websites. Let's see how it looks like and how to add it to your Blogger blog and wordpress sites and how to configure.
Professional Mailchimp Sign-up/Opt-in Form for Wordpress/Blogger
Then drag and drop 'Text' content box in widget area,
Copy following codes and paste into 'text' box,
For new dashboard click on 'Text' add it to sidebar
And paste following codes and configure
How to configure Configuring this form won't take a while, read on-
First log in to your mailchimp account,
Select 'List' from side menu,
Inside 'List' on your email subscriber list's very right part after 'stats'
Click on dropdown menu, select, 'Sign up forms' from there.
Then Select 'Embedded forms'.
When you are into 'Embedded forms'
From Classic sign up forms page's botton contains sign up forms HTMLcode,
Copy all code and paste them on any txt file/word file (notepad)
And select the following link what shown as image and replace the link with my default link (pink colored).
Save your widget/gadget and take a look at your site, How it looking on your site, how it working or any trouble please leave with comment. More cool Mailchimp subscription form will release soon stay subscribed, Happy Email marketing :)
Shareaholic is one of the most used all in one content sharing platform (like Addthis, Sharethis). The difference with other sharing platform of Shareaholic is;
Shareaholic has much cooler icons (Eye catchy, trendy and stylish)
Very customizable (Position, Icon size, Layout, Align, Headline)
Analytic, Fast loading, Responsive, and optional monetization option
Adding Shareaholic Sharing widgets in Blogger blog is easy, for your consideration setup process of adding Shareaholic widgets into Blogger blogs written below, read on-
Add Shareaholic Share button & bar to Blogger blog/below posts
Hit (Add Website) from Website Tools Dashboard page
Insert your BlogSpot Domain name and site name
Select platform ‘Blogger’, Content category, site Language, Hit continue
Next page you’ll see ‘Apps’ option, Turn on ‘Floating Share Buttons’, Click on ‘Setting’ icon
Now in ‘Layout’ fix Size, Counter, Align, Vertical offset, and services,
Additionally click on ‘Display rules’, Hit Save Settings
Now you’ll return to the Dashboard page, Get your mouse over ‘Location’ option
Select ‘Share Buttons’, In share button page, in Location input type ‘Below post’
Select your Theme, Headline, Position, Layout, Counter, Align and services
After all configurations complete, select ‘Save settings’,
You’ll redirect to Dashboard page, now click on ‘Get setup code’ and
Log into your Blogger blog on the other tab, select your blog
Go to ‘Template’ tab, and select ‘Edit HTML’
Search for </head> (using CTRL+F or CMD+F) into code snippet
Before </head> tag, paste ‘Get setup code’s codes
Again, Get back to Shareaholic tab, from location configuration, click on ‘</> icon’
And copy all codes from pop-up page
And from Blogger’s tab (into code snippet) search for,
<div class='post-footer-line post-footer-line-1'>
You may find this code phrase twice, ignore first phrase, after second phrase paste those codes,
You may add these codes too, with default codes cause default codes widget will appear on homepage too, re-edit the default code with this codes, like this-
If you can’t find <div class='post-footer-line post-footer-line-1'> than search for </article>, and paste codes below </article>
Save Template finally, And check your blog out for live preview
Content sharing widgets are very necessary tool for a blogsite, so share your content with style with Shareaholic sharing efforts make your Blogger blog little bit stylish and trendy. Any problem facing with tutorial leave with comments, new tutorial will release soon stay subscribed. Chill…..
CSS3 took web design to its most wanted attractive step. Using CSS3 effects on websites elements (text, images) makes our site look gorgeous and trendy. With this site I try to publish various CSS3 effects (base Button, Image effect) what you can use on your web project and Blogger blogs easily. To continue that here another super cool effect I presenting. It will give your image Swing effect on mouse hover. Made with CSS3 transform animation and keyframes to design the swinging pattern, it also cross browser supports. Let’s see how it looks like and how to enable it on your image of Blogger.
Couple of month ago I published a high-end featured post widget which can be add to sidebar of your Blogger blog. Here today I am publishing another featured post widget what you can use on your homepage or below posts. This widget is a jQuery slider also known as ticker image slider. This featured post slider is:
In 'place link' place your links and add your post title in ‘place hover text’
In "image link" place your image link, you can host image on Blogger; just upload you image; preview them and from address bar copy image’s direct code and place them in Image link; otherwist use Tinypic-Upload your image; then copy links from ‘direct links for layout’. You should use images size of 200px width and 125px height
You can delete a slide content by deleting <li> to </li>
You can add more slide by coping <li> to </li>
You can also change the default image size by changing value of height and width (red marked)
How it working on your blog don’t forget to mention and any question and feedback leave with comment. Goodluck...
