Today i,m going to tell you that 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.

Social networking buttons with hover effect

• 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 Haseebnet.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("http://4.bp.blogspot.com/-R1ZmmnETQEQ/T0xFPa2HyXI/AAAAAAAAAB0/zIaZHlquhv0/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/carelexxmalik" id="iconTwitter" target="_blank" title="Twitter: carelexx malik">Twitter</a></span> <span><a href="http://www.facebook.com/carelexxmallik" id="iconFacebook" target="_blank" title="Facebook: Carelexx malik">Facebook</a></span> <span><a href="http://feeds.feedburner.com/haseebnetwork" id="iconRSS" target="_blank" title="RSS Feed: haseebnet blog post feed">RSS</a></span> <span><a href="https://www.youtube.com/user/mrdevilkid63" id="iconYouTube" target="_blank" title="YouTube Channel: carelexx malik on youtube">YouTube</a></span> <span><a href="https://plus.google.com/108867173879409387931?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

I hope you like and enjoy my widgets and please keep visiting and if you have any question or feedback please comment below.