This beautiful Floating Share Buttons included Facebook, Stumble, Retweet, Google Buzz, Digg and Google+ One with Live Counter. This Floating Share buttons code will work on all modern Browsers except IE. So, Lets follow below easy steps to add this widget.

Here is My working Floating Buttons :

How To Add Beautiful Floating Share Buttons With Counter To Blogger?

1. Login into your Blogger Dashboard --> Navigate to Design Tab --> Then Click On Page Elements tab.

2. Then Click on --> Add a Gadget then Select --> HTML/JavaScript Widget.

3. Just Copy below code and Paste inside the widget.

4. Save the widget and drag widget into the blog posts widget section.

5. Then click on Save button at top right corner.

<!-- Floating Share Buttons Start RaviSaive.in-->
<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;/*bs-fsmsb*/-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 BloggerSentral.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 class='sbutton' id='gplusone'>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<g:plusone size="tall"></g:plusone>
</a></div>
<div style="clear: both;font-size: 9px;text-align:center;">Get <a href="http://www.ravisaive.in/">widget</a></div>
</div>
<!-- floating page sharers End -->

Floating Button Customization

1. Vertical alignment : Change the value of bottom (bottom:15%) in above css. 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 (margin-left:-71px) in above css. Negative value pushes the button to the left of the main blog column, positive value pushes it to the right.

3. Replacing and Removing buttons : You can replace existing buttons with your own. Each button is represented by this below code:

<div class='sbutton'>
BUTTON CODE
</div>

To replace the button, simply replace the button code with the new code. To remove the button, delete the whole div.

If you have any query feel free to leave a comment below will reply you soon:)