Latest Stylish Subscribe Icons Widget For Blogger

Hello friends, in this post I will tell you how to display latest stylish subscribe icons widget for blogger. I had seen on a lot of sites.Because of my self imposed break from publishing such tutorials I decided to add the code into jsFiddle and send out a Tweet and add it to our FaceBook page so followers could grab it.Since then I have got a lot of requests from people who don't quite understand how to transfer the code on jsFiddle to their blogs.

Add The subscribe Icons Gadget To Blogger

• Login in to your Blogger account.
• Now navigate to the Layout section from your dashboard.
• Click to add a HTML/JavaScript gadget where you want this widget to appear.
• Copy and paste the following code in to it.

Code :

<style>
.social{background:none repeat scroll 0 0#fff;border-bottom:1px solid#F0F0F0;height:90px;padding:8px}.social li{float:left;margin-right:4px;text-align:center;width:52px;list-style:none}.social li.last{margin-right:0}.social li a{color:#666666;font-size:11px;line-height:34px;opacity:0.6;padding-top:42px}.social li a:hover{color:#666666;opacity:1;text-decoration:none}.social.social-feed{background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKpN-s2x33tFV49tAp8nRIe30M1e4DtD8CKpMdhvhkNFhyphenhyphenjTplX1baVl-yNPRy9VqTj16kuS_8TgL-MKB5hzoWqslkYjvgB2BuuZNF7PQarEnRzbrB5giPniL1RSZ4OLo6IkTVQ1juHtML/")no-repeat scroll 0 0 transparent;display:block}.social.social-email{background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeJK4MErv6o8wVOx6pkXE_XK4GfEt0Y9QCnvs4xUOB2_hZ2QxjutFT7g-_ktrA2KLNPvziGdP7WoU3ZxPWTihszQIeAdC5xFybD211V08ROTb5BJu88SNHTBGxQxSnt159iDUlbgrEQDcC/s1600/email-feed.png")no-repeat scroll 0 0 transparent;display:block}.social.social-twitter{background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJw3TSauwwJgrtg9JFtmQkUbAecICrfvF86JounIeME7TXRAirRxpEI2ixtc6xC9_72Xx1w9po2h4aAxoJVIAgUyckZe-zzneBrV34vTGuKB2CkfxRmQQci8_0ZZ3M87_SJ__M8NsnzuEh/")no-repeat scroll 0 0 transparent;display:block}.social.social-facebook{background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJk2bNDCzWTY8KB2EnjkCLiVRghYpblR1TiRnBMnaxJy0gh9RPoRUWxQ4V45zsOT8cK1MVd8tge07KkX6gecFJJDJuSJAcWWd4OWSYqTi8hf1tzf5049cOyY-79e81VfAAcr0hFgjTIj2q/")no-repeat scroll 0 0 transparent;display:block}.social.social-googleplus{background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4V8sP8L-zHxsvDFJZsRM4lfqeSa4jblMDskU1XA4COKBXb7HKenlLE_9dAPXlaCZfYKfGjmwX55UXViHBY1CEGpwioPugRwwxGCx_JRKixwTdGvr4iub5WmNe9MRkbwk7ZfTqgnBOUgIn/")no-repeat scroll 0 0 transparent;display:block;margin-right:0}.social.social-pinterest{background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbvD80C5qv-EwJx5iQ6onu7phwp1V6JTyyajbWTYFlcX_YuUdAS3fV2iprtE_rPi7KyWdEMrAztAfUiZ2Y0Dhxhb3tLtEHk5bQUYDuDDXdNQrCjKfk_W0ydLkU89W9VE-zJzU8K-kMfL1l/s1600/pinterest-icon.png")no-repeat scroll 0 0 transparent;display:block}
/* from http://www.makemoneyfreewithus.blogspot.com */
</style>
<ul class='social'>
<li><a class='social-feed' href='http://feeds.feedburner.com/My blog' rel='nofollow' target='_blank'>RSS</a></li>

<li><a class='social-email' href='http://feedburner.google.com/fb/a/mailverify?uri=My blog&loc=en_US'
rel='nofollow' target='_blank'>Email</a></li>
<li><a class='social-twitter' href='http://twitter.com/My blog' rel='nofollow' target='_blank'>Twitter</a></li>
<li><a class='social-facebook' href='http://facebook.com/My blog' rel='nofollow' target='_blank'>Facebook</a></li>

<li><a class='social-pinterest' href='http://pinterest.com/My blog/' rel='nofollow' target='_blank'>Pinterest</a></li>
<li class='last'><a class='social-googleplus' href='https://plus.google.com/b/108200902911276741668/10820090291127674166/posts'>Google+</a></li>
</ul>
<small><a href="http://www.makemoneyfreewithus.blogspot.com">Blogger Tips and Tricks</a></small>

Important Notes : The social and feed links are highlighted in red, you need to change these to your own.

For the Email Rss you only need to add your feedburner ID, as you can see above mine is 'My blog'.Your feeburner ID will be the end part of your feedburner URL for example http://www.feedburner.com/myblog with myblog being the ID.