How to add Facebook Share & Like buttons, Digg and Tweet Button to the side of blogger/blogspot blogs

ALERT: Get the updated floating share bar here. 

In this tutorial, I am sharing with you, how to add floating bar of social media buttons to a Blogger blog. This simple and very useful widget includes Facebook Share, Tweet, Digg and Facebook Like buttons. Each of them comes with a live counter.

This widget is a modified version of the widget originally created by BloggerSentral. In the modified version of the widget am sharing with you, I have introduced the facebook Like button and replaced the TweetMeme button with standard Tweet button. More so, the bar will float far to the left of your blog.

I. Adding the buttons

1. Login to your Blogger account.
2. Go to Layout.
3. Click Add A Gadget.
4. In Add A Gadget window, select HTML/Javascript .
5. Copy the code highlighted below and paste it inside the HTML/Javascript box. 

<!-- floating page sharers Start Share This With Friends-->
<style>
#pageshare {position:fixed; bottom:15%; left:10px; 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="Share This With Your Friends">
<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'>
<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a>
<script src='http://platform.twitter.com/widgets.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'>
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<fb:like layout="box_count" show_faces="false" font=""></fb:like></div>
<div style="clear: both;font-size: 9px;text-align:center;"><a href="">Get</a> <a href="">this</a></div>
</div>
<!-- floating page sharers End -->


Save the gadget and Click Save button on the upper right corner.

View Your blog and I hope it works for you.

UPDATE: If you want it to float to the right hand side of your blog, read: http://www.ogbongeblog.com/2011/05/how-to-add-floating-share-bar-to-right.html

Join the BloggersLab on facebook today for instant answers to your blogging questions, while also connecting with other Bloggers.

Feel Free to share this blog post with your friends using the share buttons below this post.

If you have anything to contribute or ask, Kindly make use of the comment form below.

Please, do not forget to SUBSCRIBE to this blog, so that you can be receiving future Blogging tricks/tips, articles, freebies DIRECTLY into your email inbox, even when you are not online.

CLICK HERE TO SUBSCRIBE NOW!

CLICK HERE TO DOWNLOAD MY 20 FREE EBOOKS

Cheers!