#Blogging tips: Floating Sharing Bar for Blogger Blogs

You might have seen some blogs with a vertical floating share bar widget where Facebook like, Tweet, Google+ buttons are present on the left or right side of the
blogs. Adding this floating sharing bar to your blog will make it easy for your blog visitors to Like, re-Tweet, +1 and share your posts, which will help increasing your blog traffic through sharing 



Adding the Vertical Floating Bar to a Blogger blog is very easy. You just have to copy a snippet of code,and drop it into a HTML/JavaScript gadget.


STEPS



  • 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" >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://www.solenzoblog.com.ng/2016/09/blogging-tips-floating-sharing-bar-for.html">Get this</a></div>
</div>
<!-- floating page sharers End -->



Follow Solenzo Blog on
Follow us on Twitter!Like us on facebook!Follow us on Pintrest!Follow us on google+!

Comments

Post a Comment