Add Floating Share Button on your Site

To improve your traffic rank SEO can contribute a lot. Few years back SEO was somewhat difficult. But at present time SEO is little bit easier by the grace of social sites like twitter, facebook, google + etc.

Today I will show you how to add floating social share button to blogspot website. This code will provide you facebook like, googe + 1, reddit, stumble upon and digg.

To add these floating buttons to your blog, just follow the steps below:

1. Sign in to your blog
2. Click design from the upper right corner 
3. Click on layout and hit on Add a Gadget option
4. Now you'll see a list of gadget and you need to select html/ java script gadget. It will show you  Configure HTML/JavaScript window
5. Now copy the following code and paste it into the content box of Configure HTML/Java Script window
6. Now save this gadget

Note: Make sure your blogger dashboard is set to the new look. Click here for more info. 

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

<style>
#pageshare {position:fixed; bottom:15%; left:3px; float:left; border: 1px solid black; border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;background-color:#eff3fa;padding:0 0 1px
0;z-index:10;}
#pageshare .sbutton {float:left;clear:both;margin:3px 3px 0 3px;}
.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='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="reddit"><script type="text/javascript" src="http://www.reddit.com/static/button/button2.js"></script><!-- AddThis Button BEGIN --><div class="addthis_toolbox addthis_default_style "><a class="addthis_counter"></a></div>

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

If everything is correct then you will be able to see the floating share button box like this site on the left side of your blog.

Posted in: Blog Tricks