Saturday, October 25, 2014

Explore » home» » » » » » » » » » 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}



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 

No comments:

Post a Comment