Sharing your posts is really a fantastic way to get more attention on people.But i found that most peoples are lazy to share posts.we cant force them to share our posts,we must encourage them to share. Its somehow risky to walk behind and tell them to share.So There is a nice way to encourage any lazy visitor,it is floating sharing widget.Floating sharing widget had a viral power and it can walk with the article..!!
In this article iam sharing how to add a Floating share widget for blogger blog next to the posts.Follow the steps:
Step 1 : Login to your blogger account >> Design(Layout) >> Add a Gadget
Step 2 : Choose html/JavaScript

Step 3 : Paste the Below code in it

<style>

/*-------Welblogs Floating Sharing Widget------------*/
#floatdiv {
position:fixed;
bottom:15%;

margin-left:-70px;
z-index:10;
float:left;
padding-bottom:2px;
}
#wbsidebar {
        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="mbtsidebar">
    <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" data-via="mybloggertricks">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.welblogs.blogspot.com">Widgets</a></p>
    </td>
    </tr>
    </table>
</div>
</div>

Step 4 : Save and Drag it below to the posts

Remember: Give a temporary name to the widget for the upcoming customization.

Step 5: Save and view your blog.

Customization
Change margin-left:-70px; to your wish.Decreasing the numeric value will shift the widget to the right and Increasing will shift to the left.
Change background:#fff; to change the background colour of the widget.

If you wish to see the widget only on post pages,then do this:
Step 1 : Go to Blogger >> Design >> Edit HTML (old interface)
Blogger >> Template >>Edit HTML >>Proceed (new interface)

Step 2 : Backup your template and check Expand Widget Templates Box
Step 3 : Press ctrl+F and Search for the title of the widget
Step 4 : You can see the code like this

<b:widget id='HTML3' locked='false' title='WIDGET-TITLE-HERE' type='HTML'>
<b:includable id='main'>
bla bla bla bla
</b:includable> </b:widget>

Step 5 : Once you find it,add the orange bolded codes just below or after the black bolded text,see below

<b:widget id='HTML8' locked='false' title='WIDGET-TITLE-HERE' type='HTML'>
<b:includable id='main'>

<b:if cond='data:blog.pageType == "item"'>
bla bla bla bla

</b:if>
</b:includable> </b:widget>

Step 6 : Save and view your blog,then you can see the widget is only on post pages.
Enjoy!

If You Like This Post. Please Take 5 Seconds To Share It.