Sharing Buttons With Tool tip For Blogger

This are the simple but effective sharing buttons for blogger with tooltip. This buttons include all the major social sites to share.Sharing is Spreading.Making your blog public will increase your traffic.Also readers who like your post want to share it with there friends can do this by sharing buttons.

Demo:

Click here.

Steps to add this Buttons:

• Log in to your Blogger Account.
• Go to Templates >> Edit Html.
• Find for "post-footer-line".
• Paste the below code just below it.

<style>
.share-sbm-social span{font-weight:normal;margin:0;font-family:'Yanone Kaffeesatz','Helvetica Neue',Helvetica,Arial,sans-serif}
ul#social-share-sbm,ul#social-share-sbm li{list-style:none;padding:0;margin:0}
ul#social-share-sbm li{float:left;position:relative}
#social-share-sbm a{width:19px;height:20px;display:block;margin:0 3px;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjX3RxjSaYG1zSkaMh7777hgNl9jABjrTFrcy0ktuOsOUbKHzuVpbdTRBvRCuN23L-pz8Jcw4AgB5zNVQf_DQzFjuTSxbtA9gsmBLtEfN8WkYHEKDAJQP_QNSo7CSuwK3yRp8l6vf9QRU/h20/sprite+images.png);background-position:0 0;background-repeat:no-repeat}
ul#social-share-sbm li.facebook a{background-position:-19px 0}
ul#social-share-sbm li.twitter a{background-position:-116px 0}
ul#social-share-sbm li.google a{background-position:-39px 0}
ul#social-share-sbm li.stumbleupon a{background-position:-97px 0}
ul#social-share-sbm li.digg a{background-position:0 0}
ul#social-share-sbm li.delicious a{background-position:-136px 0}
ul#social-share-sbm li.linkedin a{background-position:-58px 0}
ul#social-share-sbm li.reddit a{background-position:-78px 0}
ul#social-share-sbm li.technorati a{background-position:-155px 0}
#social-share-sbm strong{display:block;width:auto;padding:4px 7px;position:absolute;background-color:#1C94B9;color:white;left:200%;bottom:40px;-webkit-transition:all 0.3s ease 0s;-o-transition:all 0.3s ease 0s;transition:all 0.3s ease 0s;-moz-transition:all 0.3s ease 0s;-khtml-opacity:0;-moz-opacity:0;opacity:0;visibility:hidden}
#social-share-sbm li:hover strong{left:20%;-khtml-opacity:1;-moz-opacity:1;opacity:1;visibility:visible}
.share-sbm-social{height:25px;margin-bottom:15px}
.share-sbm-social span{float:left;font-size:150%;padding:0}
ul#social-share-sbm{float:left}
@media only screen and (max-width:479px){
  .share-sbm-social span{font-size:140%;padding-top:1px}
  #social-share-sbm a{margin:0 1px}
}
</style>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='share-sbm-social'><span>Share This To :</span>
<ul class='social-share-sbm' id='social-share-sbm'>
<li class='facebook'>
<a expr:href='&quot;http://www.facebook.com/share.php?v=4&amp;src=bm&amp;u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' onclick='window.open(this.href,&quot;sharer&quot;,&quot;toolbar=0,status=0,width=626,height=436&quot;); return false;' rel='nofollow' title='Share this on Facebook'><strong>Facebook</strong></a>
</li>
<li class='twitter'>
<a expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.title + &quot; -- &quot; + data:post.url' rel='nofollow' title='Tweet This!'><strong>Twitter</strong></a>
</li>
<li class='google'>
<a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' onclick='javascript:window.open(this.href,   &quot;&quot;, &quot;menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600&quot;);return false;' rel='nofollow' title='Share this on Google+'><strong>Google+</strong></a>
</li>
<li class='stumbleupon'>
<a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Stumble upon something good? Share it on StumbleUpon'><strong>StumbleUpon</strong></a>
</li>
<li class='digg'>
<a expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Digg this!'><strong>Digg</strong></a>
</li>
<li class='delicious'>
<a expr:href='&quot;http://delicious.com/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Share this on del.icio.us'><strong>Delicious</strong></a>
</li>
<li class='linkedin'>
<a expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;summary=&amp;source=&quot;' rel='nofollow' title='Share this on LinkedIn'><strong>LinkedIn</strong></a>
</li>
<li class='reddit'>
<a expr:href='&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Share this on Reddit'><strong>Reddit</strong></a>
</li>
<li class='technorati'>
<a expr:href='&quot;http://technorati.com/faves?add=&quot; + data:post.url' rel='nofollow' title='Share this on Technorati'><strong>Technorati</strong></a>
</li>
</ul>
</div>
</b:if>

• Now, click on Save the Template.

It's done.