Add floating share buttons on sidebar of your blogger

About 20% of all traffic on www comes from social sites. And for personal blogs this percentage is even larger, so if your blog is missing social buttons then you might be missing heavy traffic. Floating social buttons not only improve the look of your blog but also drive huge traffic. Apart from working on traffic and search engine optimization (SEO), there’s a need to integrate your blog with popular social networking platforms. A floating share buttons (social bookmarking) widget by the right of every page is just one of the gadgets you must add to your blog if you intend to get free traffic from facebook and twitter. So I am going to tell you how to add floating social buttons on your blogger. Don’t worry you don’t have to edit HTML of your blog for that.

Having a floating share buttons widget makes it even easier for your blog visitors to share your blog posts they find interesting. The floating sidebar sharing widget comes with the most popular social sites. You can see the widget just at the right side of this page and it scrolls with the page, leaving your visitor no choice but to share your content. Follow these steps to add floating share widget to your blog-

How To Add Floating Share Buttons On The Sidebar

1. Log in to your blogger account and click on Design

2. You’re now looking at your blog’s layout, right? Click on Add A Gadget on the sidebar.

3. Select HTML/Java Script.

4. Paste the code below into the box and save. There’s no need for a title.

<!--SideBar Floating Share Buttons Code Start-->

<style>

#pageshare {position:fixed; bottom:15%; right:10px; float:left; border: 1px solid black; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#eff3fa;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='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='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='gplusone'><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script><g:plusone size="tall"></g:plusone></div>
<div class='sbutton' id='su'><script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script></div>
<div class='sbutton' id='digg' style='margin-left:3px;width:48px'><script src='http://widgets.digg.com/buttons.js' type='text/javascript'></script><a class="DiggThisButton DiggMedium"></a></div>
<div class='sbutton' id='fb'><a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script></div><br/><div style="clear: both;font-size: 9px;text-align:center;"><a href="http://gadgetsmaniac4u.blogspot.com/2011/12/add-floating-share-buttons-on-sidebar.html" target="blank"><font color="black">[Get This]<font></font></font></a></div></div>

<!--SideBar Floating Share Buttons Code End-->

5.Open your blog and see floating buttons.Thats it.