Hover style social media subscription widget

Hi! to all sweet...In this post i am going to share a hover style social media icons that you can add/install in your blogger blog easily. You can add this widget in sidebar, your website's header section, footer section and other places that you consider suitable for this widget. This is really a great attractive widget that surely increase the list of your subscribers. This widget include Facebook, Twitter, Google Plus, Pintrest, Youtube, Linkdin and a Google feed burner email subscription. To add this widget in your blog follow the below steps...
Live preview

How to add this beautiful hover style social widget in Blogger:

Log in to your Blogger dashboard.

Select your template in which you want to add/install this widget.

Go to layout >> Add a Gadget >> select HTML/JavaScript

 Paste the below code and save it. Now save arrangements.

<style>
#content-social ul li{padding: 0px 0px 0px 0px;}
#content-social{float:right;width:452px;}
#content-social ul{display:inline;float:right;}
#content-social ul li{border: 1px solid rgb(226, 226, 226);display:inline;float:left;overflow:hidden; margin-left: 5px;}.fb-but,.twitter-but,.pinterest-but,.google-but,.linkedin-but,.rss-but{float:left;transition:all .1s;-moz-transition:all .1s;-ms-transition:all .1s;-o-transition:all .1s;-webkit-transition:all .1s;width:30px;height:30px;}
.fb-but{background:rgb(241, 241, 241) url(http://www.blogvela.com/wp-content/uploads/2013/05/social-buttons.png) 0 0;}
.fb-but:hover{background:#3b5997 url(http://www.blogvela.com/wp-content/uploads/2013/05/social-buttons.png) 0 -30px;}
.twitter-but{background:rgb(241, 241, 241) url(http://www.blogvela.com/wp-content/uploads/2013/05/social-buttons.png) -30px 0;}
.twitter-but:hover{background:#00aced url(http://www.blogvela.com/wp-content/uploads/2013/05/social-buttons.png) -30px -30px;}
.pinterest-but{background:rgb(241, 241, 241) url(http://www.blogvela.com/wp-content/uploads/2013/05/social-buttons.png) -60px 0;}
.pinterest-but:hover{background:#cb2027 url(http://www.blogvela.com/wp-content/uploads/2013/05/social-buttons.png) -60px -30px;}
.google-but{background:rgb(241, 241, 241) url(http://www.blogvela.com/wp-content/uploads/2013/05/social-buttons.png) -90px 0;}
.google-but:hover{background:rgb(223, 103, 103) url(http://www.blogvela.com/wp-content/uploads/2013/05/social-buttons.png) -90px -30px;}
.youtube-but{background:rgb(241, 241, 241) url(http://www.blogvela.com/wp-content/uploads/2013/05/social-buttons.png) -120px 0;float:left;transition:all 0.1s;-moz-transition:all 0.1s;-ms-transition:all 0.1s;-o-transition:all 0.1s;-webkit-transition:all 0.1s;width:54px;height:30px;}
.youtube-but:hover{background:#f00 url(http://www.blogvela.com/wp-content/uploads/2013/05/social-buttons.png) -120px -30px;}
.linkedin-but{background:rgb(241, 241, 241) url(http://www.blogvela.com/wp-content/uploads/2013/05/social-buttons.png) -174px 0;}
.linkedin-but:hover{background:#069 url(http://www.blogvela.com/wp-content/uploads/2013/05/social-buttons.png) -174px -30px;}
.rss-but{background:rgb(241, 241, 241) url(http://www.blogvela.com/wp-content/uploads/2013/05/social-buttons.png) -204px 0;}
.rss-but:hover{background:#f60 url(http://www.blogvela.com/wp-content/uploads/2013/05/social-buttons.png) -204px -30px;}
</style>
<div id="content-social">
<ul>
<li><a href="http://www.facebook.com/#" class="fb-but ext-link" target="_blank"></a></li>
<li><a href="http://www.twitter.com/#" class="twitter-but ext-link" target="_blank"></a></li>
<li><a href="https://plus.google.com/u/0/#" class="google-but" rel="author"></a></li>
<li><a href="http://www.pinterest.com/#/" class="pinterest-but ext-link" target="_blank"></a></li>
<li><a href="http://www.youtube.com/user/#" class="youtube-but ext-link" target="_blank"></a></li>
<li><a href="http://www.linkedin.com/in/#" target="_blank" class="linkedin-but"></a></li>
<li><a href="http://www.feeds.feedburner.com/#" target="_blank" class="rss-but"></a></li>
<li>
</div>
</li>
</ul>
</div>

Cutomization Of this widget:
In the HTML section of this widget Find # and replace it with your own social profiles links..
Enjoy!