Tooltip social sharing button for your blogsopt blog

tooltip social sharing button is fully different from the other. Its icon is so light and unique. For tooltip effect when you put your mouse cursor point on the icon it will show full name of the social site’s name with color plate. I include major sharing site in this widget. I hope you and your visitor also like this widget.

Sharing button has an important role to be successes in blogging world. (technorati claim code is "SMRZ8VKTER3F") Visitor like new item. If you want to increase visitor at your blog social networking site can help you to increase page view and visitor. I posted so many sharing buttons tutorials in my blog post. You can see all of them here. But tooltip social sharing button is fully different from the other. Its icon is so light and unique. For tooltip effect when you put your mouse cursor point on the icon it will show full name of the social site’s name with color plate. I include major sharing site in this widget. I hope you and your  visitor also like this widget.

The installing process of the widget is so easy .

1^st Step: Login your blogspot blog and go to dashboard.

2^nd Step: Go to Templates and the HTML code.

3^rd Step: Find “post-footer-line” you can use CTRL+F keys to find.

4^th Step: Copy and Paste the bellow code just below this code “post-footer-line”

<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/AVvXsEiNgHHgK5qo4kU1V9WqzTx3ypLwhsAIwqAayVtvjkkXMTHneiKtbKfe8UHEXBqBJyVHfgdOucNj7ab9Kk46VgzRe-ZhlHHCgkgi_eT0cbrMX_4JQWdCsQ4UDgw5ZQELhnKF0NmuWFerbEo/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 == "item"'> <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='"http://www.facebook.com/share.php?v=4&src=bm&u=" + data:post.url + "&t=" + data:post.title' onclick='window.open(this.href,"sharer","toolbar=0,status=0,width=626,height=436"); return false;' rel='nofollow' title='Share this on Facebook'><b>Facebook</b></a> </li> <li class='twitter'> <a expr:href='"http://twitter.com/home?status=" + data:post.title + " -- " + data:post.url' rel='nofollow' title='Tweet This!'><b>Twitter</b></a> </li> <li class='google'> <a expr:href='"https://plus.google.com/share?url=" + data:post.url' onclick='javascript:window.open(this.href, "", "menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600");return false;' rel='nofollow' title='Share this on Google+'><b>Google+</b></a> </li> <li class='stumbleupon'> <a expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' title='Stumble upon something good? Share it on StumbleUpon'><b>StumbleUpon</b></a> </li> <li class='digg'> <a expr:href='"http://digg.com/submit?phase=2&url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' title='Digg this!'><b>Digg</b></a> </li> <li class='delicious'> <a expr:href='"http://delicious.com/post?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' title='Share this on del.icio.us'><b>Delicious</b></a> </li> <li class='linkedin'> <a expr:href='"http://www.linkedin.com/shareArticle?mini=true&url=" + data:post.url + "&title=" + data:post.title + "&summary=&source="' rel='nofollow' title='Share this on LinkedIn'><b>LinkedIn</b></a> </li> <li class='reddit'> <a expr:href='"http://reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' title='Share this on Reddit'><b>Reddit</b></a> </li> <li class='technorati'> <a expr:href='"http://technorati.com/faves?add=" + data:post.url' rel='nofollow' title='Share this on Technorati'><b>Technorati</b></a> </li> </ul> </div> </b:if>

5^th Step: Just one step is remaining, hit on the save button and save the template to use this sharing button.