Labnol style Social Media Buttons with Hover Effect for Blogger

Hey guys, Checkout this awesome retro style social media widget with hover effect.

If you want to add this widget to your blog just follow this simple steps

1.Log in to your Blogger.
2.Go to Layout > Click on 'Add a Gadget'.
3.Choose HTML/Javascript.
4.Copy Paste the below code inside it.



<style>
.labnolSocial{display:inline-block;margin:10px
0}.labnolSocial
a{text-decoration:underline !important;float:right}.labnolSocial
span{float:left;display:inline;margin-right:10px}.labnolSocial
span.last{margin-left:0}.labnolSocial span
a{display:block;width:32px;height:32px;text-indent:-9999px;background-color:none;background:transparent url("http://img803.imageshack.us/img803/9103/labnolcss.png") 0 0 no-repeat}#iconTwitter{background-position:-33px -33px}#iconTwitter:hover{background-position:-33px 0}#iconFacebook{background-position:-66px -33px}#iconFacebook:hover{background-position:-66px 0}#iconRSS{background-position:0 -33px}#iconRSS:hover{background-position:0 0}#iconYouTube{background-position:-99px -33px}#iconYouTube:hover{background-position:-99px 0}#iconGooglePlus{background-position:-132px -33px}#iconGooglePlus:hover{background-position:-132px 0}.logo{background:url("labnol.org/wp/wp-content/themes/baba/logo-XL.png") no-repeat scroll 0 0 transparent;margin:0
auto;width:420px;padding:0
0 20px 0}
</style>

<div class="labnolSocial"> <span> <a title="RSS Feed" href="http://feeds.feedburner.com/zgamerx" target="_blank" id="iconRSS" onclick="_gaq.push(['_trackEvent', 'Subscribe', 'RSS', document.location.pathname]);">RSS</a> </span> <span> <a title="Follow on Twitter" href="http://twitter.com/vishalassassin" target="_blank" id="iconTwitter" onclick="_gaq.push(['_trackEvent', 'Subscribe', 'Twitter', document.location.pathname]);">Twitter</a> </span> <span> <a title="Facebook Page" href="http://www.facebook.com/zgamerxs" target="_blank" id="iconFacebook" onclick="_gaq.push(['_trackEvent', 'Subscribe', 'Facebook', document.location.pathname]);">Facebook</a> </span> <span> <a title="YouTube Channel" href="http://www.youtube.com/user/vishalassassin" target="_blank" id="iconYouTube" onclick="_gaq.push(['_trackEvent', 'Subscribe', 'YouTube', document.location.pathname]);">YouTube</a> </span> <span> <a title="Google Plus" href="https://plus.google.com/117521503834739609237" target="_blank" id="iconGooglePlus" onclick="_gaq.push(['_trackEvent', 'Subscribe', 'Google Plus', document.location.pathname]);">YouTube</a> </span></div> 



Customizations 

Replace zgamerx with your FeedBurner Username
Replace vishalassassin with your Twitter Username
Replace zgamerxs with your Facebook Username
Replace vishalassassin with your YouTube Username
Replace 117521503834739609237 with your Google+ Profile Id   

5. Click save.

That's all.

Have any problem, Please comment.