Saturday, October 25, 2014
Explore »
home»
Add
»
buttons
»
effect
»
Hover
»
how
»
share
»
social
»
to
»
with
»
How to add social share buttons with Hover effect
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
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment