How to add floating social media bar to Blogger ?

Here’s a tutorial on how to add a floating social media bar to a blog. I made it into a widget, so you don’t have to go into your template HTML to install (or remove) them. Just drop the whole code into a HTML/Javascript gadget.

I have included Facebook Like,  StumbleUpon, Digg This and Google+1 buttons in the bar and each of them comes with a live counter. You can add more social bookmarking or sharing buttons later if you wish.

I. Adding the buttons to Blogger

• 1. Go to Layout (old interface: Design > Page Elements).
  2. Click Add A Gadget.
  3. In Add A Gadget window, select HTML/Javascript .
  4. Copy the code below and paste it inside the content box.
  5. Save the gadget.
  6. Drag the gadget and reposition it under Blog Posts gadget.
  7. Click Save button (top right hand corner).

       

         <!-- floating share bar Start bloggersentral.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 Tekhoblog.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://www.tekhoblog.blogspot.com/">widget</a></div><!-- Do not remove
this link -->
</div>

<!-- floating share bar End -->