How To Add Social Bookmarking Widget With Tooltips For Blogger

socail bookmarking widget is need of every blogger that’s why you see much gadgets virtually on every blog.Friendly bookmarking widgets helps you to assist interchange on your diary.Today I am distribution an awful interpersonal bookmarking widget which comes with ravishing spirited tooltips,when any mortal hovers on the gregarious icons the tooltip comes out also it applies a quality event to these ethnic icons,this gist increment exemplar of this widget.Achievement for this widget goes to Shareaholic.Now lets see hoe to add it to your journal, see the demo picture below.

social bookmarking


How To Add This Widget To Blogger

  • Now go to Page Layout
  • Click on Add a Gadget
  • Select HTML/JavaScript
  • Leave title field blank
  • Paste below code and save it
  • Drag the widget to bottom of your page.
  • Finally save your changes
<b:if cond='data:blog.pageType == "item"'> 
<!-- Social Bookmarking Widget With Animated Tooltips By -->
<script type="text/javascript">
var SHRCB_Settings = {"shr_classic":{"size":"32","link":"","service":"5,7,313,309,78,304,88","apikey":"2fc518bd8c0bb3cf45bdade11877971c1","shortener":"bitly","shortener_key":"","designer_toolTips":true,"twitter_template":"${title} - ${short_link} via @Shareaholic"}};
var SHRCB_Globals = {"perfoption":"1"};
<!-- End Shareaholic Classic Bookmarks settings -->
<!-- Start Shareaholic Classic Bookmarks script -->
<script type="text/javascript">
(function() {
var sb = document.createElement("script"); sb.type = "text/javascript";sb.async = true;
sb.src = ("https:" == document.location.protocol ? "" : "") + "/media/js/jquery.shareaholic-publishers-cb.min.js";
var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(sb, s);
<!-- End Shareaholic Classic Bookmarks script -->
<script type='text/javascript'>
if (typeof(SHR4P)=="undefined") SHR4P = {};
SHR4P.blogger_addDiv = SHR4P.blogger_addDiv || function(divClass)
var post = new RegExp('hentry');
var titleContainer = new RegExp('post-title');
var postContainer = new RegExp('post-footer');
var elements = document.getElementsByTagName('div');
for (var i = 0; i < elements.length; i++) 
var classes = elements[i].className;
if (post.test(classes)) 
var container = elements[i];
for (var j = 0; j < container.childNodes.length; j++)
var item = container.childNodes[j].className;
if (titleContainer.test(item))
var link = container.childNodes[j].getElementsByTagName('a');
if (typeof(link[0]) != "undefined")
var url = link[0].href;
var title = link[0].innerHTML;
var url = document.url;
var title =  container.childNodes[j].innerHTML;
if (typeof(url) == "undefined"|| url == 'undefined' ){
url = window.location.href;
if (postContainer.test(item))
var footer = container.childNodes[j];
var d = document.createElement('div');
var code = '<div style="clear:both"></div><div class="' + divClass + ' shareaholic-show-on-load" data-shr_href="' + encodeURI(url) + '" data-shr_title="' + title + '"></div><div style="clear:both"></div>';
d.innerHTML = code;
container.insertBefore(d , footer);
return true;

Note- This widget will happen on stake pages only,if you need to show this widget at the nethermost of every communicating on your homepage then take best wares (<b:if cond=’data:blog.pageType == “item”‘>) and last line(</b:if> from the code.


Be sure to subscribe to the Blogger Heroe newsletter and get regular updates about awesome posts just like this one and more!

About kasper

Hey Guys I am Avinash a.k.a Kasper.I am one of the founder of this blog.I love blogging,gaming and other fitness activities.Blogging has taught me many things in my life and made me different from others.The only thing I believe is that if you ain't First your Last!


  1. Randall Willis says:

    I dead consider joyous when I acquire articles pertinent to my process and my issue.
    Hyperlinkomatic Bookmarking

Speak Your Mind