Showing posts with label buttons. Show all posts
Showing posts with label buttons. Show all posts
Saturday, October 25, 2014
How to add social share buttons with Hover effect

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
Subscribe to:
Posts (Atom)