How Do I add the Floating Share bar to my Blogger/blogspot blog - NAIJA INFORMATION

April 25, 2013

How Do I add the Floating Share bar to my Blogger/blogspot blog

We all know that Adding the Vertical Floating Bar to a Blogger blog increase the visibility of your blog through different social media networks putting the vertical floating bar to your blog is like counting numbers. You just have to copy a snippet of code,and drop it into a HTML/JavaScript gadget.

STEP by step guide to implement the vertical floating bar to your blog

  • Log in to your Blogger account.
  • Go to Layout
  • Click "Add A Gadget"
  • In Add A Gadget window, select HTML/Javascript
  • Copy the code highlighted 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" data-via='naijainformation' >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>
<fb:like layout="box_count" show_faces="false" font=""></fb:like></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://www.naijainformation.com">Get</a> <a href="http://www.naijainformation.com/2013/04/floating-sharing-bar-for-blogger-blogs.html">this</a></div>
</div>
<!-- floating page sharers End -->


  • Click "Save arrangement" button on the upper right corner of your blog.
Feel free to share this post







No comments:

Post a Comment


Disclaimer: Opinions expressed in comments are those of the comment writers alone and does not reflect or represent the views of NaijaInformation.com