Social Media Widget to your blog with jquery effect

1. Go to blogger and select your blog. Backup your template.

2. Go to Templates==> Edit HTML==> Proceed .

3. Search for below code by pressing Ctrl+F .

]]></b:skin>

4. Copy and paste the below code and paste it  just above this line and click on save template.

 /*----howdoblog.com widget start----*/
.htb-soc-ico{overflow:hidden}
.htb-soc-ico .alignleft,.htb-soc-ico .alignright{margin:0;padding:0}
.htb-soc-ico ul li{background:none!important;border:none!important;float:left;list-style-type:none!important;margin:0 5px 0px!important;padding:0!important}
.htb-soc-ico ul li a,.htb-soc-ico ul li a:hover{background:#B5CDED url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqJ0Fqv0ke-9Vb5ueGezthO9Oz9-TD10CJsJ8aJdbwO3Pv61gXoac0CxTJWo-Lg-eHo3-IPah_YLSZjOj-9kXAwjSUVT2A8mR0u2Z1VuGM8rOEMinPUqutXwKqzywHJ6whXKwHQgauAzo8/s1600/sprite_48x48.png) no-repeat;-moz-border-radius: 100px -webkit-border-radius: 100px;border-radius:3px;display:block;height:48px;overflow:hidden;text-indent:-999px;width:48px}
.htb-soc-ico ul li a:hover{background-color:#31BFF3}
.htb-soc-ico ul li.social-facebook a,.htb-soc-ico ul li.social-facebook a:hover{background-position:-96px 0}
.htb-soc-ico ul li.social-gplus a,.htb-soc-ico ul li.social-gplus a:hover{background-position:-144px 0}
.htb-soc-ico ul li.social-pinterest a,.htb-soc-ico ul li.social-pinterest a:hover{background-position:-240px 0}
.htb-soc-ico ul li.social-rss a,.htb-soc-ico ul li.social-rss a:hover{background-position:-288px 0}
.htb-soc-ico ul li.social-twitter a,.htb-soc-ico ul li.social-twitter a:hover{background-position:-384px 0}
 /*----howdoblog.com widget end----*/

 

5. Now go to Layout==> Add a Gadget==> HTML/Javascript and paste the below code.

 <div id="htb-soc-ico-2" class="widget htb-soc-ico">
<div class="widget-wrap">
<ul class="alignright">
<li class="social-facebook"><a href="http://www.facebook.com/howdoblog" rel="nofollow" target="_blank">Facebook</a></li>
<li class="social-gplus"><a href="https://plus.google.com/u/0/106519586692847321676" rel="nofollow" target="_blank">Google+</a></li>
<li class="social-pinterest"><a href="http://www.pinterest.com/howdoblog" rel="nofollow" target="_blank">Pinterest</a></li><li class="social-rss"><a href="http://feeds.feedburner.com/blogspot/xAgsz" rel="nofollow" target="_blank">RSS</a></li>
<li class="social-twitter"><a href="http://twitter.com/howdoblog" target="_blank">Twitter</a></li>
</ul>
</div>
</div>

 6. Replace these things...

• Replace "http://www.facebook.com/howdoblog" with your facebook page.
• Replace "https://plus.google.com/u/0/106519586692847321676" with your Google account.
• Replace "http://www.pinterest.com/howdoblog" with your pinterest account.
• Replace "http://feeds.feedburner.com/blogspot/xAgsz" with your RSS feeds.
• Re[lace "http://twitter.com/howdoblog" with your twitter account.

 by Lord Alio