This widget has been created by
Nitin .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.
How To Add Floating Share Buttons On The Sidebar Of Blogger Blog.
Using Widget Generator
Below is a widget generator form that you can easily use to add it to your blogger blog with a click.
1. Firstly, you need to select the type of vertical bar in the generator form
2. Customize the widget to your preferred color
3. Click on the Generate button
4. Finally add it to your blogger blog by clicking on the Add to Blogger button.
Add it Manually
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> /*-------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://blogg-tricks.blogspot.com/2013/02/how-to-add-floating-share-buttons-on.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.
Hi! I am P.Harikesh,founder of this blog.You can find many blogging tricks and tips in this blog.
Read More.. 
