How To Add A Floating Social Sharing Button To Blogger

Have you seen the floating share button in Mashable? It’s cool, isn’t it? A blogger should have a social sharing option in his blog. I have tried several ways but none of the suits in my eyes. So I give a search for it. If you are a wordpress user, then you only need to install a simple plug-in in your blog. But what about blogger user? Yeah, there’s no such widget available for blogger. But there’s always some great designers who are working on this sort of things. And that's it! You can easily add a social sharing button list which will float. I am keeping this on my blog and till now it look fine. It uses CSS and some Java Script for sharing counter. No additional Java Script is needed and no JQuery trigger too. So let’s learn how.

Adding Share Floater

1st Login to your Blogger account.
Then Go to Design > Page Elements (Layout in New Blogger Dashborad).
Click On “Add A Gadget”.
Now Select HTML/Javascript.

Copy the code below and paste it inside the content box.

<!-- floating page sharers Start -->
<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>

<!-- floating page sharers End -->

Now Save the gadget.
Drag the gadget and reposition it under Blog Posts gadget.
Click Save button on upper right corner.

That’s it. This includes Facebook Share Button With Counter, Google+ Button With Counter, Tweeter Tweet Button With Counter, Stumbleupon Button With Counter, Digg Button With Counter and Google Buzz Button With Counter.

Customizing

• 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 %.
• 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 the margin-left with left (as in left:10px;) or right (as in right:10px;) respectively.
• Replacing and removing buttons
  You can replace existing buttons with your own. Each button is represented by this code:

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

[Note: All Credits To Greenlava @ Blogger Sentral]