Here’s a tutorial on the way to add a Mashable-like floating bar of social media buttons to a Blogger web log. I created it into a gizmo, thus you don’t have to be compelled to get in your guide markup language to put in (or remove) them. simply drop the complete code into a HTML/Javascript contrivance.


I have enclosed Facebook Share, Retweet, Stumble, Google Buzz, Digg This and Google +1 (plus one) buttons within the bar. every of them comes with a live counter. The corners of Facebook Share button and counter ar rounded to mix with the remainder of the buttons (doesn’t add net soul, of course). you'll add a lot of social bookmarking or sharing buttons later if you want.

I. Adding the buttons


1. Login to your Blogger account.
2. Go to Design > Page Elements.
3. Click Add A Gadget.
4. In Add A Gadget window, select HTML/Javascript .
5. Copy the code below and paste it inside the content box.


<!-- floating share bar Start softwaresstall.blospot.com-->
    <style type="text/css">
    #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;/*bs-fsmsb*/margin:5px 5px 0 5px;}
    </style>
    <div id='pageshare' title="Get this from softwaresstall.blogspot.com">
    <div class='sbutton' id='like' style='margin-left:8px;'>
    <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>
    <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='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 href="http://softwaresstall.blogspot.com/2012/12/how-to-add-floating-social-media-buttons.html">widget</a>      </div><!-- Do not remove this link -->
    </div>
    <!-- floating share bar End --


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

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

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

Enjoy!