Mashable Like Floating Social Bookmarking Widget For Blogge ~ Easy HTML Tricks for Blogging

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

`01`	`#sharebox {`

`02`	`background-color:#FFFFFF;`

`03`	`border-color:#C1CDCD;`

`04`	`border-style:solid;`

`05`	`border-width:1px;`

`06`	`left:103px;`

`07`	`bottom:40px;`

`08`	`margin-top:10px;`

`09`	`position:fixed;`

`10`	`width:64px;`

11 }

12

`13`	`#sharebox .float {margin:7px}`

`14`	`.FBConnectButton_Text`

15 {

`16`	`font-size:` `8px;`

`17`	`padding:2px` `4px` `3px` `!important;`

18 }

`19`	`]]></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′/>

`01`	`<b:if` `cond='data:blog.pageType == "item"'>`

`02`	`<div` `id='sharebox'>`

`03`	`<div` `class='float'><scriptsrc='http://tweetmeme.com/i/scripts/button.js'type='text/javascript'/></div>`

`04`	`<div` `class='float'><a` `href='http://www.facebook.com/sharer.php'name='fb_share'` `type='box_count'>Share</a><scriptsrc='http://static.ak.fbcdn.net/connect.php/js/FB.Share'type='text/javascript'/><div` `class='clear'/></div>`

`05`	`<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'/>`

`06`	`<script` `src='http://www.google.com/buzz/api/button.js'type='text/javascript'/></div>`

`07`	`<div` `class='float'><scriptsrc='http://www.stumbleupon.com/hostedbadge.php?s=5'/></div>`

08 </div>

`09`	`<a` `href='http://www.bloggermint.com/2010/06/mashable-like-floating-social-bookmarking-widget-for-blogger/'><fontsize='0.3'>Bloggermint</font></a>`

10 </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