How To Add Floating Social Media Sharing Buttons

The Floating social bookmarking widget is one of popular widget. This is one of the easy way to increase the number of times your post get shared on Facebook, Twitter, Google Plus, StumbleUpon etc.
The floating social sharing widget has the following options like StumbleUpon, twitter, Digg this, Facebook, Google plus and each display live counter. You can also display more social bookmarking icons if you want.

How To Add Floating Social Media Sharing Buttons

1. Login to blogger.com
2. Go to Dashboard.
3. Click on "Layout Section"
4. Click on "Add a Gadget"

5. Scroll down and select HTML/JavaScript option.

6. Copy the below code

  <style type="text/css">
#social-buttons {
position:fixed;
bottom:14%; 
margin-left:-722px;
float:left;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
background-color:#fff;
padding:0 0 2px 0;
z-index:10;
}
#social-buttons .button-share {
float:left;
clear:both;
margin:5px 5px 0 2px;
}
</style>
<div id='social-buttons' title="Get this from http://www.makesomesense.com/">
<div class='button-share' id='like' style='margin-left:7px;'>
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-send="false" data-layout="box_count" data-width="40" data-show-faces="false"></div>
</div>
<br /><div class='sbutton' style="margin-left: 2px;" ><a class='twitter-share-button' data-count='vertical' data-via='mk2senseweb' expr:data-counturl='data:blog.url' href='http://twitter.com/share' rel='nofollow'>Tweet</a><script src='http://platform.twitter.com/widgets.js'; type='text/javascript'></script>
<br />
<div class='button-share' style="margin-left: 3px;" id='su'>
<script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script>
</div>
<div class='button-share' 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='button-share' style='margin-left:3px;' id='gplusone'>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<g:plusone size="tall"></g:plusone>
</div>
<div style="clear: both;font-size: 9px;text-align:center;">Get <a style="color: #3399BB;" href="http://www.makesomesense.com/">widget</a></div></div></div> 

7. Save it.

Note: How to Customize It

Horizontal alignment Change the -722px value from left-margin.Positive value pushes the button to the right side and Negative on left side. The value is based on your needs whether you want to increase or decrease.

Vertical alignment Change the 14% value of bottom. The code only positions social relative to the bottom of your browser Window.You can fix the distance even when window is resized, specify the value in px instead of %.

Twitter: Replace mk2senseweb with your Twitter username.
You can remove or replace buttons. You can do that by replacing existing buttons with your own. Each button is represented by this code:

Enjoy Sharing!