Adding floating social media sharing buttons to Blogger

As promised to some of my readers, here’s a tutorial on how to add a Mashable-like floating bar of social media buttons to a Blogger blog. I made it into a widget, so you don’t have to go into your template HTML to install (or remove) them. Just drop the whole code into a HTML/Javascript gadget.
I have included Facebook Share, Retweet, Stumble, Google Buzz and Digg This buttons in the bar. Each of them comes with a live counter. The corners of Facebook Share button and counter are rounded to blend with the rest of the buttons (doesn’t work in Internet Explorer, of course). You can add more social bookmarking or sharing buttons later if you wish.

I. Adding the buttons

1. Login to your Blogger account.
2. Go to Design > Edit HTML.
3. Check Expand Widget Templates
4. Search <data:post.body/>
5. Copy the code below and paste it before <data:post.body/>. 

<!-- floating page sharer Start chipboys.blogspot.com-->
<style>
#pageshare {position:fixed; bottom:15%; margin-left:-71px; float:left; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#fff;padding:0 0 2px 0;z-index:10;}
#pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}
.fb_share_count_top {width:48px !important;}
.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}
</style>
<div id='pageshare' title="Get this from chipboys.blogspot.com">
<div class='sbutton' id='fb'>
<a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
</div>
<div class='sbutton' id='rt'>
<script src="http://tweetmeme.com/i/scripts/button.js" type='text/javascript'></script>
</div>
<div class='sbutton' id='su'>
<script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script>
</div>
<div class='sbutton' id='digg' style='margin-left:3px;width:48px'>
<script src='http://widgets.digg.com/buttons.js' type='text/javascript'></script>
<a class="DiggThisButton DiggMedium"></a>
</div>
<div class='sbutton' id='gb'>
<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'></script>
</a></div>
<div style="clear: both;font-size: 9px;text-align:center;"><a href="http://chipboys.blogspot.com/2011/03/adding-floating-social-media-sharing.html">Get this</a></div>
</div>
<!-- floating page sharer End -->

6. Click "Save Template"
7. Done

II. Customizing

1. Vertical alignment
   Change the value of bottom in code line 2. The code positions the button relative to the bottom of your browser window. To fix the distance even when window is resized, specify the value in px (pixels) instead of %.
2. Horizontal alignment
   Change the value of margin-left in code line 2. Negative value pushes the button to the left of the main blog column, positive value pushes it to the right.
   To position the button relative to the left or right edge of browser window, replace themargin-left with left (as in left:10px;) or right (as in right:10px;) respectively.
3. Adding more buttons
   You can add any social bookmarking or sharing button to the bar. Just put each button code inside a div, like this: 

1	<div class='sbutton'>

2	PUT BUTTON CODE HERE

3

<div>

and insert it right after line 27.