How to add Floating Share Buttons to your blog's sidebar(For Blogspot)

Add Floating Share Buttons to your blog's sidebar

Most Of 80% Traffic come from Social Sites.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,twitter,Google + and other Social Sites.

Having a floating share buttons widget makes it even easier for your blog visitors to share your blog posts they find interesting.

Now Steps For How To add Floating Share Buttons to your Blogspot Blog.

Steps :-

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


2. You’re now looking at your blog’s layout. 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 type="text/css">


#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://hacking-zones.blogspot.in/2012/04/how-to-add-floating-share-buttons-to.html" target="blank"><font color="black">[Get This]<font></font></font></a></div></div>


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

5. Save the widget and preview your blog.
    That's it.


If, It is work then share it with your Friends...