Social Sharing Button With Hover Effect V2

Posted by Yuga irgi on Friday, May 09, 2014 in Social Media | No comments

 

 

How to Add this Widget. [Blogger]

1. Go to Blogger -> Design -> Page Element 
2. Add a Gadget
3. Choose "HTML/JavaScript" Widget
4. paste the following code in the widget Area.

<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/AVvXsEiOJNqw_TQLc0XmY7r7PTQpU0V-j_gMObjOQEQlWr72UID63A3-dBMI7-mOyWqUaqY3v5hanvBlyO9Flj-xPROEzMfTfAe9RBt313zf0sSGPAk31VxDIi1vO2QYVOgdqRJMSHZE401HqG7r/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/probloggingtool' id='iconTwitter' target='_blank' title='Follow us on Twitter'>Twitter</a></span>
<span><a href='http://www.facebook.com/probloggingtools' id='iconFacebook' target='_blank' title='Join us at Facebook'>Facebook</a></span>
<span><a href='http://feeds.feedburner.com/probloggingtools' id='iconRSS' target='_blank' title='Subscribe our RSS Feed'>RSS</a></span>
<span><a href='youtube.com/probloggingtools' id='iconYouTube' target='_blank' title='Follow our YouTube Channel'>YouTube</a></span>
<span><a href='https://plus.google.com/111188040805340254482/posts' id='iconGooglePlus' target='_blank' title='Follow us at Google+'>Google</a></span></div>
</div>
</div>

  5. Change the Twitter, Facebook, RSS, YouTube and Google+ links with your blogs.
  6. Save the Widget and Enjoy!!!