Social bookmarking widget is need of every blogger thats why you see such gadgets almost on every blog.Social bookmarking widgets helps you to boost traffic on your blog.Today I am sharing an amazing social bookmarking widget which comes with beautiful animated tooltips,when any user hovers on the social icons the tooltip comes out also it applies a opacity effect to these social icons,this effect increase beauty of this widget.Credit for this widget goes to Shareaholic.Now lets see hoe to add it to your blog,also see the demo at the bottom of this post.
I have created a blogger widget generator form for this widget.Follow below simple steps to add this widget to your blog.
<b:if cond='data:blog.pageType == "item"'>
<!-- Social Bookmarking Widget -->
<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"};
</script>
<!-- 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 ? "https://dtym7iokkjlif.cloudfront.net" : "http://cdn.shareaholic.com") + "/media/js/jquery.shareaholic-publishers-cb.min.js";
var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(sb, s);
})();
</script>
<!-- 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;
}
else
{
var url = document.url;
var title = container.childNodes[j].innerHTML;
}
if (typeof(url) == "undefined"|| url == 'undefined' ){
url = window.location.href;
}
title=title.replace('"',"%22");
}
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;
};
SHR4P.blogger_addDiv("shr_classic");</script>
</b:if>
- This widget will appear on post pages only,if you want to show this widget at the bottom of every post on your homepage then remove first line
