Social Buttons With Hover Effect Like labnol.org

How to add a beautiful social networking buttons to your blogger blog. these networking buttons are inspired from labnol.org . social networking buttons are one of the best way to engaged your users and it will create a better relation of you with your readers

here's the live demo of social networking buttons
and i also add link below with which you can easily take a view of social networking buttons.

You can easily install this widget to your blogger blog and these buttons are really beautiful.

Installation:

• Goto blogger dashboard
• now Goto page layout tab
• Then add a gadget and select html/javascript
• Now paste below code in it.

<style> /************************** Social Buttons from zain-net.blogspot.com *************************/ .haseebnetgotsocial {padding: 2em 0 1.5em 50px;} .haseebnetgotsocial span  a {display: block;width: 32px;height: 32px;text-indent: -9999px;background-color: none;background: transparent url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEje4cVb8zU_-HIN8i8mbpztDJ1c101Fdu6BHN9PlqEsSSYy-PNVaNTGAXL0KItbgiONG78oU6UFzHu8JYnH116r61Ll_KEL5s5fNk5pGS6ruURIDZa2lpfuKo9lq5yDCgpcMgnIb7tJpzn4/s1600/socialbuttons.png") 0 0 no-repeat;} .haseebnetgotsocial span {float: left;display: inline;margin-right: 8px;}
#iconTwitter,#iconFacebook,#iconRSS,#iconYouTube,#iconGooglePlus {transition:background-position .4s ease-in-out;-webkit-transition:background-position .4s ease-in-out; -o-transition:background-position .4s ease-in-out; -moz-transition:background-position .4s ease-in-out; -ms-transition:background-position .4s ease-in-out;}
#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 0px;}
#iconYouTube {background-position: -99px -33px;} #iconYouTube:hover{background-position:-99px 0}
#iconGooglePlus {background-position: -132px -33px;} #iconGooglePlus:hover {background-position: -132px 0;}
.ads67 {border: 1px solid gainsboro;border-right-style: none;border-left-style: none;}

</style>
<div class="haseebnetgotsocial"> <span><a href="http://twitter.com/xxxxxxx" id="iconTwitter" target="_blank" title="Twitter: carelexx malik">Twitter</a></span> <span><a href="http://www.facebook.com/xxxxxxx" id="iconFacebook" target="_blank" title="Facebook: Carelexx malik">Facebook</a></span> <span><a href="http://feeds.feedburner.com/xxxxxx" id="iconRSS" target="_blank" title="RSS Feed: haseebnet blog post feed">RSS</a></span> <span><a href="https://www.youtube.com/user/xxxxxxx" id="iconYouTube" target="_blank" title="YouTube Channel: carelexx malik on youtube">YouTube</a></span> <span><a href="https://plus.google.com/10886765464645435354353?rel=author" id="iconGooglePlus" target="_blank" title="Google Plus: haseeb malik">Google</a></span> </div>

Now kindly replace all yellow colored links with your links

Now save it and its done.