How to Add a Floating Share Button to Blog

Sometimes, you want to make your blog or website fancy such as having a floating share button. A floating share button may increase the share of your article, however, it can annoy your visitors. It is up to you to decide whether you want to use it. Here is the steps to have a floating share button on your blogger. For normal site, you can also use this code. You can see the sample of this floating share button here.

1. Login to your account --> Design --> Page Elements
2. Add a Gadget --> HTML/JavaScript
3. Copy and paste the following code to your new HTML/JavaScript Gadget. [Select]

<style>

    #floatingsharebutton {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;right:0;}

    #floatingsharebutton .ShareButton {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>

  <div id="floatingsharebutton">

  <div class="ShareButton">

  <a href="http://www.facebook.com/sharer.php" name="fb_share" type="box_count">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript">

  </script>

  </div>

  <div class="ShareButton">

  <script src="http://tweetmeme.com/i/scripts/button.js" type="text/javascript">

  </script>

  </div>

  <div class="ShareButton">

  <script src="http://www.stumbleupon.com/hostedbadge.php?s=5">

  </script>

  </div>

  <div class="ShareButton">

  <script src="http://widgets.digg.com/buttons.js" type="text/javascript">

  </script>

  <a class="DiggThiShareButton DiggMedium" href=""></a>

  </div>

  <div class="ShareButton">

  <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>

  </div>

4. Save and done.