Social Sharing Buttons with Hover Effect for Blogger

Now a days, social networks are good source of traffic. You can get much traffic by sharing your contents to social sites. There are many widgets that share contents to social sites.
I am sharing a beautiful widget of social sharing buttons. It includes major social sites.
Specialty of this widget is it has hover effect. Icons are by default Fade in color. But when you will hover on the icon, it will change to its original form.

Add to Blogger:

Here are the simple steps to install it to blogger;
Login to Blogger
Goto Design
Edit HTML
Expand Template Widgets

Now Find ]]</b:skin> and the paste the following code above/before it;

#socialbutton ul {
list-style: none;
clear: none;
padding: 0px 0px ; margin: 5px 0;
}
#socialbutton ul li {
display: inline;
background:none;
margin:0;
padding:0;
}
#socialbutton ul li a {
display: block;
float: left;
width: 32px;
height:32px;
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioeX9H19d-ByPIWNdNqKJYCyseu7huUGnqAp75K384HKYZUHC8Gpr_O04Y0RYc015GAgB4i0lrlzgTQXxcnBmwLuuxYlY3r7p7fOgoaP2_HcXCr7_GNAR8lXD2lrMYTwgJ3uGmg-0yR5mu/s1600/sharebutton.png') ;
margin-left:3px;
background-repeat: no-repeat;
margin-right: 2px;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
transition: all 0.3s ease;
}
#socialbutton ul li a.twitter {
background-position: -0px -0px;
}
#socialbutton ul li a.twitter:hover {
background-position: -0px -33px; 
}
#socialbutton ul li a.facebook {
background-position: -32px -0px; 
}
#socialbutton ul li a.facebook:hover {
background-position: -32px -33px;
}
#socialbutton ul li a.stumbleupon  {
background-position: -64px -0px; 
}
#socialbutton ul li a.stumbleupon:hover{
background-position: -64px -33px;
}
#socialbutton ul li a.digg    {
background-position: -192px -0px;
}
#socialbutton ul li a.digg:hover {
background-position: -192px -33px;
}
#socialbutton ul li a.reddit {
background-position: -160px -0px;
}
#socialbutton ul li a.reddit:hover {
background-position: -160px -33px;
}
#socialbutton ul li a.google {
background-position: -128px -0px;
}
#socialbutton ul li a.google:hover {
background-position: -128px -33px;
}
#socialbutton ul li a.del-icio-us {
background-position: -480px -0px;
}
#socialbutton ul li a.del-icio-us:hover {
background-position: -480px -33px;
}
#socialbutton ul li a.mixx {
background-position: -96px -0px; 
}
#socialbutton ul li a.mixx:hover {
background-position: -96px -33px;
}
#socialbutton ul li a.technorati {
background-position: -416px -0px;
}
#socialbutton ul li a.technorati:hover {
background-position: -416px -33px;
}
#socialbutton ul li a.linkin {
background-position: -256px -0px;
}
#socialbutton ul li a.linkin:hover {
background-position: -256px -33px;
}
#socialbutton ul li a.yahoobuzz {
background-position: -448px -0px;
}
#socialbutton ul li a.yahoobuzz:hover {
background-position: -448px -33px;
}
#socialbutton ul li a.myspace {
background-position: -512px -0px;
}
#socialbutton ul li a.myspace:hover {
background-position: -512px -33px;
}
#socialbutton ul li a.more {
background-position: -576px -0px;
}
#socialbutton ul li a.more:hover {
background-position: -576px -33px;
}

Now Find <data:post.body/> tag and Paste the Following Code right after/below this tag;

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='socialbutton'>
<ul>
<li><a class='twitter' expr:href='&quot;http://twitter.com/?status=&quot; + data:post.title + &quot; - &quot; + data:post.url ' rel='nofollow' target='_blank' title='Share this post on twitter'/></li>
<li><a class='facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Share this post on Facebook'/></li>
<li><a class='stumbleupon' expr:href='&quot; http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Share this post on Stunbleupon'/></li>
<li><a class='digg' expr:href='&quot;http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Share this post on Digg'/></li>
<li><a class='reddit' expr:href='&quot; http://www.reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Share this post on Reddit'/></li>
<li><a class='google' expr:href='&quot;http://www.google.com/bookmarks/mark?op=add&amp;bkmk=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Bookmark this post on Google'/></li>
<li><a class='del-icio-us' expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Share this post on delicious'/></li>
<li><a class='mixx' expr:href='&quot;http://www.mixx.com/submit?page_url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' target='_blank' title='Share this post on Mixx'/></li>
<li><a class='technorati' expr:href='&quot; http://technorati.com/faves?add=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Fav on Technorati'/></li>
<li><a class='yahoobuzz' expr:href='&quot;http://buzz.yahoo.com/submit/?url=&quot;+ data:post.url' rel='nofollow' target='_blank' title='Share this post on Yahoo!Buzz'/></li>
<li><a class='myspace' expr:href='&quot;http://www.myspace.com/Modules/PostTo/Pages/?u=&quot;+ data:post.url + &quot;&amp;t=&quot; + data:post.title' rel='nofollow' target='_blank' title='Sahre this post on Myspace'/></li>
<li><a class='a2a_dd more' expr:href='&quot;http://www.addtoany.com/share_save?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title '/><script src='http://static.addtoany.com/menu/page.js' type='text/javascript'/></li>
</ul>
</div>
</b:if>

Change the RED Text in the code to Position the Icons according to your template.
Is there <data:post.body/> tag more then once in your template? Its because you are using auto read more Hack in your template. You do not need to worry.
Here is the Solution….

Solution:

Find one of these tags in HTML and Paste the code below/after these tags;

<div class='post-footer'>

Or

<div class='post-footer-line post-footer-line-1'>

Or

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>

Save Changes and Refresh your blog for changes to take effect.

---

Categories: Blogger, Blogger Tips, How To, Widgets