Put floating Share Buttons on a Website/Blog.

Sharing the information through Websites/Blogs is very easy task. Thousands of plugins and social services are available for sharing your content online. There are different type of share buttons are available for sharing your content to millions of people through Internet.

For better designing view of Webpage's, it is recommended that these sharing buttons are placed in the area which get focus of users directly. So that, users who are willing to share any particular information can do their task.

Steps to Add Floating share Buttons:

• For bloggers:-
• Go to Blogger ->> Design View.
• Add a new widget.
• Choose a HTML/JavaScript widget.
• Paste the following code inside that widget.

<style>

#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://learnbytips.blogspot.in/2012/04/put-floating-share-buttons-on.html">Get this</a></p>
    </td>
    </tr>
    </table>
</div>
</div>

• Now Click Save button to save the widget.
• Also you can customize this widget also, like adding new sharing buttons, changing the position of the sharing buttons, and also colors of the widget. 
• For any Website:-
• Just place the above code inside the body tag. that is before/above </body>
• Position and color can be customized according to need.

That's all done.