Friday 7 June 2013

// // Leave a Comment

Add Social Sharing Button With Hover Effect V2

Add Social Sharing Button With Hover Effect V2

Hey Guys, Checkout this cool social sharing button with hover effect  for blogger.



If you want to add this widget to your blog just follow this simple steps.



1.Go to Blogger > Layout
2.Click on 'Add a Gadget'
3.Choose HTML/Javascript
4.Copy Paste the code given below inside it.



<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/AVvXsEhbkABdM7Yrd54bi3tZXtGLYegqQcv67ARvKCDGRVApVrRxmo_rzc6GFStVdGQOV1pkfDz1vEcRH6x3SQ6d5ccXXtwnHKAe8XYb377fL80hmS_sab-lZsHggx8qLJ3mse2ZcfGeAwP_NNW_/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='twitter.com/vishalassassin' id='iconTwitter' target='_blank' title='Follow us on Twitter'>Twitter</a></span>
<span><a href='http://www.facebook.com/zgamerxs' id='iconFacebook' target='_blank' title='Join us at Facebook'>Facebook</a></span>
<span><a href='http://feeds.feedburner.com/zgamerx' id='iconRSS' target='_blank' title='Subscribe our RSS Feed'>RSS</a></span>
<span><a href='youtube.com/vishalassassin' id='iconYouTube' target='_blank' title='Follow our YouTube Channel'>YouTube</a></span>
<span><a href='https://plus.google.com/u/0/108432524418882740014/' id='iconGooglePlus' target='_blank' title='Follow us at Google+'>Google</a></span></div>
</div>
</div>



Customizations

Replace vishalassassin with your twitter username.
Replace zgamerxs with your facebook username.
Replace zgamerx with your feedburner username.
Replace vishalassassin with your youtube username.
Replace 108432524418882740014 with your google plus id.  

0 Peoples tell for us:

Post a Comment

Your feedback is always appreciated. We will try to reply to your queries as soon as time allows.
Note:
1. Make sure to click the "Subscribe By Email" link below the comment to be notified of follow up comments and replies.
2. Please "Do Not Spam" - Spam comments will be deleted immediately upon our review.
3. Please "Do Not Add Links" to the body of your comment as they will not be published.
4. Only "English" comments shall be approved.
5. If you have a problem check first the comments, maybe you will find the solution there.