Add New Social Media Sharing Widget With Hover Effect

Most o of the bloggers get maximum of their traffic from social media. Social media is the best place where you get popularity and people share your post if they like. So if you are best in social media you just need little bit of SEO to take your blog to highest place. In short we can say that social media is the place where you become a celebraity without any extra efforts. Today i am sharing with you a very beautiful social media widget with hover effect. I have series on this topic, so this is first post of this series.

Let's see how to add this.

Series on Social Media Sharing

Add New Social Media Sharing Widget With Hover Effect
(Current)

How to Add Email Subscription Box With Social Media Icons In Blogger?(Published)

Round Social Sharing Widget With Animated And Hover Effect (Published)

Adding Social Media Widget in Blogger

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 .

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/AVvXsEgKrXJmcki2jTpJPT8X6slz-82YNmn36N7smseFPXi0F0ClFTx00FXOyeXQCRlzSBVSmyZIBbHGUSL-wKkRpH94jSTIn2lkD6L3R7I4q59b5fBZ7BPpb3BRBuu57PwjOrCKCrK-h6y_k1t0/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.

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.

Demo Version

That's all for today. I hope you will like this article. If you face any problem do mention in comments. Will come up with next posting of this series. Have a Nice Day.