Add Facebook share button floating share button

hey friend this code will help you to share your content on face with count and it track   all page of your block

1. Go To Blogger > Design
2. Choose a HTML/JavaScript widget
3. Paste the following code inside it,

<style>
/*-------MBT Floating Sharing Widget------------*/
#floatdiv {
  position:fixed;
bottom:15%;
margin-left:-70px;
z-index:10;
float:left;
padding-bottom:2px;
}
#mbtsidebar {
        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: &#39;en-US&#39;} </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.bloggernewtrick.tk/2011/10/add-floating-facebook-share-1-button.html">Widgets</a></p>
    </td>
    </tr>
    </table>
</div>
</div>

     4.   Save your widget and drag it just below the post body as shown below,

      5.   Now finally Click the save button at the top right corner and you are all done!

View your blog to see it hanging just to the left of your blog post body.

Customization

To align the widget more towards the left or right then edit this value margin-left:-70px;  Decreasing this numeric value will shift the widget to the right and increasing the value will shift it to left.
To Change the background colour of the floating widget then change this background:#fff;

If you wish to show the widget only on post pages and not the homepage then follow these steps.
Give this floating widget a temporary title then do this

1. Go To Blogger > Design > Edit HTML
2. Backup your template
3. Check the Expand Widgets Templates Box
4. Search for the title of the widget
5. The code for the widget will look something similar to this one,

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

Once you find the title then add the following two green bolded codes just below and after the bolded black text. For example if you wish to show a widget at Homepage only then do this,

<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>

Save your template and you have successfully stopped the widget display on homepage and allowed it on all post pages. For learning more about how to control the widget display then read: