» » » ADD FLOATING SHARE BAR GADGET TO BLOG

ADD FLOATING SHARE BAR GADGET TO BLOG

,
I hope you might have seen many blogs or websites with a floating social networks share bar in which Facebook, Twitter , Priest , Stumbleupon and many other social network share button is present,which helps your blog visitors  to share your posts easily and through which you will get traffic. It also helps your blog visitors to get engaged with your blog.

Screen Shot:


Putting too many social media buttons, I just inserted "Add This" share button that help your visitors to share this post at 300+ websites.
Below are step by step procedure to add this vertical floating share bar gadget to your blog and it is very easy.
  • Log in to your blogger account. Select the blog in which you want to add this gadget.
  • Go to Layout from left side menu list.
  • Click on "Add a gadget" button.
  • Pop-up window will appear, select HTML/JavaScript.
  • Copy the below highlighted code and paste into HTML/JavaScript content or description box and click on save.
<!-- floating page sharers Start Share This With Friends-->

<style>

#pageshare {position:fixed; bottom:15%; right:10px; float:right; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#fff;padding:0 0 2px 0;z-index:10;}

#pageshare .sbutton {floatright;clear:both;margin:5px 5px 0 5px;}

.fb_share_count_top {width:50px !important;}

.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}

.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:51px !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='TheInfoTips' >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.theinfotips.blogspot.com">Get</a> <a href="http://www.theinfotips.com/2013/08/add-floating-share-bar-gadget-to-blog.html">this</a></div>

</div>

<!-- floating page sharers End -->



  • Click "Save arrangement" button from the upper right corner.

You can change the position of floating bar widget from left to right by replacing the above pink highlighted text with "Right" .
WRITER: SAADI GROUPZ

Related Posts