Add Floating Share Button on your Site: 7 Buttons!

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, Google +1,  Stumble Upon, Digg, Tweet, Linked in and Reddit button.

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='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='floatbutton' id='linkedin'><script src="//platform.linkedin.com/in.js" type="text/javascript"></script>
<script type="IN/Share" data-counter="top"></script></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 a vertical floating share bar at the left side of your blog.

Customization: This code will give you the opportunity to customize as you like.

Add or Remove Button: You can add or remove button from this code. Notice that each code starts with <div class and ends with </div>. For your convenience I've separated the each code. If you wanna remove one or two codes then just delete the part of the code. When you wanna add something to this code make sure that the new code starts with <div class.

Position: At the beginning of this code you might notice a text like this- #pageshare {position:fixed; bottom:15%; left:3px; float:left;. Now, if you wanna place it to the right side then type right in the place of left. And you can also increase or decrease the size of the button if you are somewhat expert in coding.