Add New Beautiful Social Media Widget With Hover Effects In Blog

Today i am sharing with you very beautiful social media widget. I have designed it specially for you. It looks very awesome with hover and sliding effect. You know that social media is playing main role in driving traffic to your blog. You must have social media widget in your blog. It includes the latest social media icons like Facebook, Twitter, Pinterest, Linkdin, Youtube and Google+. If you want to add another icon, you can add it very easily. To know how to add this in your blog just follow these below steps. I will guide you through each step.
See Demo Version

Demo Version

New Social Media Widget for Bloggers

1. Go to Blogger account and open your desired blog.

2. Go to Layout==> Add a Gadget==> HTML/Javascript.

3. Give a suitable title and copy paste the below code in content box.

/*social icon By howdoblog.com*/
#head-soc{width:450px ; }
#head-soc ul li {list-style :none; padding: 0 0 0 1px; float: left;margin-left:2px;}
#head-soc ul li a {text-indent: -9999px; font-size: 0; line-height: 0; overflow: hidden ; height: 32px; width: 32px ;border: 0px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9BREysWEX6qbRzj0S8c-JhCgYHjU2dYvsM99kYe70kn0EZxIT2ZYSiM9jarxfIbkasku2hIadbTN9hwmQ-8NqlQhV7YMdQYTnV6DataS41tHmJF8ZZraCDBiiwzWHsYuNkExJ7PmG/s1600/social+sharing.png) no-repeat; display: block;}

#head-soc li#g a {background-position: 0px 0px;margin:0px 3px; }
#head-soc li#g a:hover {background-position: 0px -32px;margin:0px 3px; 
transform:rotate(-15deg);
-ms-transform:rotate(-15deg); 
-moz-transform:rotate(-15deg); 
-webkit-transform:rotate(-15deg); 
-o-transform:rotate(-15deg); 
-moz-transition-duration: 550ms; 
-webkit-transition-duration: 550ms;
-o-transition-duration: 550ms; 
}

#head-soc li#rss a {background-position: -32px 0px;margin:0px 3px;}
#head-soc li#rss a:hover {background-position: -32px -32px;margin:0px 3px;transform:rotate(30deg);
transform:rotate(15deg);
-ms-transform:rotate(15deg); 
-moz-transform:rotate(15deg); 
-webkit-transform:rotate(15deg); 
-o-transform:rotate(15deg); 
-moz-transition-duration: 550ms; 
-webkit-transition-duration: 550ms;
-o-transition-duration: 550ms; 
}

#head-soc li#fb a {background-position: -96px 0px;margin:0px 3px;}
#head-soc li#fb a:hover {background-position: -96px -32px;margin:0px 3px;transform:rotate(30deg);
transform:rotate(15deg);
-ms-transform:rotate(15deg); 
-moz-transform:rotate(15deg); 
-webkit-transform:rotate(15deg); 
-o-transform:rotate(15deg); 
-moz-transition-duration: 550ms; 
-webkit-transition-duration: 550ms;
-o-transition-duration: 550ms; 
}

#head-soc li#twit a {background-position: -128px 0px;margin:0px 3px;}
#head-soc li#twit a:hover {background-position: -128px -32px;margin:0px 3px;transform:rotate(30deg);
transform:rotate(-15deg);
-ms-transform:rotate(-15deg); 
-moz-transform:rotate(-15deg); 
-webkit-transform:rotate(-15deg); 
-o-transform:rotate(-15deg); 
-moz-transition-duration: 550ms; 
-webkit-transition-duration: 550ms;
-o-transition-duration: 550ms;  
}

#head-soc li#li a {background-position: -160px 0px;margin:0px 3px;}
#head-soc li#li a:hover {background-position: -160px -32px;margin:0px 3px;transform:rotate(30deg);
transform:rotate(15deg);
-ms-transform:rotate(15deg); 
-moz-transform:rotate(15deg); 
-webkit-transform:rotate(15deg); 
-o-transform:rotate(15deg); 
-moz-transition-duration: 550ms; 
-webkit-transition-duration: 550ms;
-o-transition-duration: 550ms;  
}

#head-soc li#youtube a {background-position: -192px 0px;margin:0px 3px;}
#head-soc li#youtube a:hover {background-position: -192px -32px;margin:0px 3px;transform:rotate(30deg);
transform:rotate(-15deg);
-ms-transform:rotate(-15deg); 
-moz-transform:rotate(-15deg); 
-webkit-transform:rotate(-15deg); 
-o-transform:rotate(-15deg); 
-moz-transition-duration: 550ms; 
-webkit-transition-duration: 550ms;
-o-transition-duration: 550ms; 
}

#head-soc li#sub a {background-position: -64px 0px;margin:0px 3px;}
#head-soc li#sub a:hover {background-position: -64px -32px;margin:0px 3px;transform:rotate(30deg);
transform:rotate(-15deg);
-ms-transform:rotate(-15deg); 
-moz-transform:rotate(-15deg); 
-webkit-transform:rotate(-15deg); 
-o-transform:rotate(-15deg); 
-moz-transition-duration: 550ms; 
-webkit-transition-duration: 550ms;
-o-transition-duration: 550ms;  
}
/*Social Icons by howdoblog.com */

<div id='head-soc'>
<ul>
<li id='g'><a href='https://plus.google.com/106519586692847321676 '>Google+</a></li>
<li id='rss'><a href='http://feeds.feedburner.com/blogspot/xAgsz?format=xml'>RSS Feed</a> </li>
<li id='sub'><a href='http://pinterest.com/howdoblog'>Subscribe</a></li>
<li id='fb'><a href='http://facebook.com/howdoblog'>Facebook</a></li>
<li id='twit'><a href='http://twitter.com/howdoblog'>Twitter</a></li>
<li id='li'><a href='http://www.linkedin.com/in/safeerahmed80'>LinkedIn</a></li>
<li id='youtube'><a href='http://www.youtube.com/5398131'>YouTube</a></li>
</ul>
</div>

4. Replace these by your accounts.

https://plus.google.com/106519586692847321676 with your Google+ account.
http://feeds.feedburner.com/blogspot/xAgsz?format=xml with your feeds link.
http://pinterest.com/howdoblog with your pinterest account.
http://facebook.com/howdoblog with your facebook account.
http://twitter.com/howdoblog with your twitter account.
http://www.linkedin.com/in/safeerahmed80 with your linkedin account.
http://www.youtube.com/5398131 with your youtube account

4. Click on save and view your blog.

5. Fix the position of widget by placing it on appropriate position.

6. Now you have this beautiful sharing widget on your blog.

This was short tutorial on how to add social media widget in your blog. I hope you all will like this widget. Give me feedbacks and enjoy this widget. Have a Nice Day.