How to add a floating share bar with facebook, twitter, stumbleupon etc. buttons to your blog


This is another sharing plugin to your blog. Many big names are using this type of sharing bar in their website. People always like to share things which attracts them and they think that this might be useful to my friends too. The bar floats with your page contents. The bar contains facebook like, Google plus, twitter tweet buttons and stumble upon, digg share buttons. It looks great and easily attracts your visitors to share the content they like. I recommend you try this widget with your blog and you should see a bit increase of traffic to your blog with the sharing facility. Here is a step by step guide to activate the share bar on your blogger blog.
1. Log in to your Blogger Dashboard.
2. Go to Layout and add a HTML/Javascript Widget.
3. Copy the following code and paste it into the widget. 

<!-- floating share bar from www.learnatleisure.blogspot.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 BloggerSentral.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.learnatleisure.blogspot.com/">This</a></div><!-- Do not remove this link -->
</div>
<!-- floating share bar by www.learnatleisure.blogspot.com End -->
4. Click Save. You are done. The next time you visit your blog, you will see the share bar in the right side of your blog.
You can add more sharing options using Addthis sharing bar. This will enable you to provide your visitors with more than 200 social sharing and bookmarking websites. The bar will look like the above mentioned, but it will contain more options. You need to replace the code in step 3 with the following:
<!-- AddThis Button brought to you by www.learnatleisure.blogspot.com BEGIN -->
<div class="addthis_toolbox addthis_floating_style addthis_counter_style" style="left:50px;top:50px;">
<a class="addthis_button_facebook_like" fb:like:layout="box_count"></a>
<a class="addthis_button_tweet" tw:count="vertical"></a>
<a class="addthis_button_google_plusone" g:plusone:size="tall"></a>
<a class="addthis_counter"></a>
</div>
<script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-51356f4c646f3551"></script>
<!-- AddThis Button brought to you by www.learnatleisure.blogspot.com END --> 
To add more customized sharing gadgets, go to https://www.addthis.com/get/sharing and choose the one you like most. Enjoy blogging.