Floating Social Bookmarking Widget For Blogger

Its been a while many got impressed with Mashable’s floating social bookmarking widget and many tried and came up with a wordpress plugin. But actually people forgot about creating a floating social bookmarking plugin for blogger. So here in this post, I am going to teach how to add floating social widget to your blogger/blogspot blogs.

Live Demo

Step 1: Navigate to Edit HTML from Blogger dashboard and check Edit Widget Template. Search for ]]></b:skin> and replace it with the below code

#sharebox {
background-color:#FFFFFF;
border-color:#C1CDCD;
border-style:solid;
border-width:1px;
left:103px;
bottom:40px;
margin-top:10px;
position:fixed;
width:64px;
}
#sharebox .float {margin:7px}
.FBConnectButton_Text
{
font-size: 8px;
padding:2px 4px 3px !important;
}
]]></b:skin>

Step 2: This step involves inserting the widget functions into your template. Therefore, place the below code before <div class='post-header-line-1'/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='sharebox'>
<div class='float'><script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'/></div>
<div class='float'><a href='http://www.facebook.com/sharer.php' name='fb_share' type='box_count'>Share</a><script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/><div class='clear'/></div>
<div class='float'><a class='google-buzz-button' data-button-style='normal-count' href='http://www.google.com/buzz/post' title='Post on Google Buzz'/>
<script src='http://www.google.com/buzz/api/button.js' type='text/javascript'/></div>
<div class='float'><script src='http://www.stumbleupon.com/hostedbadge.php?s=5'/></div>
</div>
<a href='http://blogger-tips-tricks-users.blogspot.com/2011/05/floating-social-bookmarking-widget-for.html'><font size='0.3'>Blogger Expert</font></a>
</b:if>

Thats it and remember, the floating widget is visible only for blog post, so this widget won’t be visible on your blog homepage. If you need any customization on this widget, drop in your comments and you can also leave your questions at Blogger Template Tips Tricks SEO Blog