Add Floating Share Button in Blogger

• Home
• Social
• Add Floating Share Button in Blogger

Add Floating Share Button in Blogger

Posted by Unknown | 1:38 PM | Leave a Comment

Ever wondered to create a Mashable type floating sharing widget for your blogger blogs? There you have it today! We released a sliding, scrolling widget last month which contained major social media sharing buttons but some of you complained that the widget do not work properly with the new blogger templates so to keep things more flexible, we are releasing yet another version of a floating widget which contains the best social buttons like Facebook Share/like, Twitter and Google +1 button. All in one. I have not used any scripts this time and this widget works purely on CSS and HTML and is fully compatible with all major browsers. You can see this sticky widget to left of my blog post. I have made sure to keep the installation process as easy as possible so be confident to try this one out to better increase your social engagement and thereby your page views.

Adding The Sticky Floating Widget Next To Blogger Posts

• Go To Blogger > Design


• Choose a HTML/JavaScript widget


• Paste the following code inside it,

<style> 
/*-------mbw Floating Sharing Widget------------*/
#floatdiv { 
  position:fixed; 
bottom:15%; 
margin-left:-70px; 
z-index:10; 
float:left; 
padding-bottom:2px; 
}
#mbwsidebar { 
        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.mybloggerworld.net">Widgets</a></p> 
    </td> 
    </tr> 
    </table> 
</div> 
</div>

• Save your widget and drag it just below the post body.

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