Colorful Subscription Widget For Blogger Blog

The main motive of our blog is to share more and more widgets so that readers can easily manage the overall look of the blog. Today we are going to share another blogger widget that is a colorful subscription widget, which can easily placed just below the post body. In order to load it faster only the basic properties of CSS are used no jQuery used in this widget.This Widget gives a perfect look to your blog if blog theme is light.The designing idea of this widget is taken from labnol.org.

Why To Use Colorful Subscription Widget To Blog

This colorful subscription widget for blogger have lots of advantages so take a look.

Easily embedded with your blog theme.
Give a professional look to your blog.
Very light in size and don't affect with your page loading time.

Demo

Wow! Interested to add this on blog, just follow the steps below.

How To Add Colorful Subscription Widget To Blogger Blog

Add Widget Below the Post Body

To add this widget just below the post body, Go to Blogger / Template / Edit HTML / Proceed, Click Expand Widget templates, Search the following piece of code in template.

<data:post.body/>

And paste the following code just below the <data:post.body>

<!-- Code on www.allbloggingtricks.com--> 
<style type='text/css'>
.socialabt {
display: block;
margin: 2em auto;
width: 200px;
height:40px;
}
.socialabt span {
float: left;
display: inline;
margin-right: 8px;
}
.socialabt span a {
display: block;
width: 32px;
height: 32px;
text-indent: -9999px;
background-color: none;
background: transparent url(&quot;http://4.bp.blogspot.com/-z1mg08fd7-8/ULnP5Og9YwI/AAAAAAAABZg/LTHMWJwCXjQ/s1600/social_icons.png&quot;) 0 0 no-repeat;
}
#iconTwitter {background-position: -33px -33px;}
#iconFacebook {background-position: -66px -33px;}
#iconRSS {background-position: 0 -33px;}
#iconYouTube {background-position: -99px -33px;}
#iconGooglePlus {background-position: -132px -33px;}
#iconTwitter:hover {background-position: -33px 0;}
#iconFacebook:hover{background-position:-66px 0}
#iconRSS:hover{background-position:0 0}
#iconYouTube:hover{background-position:-99px 0}
#iconGooglePlus:hover{background-position:-132px 0}
</style>

<div class='socialabt'>
<span><a href='http://www.twitter.com/allbloggingtric' id='iconTwitter' target='_blank' title='Follow us on Twitter'>Twitter</a></span>
<span><a href='http://www.facebook.com/bloggertrick' id='iconFacebook' target='_blank' title='Join us at Facebook'>Facebook</a></span>
<span><a href='http://feeds.feedburner.com/allbloggingtricks' id='iconRSS' target='_blank' title='Subscribe our RSS Feed'>RSS</a></span>
<span><a href='http://youtube.com/allbloggingtricks' id='iconYouTube' target='_blank' title='Follow our YouTube Channel'>YouTube</a></span>
<span><a href='https://plus.google.com/117305698834844817404' id='iconGooglePlus' target='_blank' title='Follow us at Google+'>Google</a></span></div>

And finally save your template.

Modification

Replace http://www.twitter.com/allbloggingtric to your twitter follower page.
Replace http://www.facebook.com/bloggertrick to your facebook fan page.
Replace http://feeds.feedburner.com/allbloggingtricks to your feedburner id.
Replace http://youtube.com/allbloggingtricks to your YouTube channel.
Replace https://plus.google.com/117305698834844817404 to Google+ page.