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 Indias 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

.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/AVvXsEjR5-PDK1llD0dKdpOBmQ_UhDY1wJyqEuuKCDVxA6XM5okBKc96FM56aoWUBXwHPdhbG6VOX_ESGphzJ6mcnNb6brlY70Ea0THcwIybv6umq2JWJH7NbnWVWFGEdkj5_hm4WS9bEw9VWxiW/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}

https://twitter.com/TechnoTrickoloo id=iconTwitter target=_blank title=Follow us on Twitter>Twitter
http://www.facebook.com/pages/TechnoTrickology/135531163253082 id=iconFacebook target=_blank title=Join us at Facebook>Facebook
http://feeds.feedburner.com/blogspot/ZFqps id=iconRSS target=_blank title=Subscribe our RSS Feed>RSS
http://www.youtube.com/channel/UCdmqJ87bCAxR4kPsgrulF3A?feature=mhee id=iconYouTube target=_blank title=Follow our YouTube Channel>YouTube
https://plus.google.com/u/0/103848333741261169063id=iconGooglePlus rel="author" target=_blank title=Follow us at Google+>Google

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