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-->
#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;}
<div id='pageshare' title="Share This With Your Friends">
<div class='sbutton' id='rt'>
<a href="" class="twitter-share-button" data-count="vertical" data-via='naijainformation' >Tweet</a>
<script src='' type="text/javascript"></script>
<div class='sbutton' id='gb'>
<script src=""></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 class='sbutton' id='at'>
<a class="addthis_counter"></a>
<script type="text/javascript" src="//"></script>
<div style="clear: both;font-size: 9px;text-align:center;"><a href="">Get</a> <a href="">this</a></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

We love to hear from you!

Custom Search