Mashable Like 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.

Floating Social Bookmarking Widget for Blogger

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://www.bloggermint.com/2010/06/mashable-like-floating-social-bookmarking-widget-for-blogger/'><font size='0.3'>Bloggermint</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 Bloggermint Answers

June 6, 2010. This entry was posted in Blogger, Tutorials and tagged . Bookmark the permalink.

We Recommend HostGator Hosting

Bloggermint strongly recommends Hostgator Hosting for all of your web hosting needs. Sign up today for WordPress Hosting at just $4.95/month.

Use coupon code "bloggermint" to get 25% discount on any hosting packages. Get an account with Hostgator now!