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.
<style> /*-------JustNaira Floating Sharing Widget------------*/ #floatdiv { position:fixed; bottom:15%; margin-left:-70px; z-index:10; float:left; padding-bottom:2px; } #justNairasidebar { background:#fff; border-top:1px solid #ddd; border-left:1px solid #ddd; border-bottom:1px solid #ddd; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; padding-left:5px; width:60px; margin:0 0 0 5px; } .fb_share_count_top {width:52px !important;} .fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;} .FBConnectButton_Small, .FBConnectButton_RTL_Small {width:52px !important; -moz-border-radius:3px;/*bs-fsmsb*/-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="floatdiv"> <div id="justnairasidebar"> <table cellpadding="1px" cellspacing="0"> <tr> <td style="padding:5px 0px 0px 0;"> <a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script> </td> </tr> <tr> <td style="padding:5px 0 2px 0;"> <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> </td> </tr> <tr> <td style=" padding:5px 0px 0px 0px;"> <script src='http://apis.google.com/js/plusone.js' type='text/javascript'> {lang: 'en-US'} </script> <g:plusone size="Tall" expr:href="data:post.url"> </g:plusone></td> </tr> <tr> <td> <p style=" line-height:0px; font-size:10px; font-weight:bold; text-align:center;"><a style="color:#D3D3D3;" href="http://www.justnaira.com/2012/02/floating-share-buttons-on-blogger-blog.html">Get Widgets</a></p> </td> </tr> </table> </div> </div>
Customization
You can change the background colour of the floating widget to the colour that suits you. To do this, locate background:#fff; in the code above and change the Hex code(#fff) to your preferred colour. Use our online Colour Generator to select a colour.
The widget is align to the left side at default, so if you wish to move it towards the right side or you want to shift it more to the left side, locate margin-left:-70px; in the code above and decrease the numeric value to move it to the right and increase the numeric value to shift it more to the left side.
Enjoy Blogging!!!
this is nice share button for blogger and its work cool thanks for sharing such nice article
Does it show on mobile.
great..I’ve been looking for this…hope it works
thanks man.. really really worked for me
@Arshad Ahmed, go to your blog layout and remove the gadget.
Hey thanks for this and it definitely works. However, I’d like to take this widget of one blog I have and have it on the remaining two.
Having added the code and weary about playing with the HTML, would you mind telling me some steps on how to delete it safely?
Many thanks
I profoundly thank you…you made me so easy to work out..now my blog is so beautiful with your help http://bipinthingujam.blogspot.in/
Appreciate it….
very nice tutorial:)
thanxx man…….
Love this! Easy-to-follow instructions, and the floating share button looks really cool! Did it in no time, and I’m always worried I’ll break something if I touch the HTML.