Labnol Style Social Media Buttons with Hover Effect for Blogger

Hello Guys, Today I'm back with another cool widget from Digital Inspiration blog. This time it's Social Media buttons with Hover Effect.

You must have seen Social Media buttons widget on Labnol.org. The buttons are located at the bottom, just above the numbered page navigation. The Social buttons have a nice hover effect which changes the color of the button.

Features

• Professional Looking
• Mouse Hover Effect
• Loads pretty fast
• Attractive

How to Add Labnol Style Social Media Buttons to Blogger

If you want to install this widget on your blog then kindly follow the steps given below.

• Log in to your Blogger
• Go to Layout > Click on 'Add a Gadget'
• Choose HTML/Javascript
• 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/The-Area51" 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/jimmieluthra" 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/thearea51blog" 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/area51blog" 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>

• Make the following changes to the Code

Replace The-Area51 with your FeedBurner Username
Replace jimmieluthra with your Twitter Username
Replace thearea51blog with your Facebook Username
Replace area51blog with your YouTube Username
Replace 117521503834739609237 with your Google+ Profile Id 

• Save it

Congratulations! You've installed the widget successfully. If you liked this post the please share it with your friends over social media and please leave comments below.