Add Floating Sharing Buttons to Blogger

Here is an Awesome Widget I am going to Share. The Widget Will Float Vertically Next to your Individual Blog Posts. This Widget will Help your Visitors to Share Your Content Easily on Facebook, Twitter and other Social Media Networks. Last But not the Least Great Thing about This Widget is That it Counts the Number of times Your Post is Shared on Social Networking Sites.

HOW TO ADD FLOATING SHARING BUTTONS?

• Login to your Blogger Dashboard, Select your Blog and Than Go to Layout.
• Click on Add a Gadget and Select Html/JavaScript.
• Copy the Code Given Below Inside the Box.

<style type="text/css">

#social-buttons {

position:fixed;

bottom:15%; 

margin-left:-721px;

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 AakashPuri.blogspot.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='AkashPuri9' 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://AakashPuri.blogspot.com/">widget</a></div></div></div>

CUSTOMIZATION:

• Vertical Alignment - Change the 15% Value of Bottom. The Code Positions the Social Bar Relative to the Browser Window. To Fix the Distance Even When Window is Resized, Specify the Value in px (Pixel) Instead of %.
• Horizontal Alignment - Change the -721px Value from Margin-Left. Negative Value Pushes Button to Left of the main Blog Column, Positive Value Pushes it to Right. Increase or decrease the Value based on your Needs.
• Twitter Setting - Replace AkashPuri9 with your Twitter Username.
• Replacing and Removing Buttons - You can Replace existing Buttons With your own. Each Button is Represented By the Code Given Below.

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

 Akash Puri Akash Puri Akash Puri Akash Puri Akash Puri Akash Puri Akash Puri Akash Puri Akash Puri Akash Puri Akash Puri Akash Puri Akash Puri Akash Puri Akash Puri Akash Puri Akash Puri Akash Puri Akash Puri Akash Puri Akash Puri Akash Puri