How to add social share buttons with Hover effect

Every blog has a common element that is Social share buttons,it is the most important Gadget for publishing your blog.We can present it in our own ways,some bloggers like to present it in simple ways,some want to add effects to draw viewers attention and so on.This tutorial will show you how to add a mouse hover effect to the share buttons.It is unique and simple and the effect has also been used by India's No. 1 blog labnol.org.

Method follows as:

1) In New Blogger interface

Dashboard-----Layout-----Add a Gadget-----Choose the HTML/JavaScript Gadget

   In Old Blogger interface

Dashboard----Design----Page elements----Add a Gadget----Choose a HTML/JavaScript Gadget

2) Now add the following codes

<style type="text/css">
.pbtv2Social {
display: block;
margin: 2em auto;
width: 200px;
height:40px;
}
.pbtv2Social span {
float: left;
display: inline;
margin-right: 8px;
}
.pbtv2Social span a {
display: block;
width: 32px;
height: 32px;
text-indent: -9999px;
background-color:none;
background: transparent url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBxSfuO3zu_eHidQOwHBldGMC9xcrs1Z2PdoBYwSBKLfjiS-cyYlYyjRkbe8K9TddUvkticneoO6_fhBrlF5cwQs78_CZP0xIxZwwLrOvUgFSnJmwQu6afX_UL0Tv0_IUUu_sseGWOx6Uf/s1600/social+icon.png") 0 0 no-repeat;
}
#iconTwitter {background-position: -33px -33px;}
#iconFacebook {background-position: -66px -33px;}
#iconRSS {background-position: 0 -33px;}
#iconYouTube {background-position: -99px -33px;}
#iconGooglePlus {background-position: -132px -33px;}
#iconTwitter:hover {background-position: -33px 0;}
#iconFacebook:hover{background-position:-66px 0}
#iconRSS:hover{background-position:0 0}
#iconYouTube:hover{background-position:-99px 0}
#iconGooglePlus:hover{background-position:-132px 0}
</style>
<div class='pbtv2Social'>
<span><a href='https://twitter.com/TechnoTrickoloo' id='iconTwitter' target='_blank' title='Follow us on Twitter'>Twitter</a></span>
<span><a href='http://www.facebook.com/pages/TechnoTrickology/135531163253082' id='iconFacebook' target='_blank' title='Join us at Facebook'>Facebook</a></span>
<span><a href='http://feeds.feedburner.com/blogspot/ZFqps' id='iconRSS' target='_blank' title='Subscribe our RSS Feed'>RSS</a></span>
<span><a href='http://www.youtube.com/channel/UCdmqJ87bCAxR4kPsgrulF3A?feature=mhee' id='iconYouTube' target='_blank' title='Follow our YouTube Channel'>YouTube</a></span>
<span><a href='https://plus.google.com/u/0/103848333741261169063'id='iconGooglePlus' rel="author" target='_blank' title='Follow us at Google+'>Google</a></span></div>

Change the highlighted URLs with your account URLs

3) Click on Save in old blogger interface and in case of New Blogger interface click on Save arrangement

That's all.If you get any problem Contact me