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

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

Check Also

Huawei Honor 6A

Huawei Honor 6A, Price and Full Phone Specifications

The Huawei Honor 6A mobile phone, has  been announced Huawei  just few hours, and will …

Leave a Reply

Your email address will not be published. Required fields are marked *

error: Content is protected !!