How to Add Vertical Floating Sharing Button in Blogspot Blog

You must have seen some website and 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, reTweet, +1 and share your posts, which will help in increasing your blog traffic.

Though I've explained how to add the sharing bar when I published how to add Facebook Share & Like buttons, Digg and Tweet Button to the side of blogger/blogspot blogs, I've recoded a better one which I decided to share with you. I have replaced "Facebook Like button" with the new Facebook Share button and removed Digg and SU buttons.

More so, since displaying too many social media counters could affect the speed at which your blog loads, I've added a AddThis share button which provide your visitors with over 300+ social sharing options all in one place.

STEPS IN ADDING VERTICAL FLOATING SHARE WIDGET

• Log in to your Blogger account.
• Go to Layout
• Click "Add A Gadget"
• In Add A Gadget window, select HTML/Java script

Copy the code highlighted below and paste it inside the HTML/Java script 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://zumiinfo.blogspot.com/2015/03/how-to-add-vertical-floating-sharing.html" rel="nofollow">Get this</a></div>
</div>
<!-- floating page sharers End -->

click "Save arrangement" button on the upper right corner.

Now view your blog.... Hope it works for you.