As beginners we want to make our blog beautiful and easy for our readers to read. For me it wasn't as easy as it is now because i didn't have the opportunity to have access to this kind of tutorials until now, so i decided to share it with you guys. Now you have created your blog and have loads of things to write or probably already written . You have to share it so people will read it, This tutorial is to help you do that....


As you are looking at this blog you would have seen a vertical floating share bar widget where Facebook like, Tweet, Google+ buttons are present on the left side but you can also add it on the right side. Adding this floating sharing bar to your blog makes it easy for your blog visitors to Like, Re tweet, +1 and share your posts, which will help in increasing your blog traffic/page views.

And there is something i found out, displaying too many social media counters affects the speed at which your blog loads so i added a share button which will enable your visitors to share with over 300+ social sharing options all in one place.

Below is a screenshot:

  This is how to add it to your Blogger/blogspot blog?

Adding it to  Blogger blog is very easy. You just have to copy this code,and drop it into a HTML/JavaScript gadget.

STEPS TO DO IT

1. Log in to your Blogger account.
2. Go to Layout
3. Click "Add A Gadget"
4. In Add A Gadget window, select HTML/Javascript
5. Copy the code highlighted in red and yellow below and paste it inside the HTML/Javascript box

<!-- floating page sharers Start Share This With Friends-->
<style>
#pageshare {position:fixed; bottom:15%; right:10px; 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;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 id='pageshare' title="Share This With Your Friends">
<div class='sbutton' id='rt'>
<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a>
<script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script>
</div>
<div class='sbutton' id='gb'>
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<div class="fb-share-button" data-type="box_count"></div></div>
<div class='sbutton' id='gplusone'>
<g:plusone size="tall"></g:plusone>
</div>
<div class='sbutton' id='at'>
<a class="addthis_counter"></a>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js"></script>
</div>
<div style="clear: both;font-size: 9px;text-align:center;"> <a href="http://naijabloggingbasics.blogspot.com/2015/06/how-to-add-floating-sharing-bar-for.html" rel="nofollow">Get this</a></div>
</div>
<!-- floating page sharers End -->

Save the gadget and click "Save arrangement" button on the upper right corner and that's it. I told you it will be simple. You are welcome