HOW TO ADD A FLOATING SOCIAL MEDIA BAR ON YOUR BLOG

How to add a floating media bar on your blog

Integrating share buttons widget on your blog is a great way to get free traffic from social bookmarking website such as Twitter, Facebook, Google Plus, Digg and others. Share buttons make it easier for your blog readers and visitors to share posts they find interesting on your blog on social book marking site which will in turn increase your social engagement and page views.
Today, I want to teach you how to add a floating sharing widget for blogger blogs. This floating sharing gadget contains the best social buttons like Facebook Share/Like, Google +1 and Twitter button. This widget has been tested to be compatible with all major browsers. An example of this widget is at the left side of my blog post.

How To Add Floating Share Buttons On The Sidebar Of Blogger Blog.

1. Log in to your blogger account and click on Design
2. Click on Add A Gadget on the sidebar.
3. Select HTML/Java Script
4. Paste the code below into the box and save.

there are two fields here, one is the title and the other is the content. you can leave the first field empty i.e the title field, because a floating bar did not need title.

now paste the following codes inside the content field and save.

<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.ogbongeblog.com/2013/04/floating-sharing-bar-for-blogger-blogs.html" rel="nofollow">Get this</a></div>
</div>

save it.
you have successfully added the floating bar. ↻