Sharing is caring. So, start sharing your blog now.

Have you ever wonder how to create those floating share buttons especially on your blog? If you would search 'how to create a floating share button' on Google, you might probably ended up finding more guides for WordPress compared to Blogger. I know how it felt and I was also in your shoes few days back. After several hours of research, I found the solution and yes, it was just that easy. You don't need any rocket science mind, zero HTML knowledge doesn't matter and of course, you don't need to create any special coding to create a floating share button. Hold on! So what do you need actually? Easy. All you need is this one guide right here you are reading now! I can bet with you, give this article a 5 minute trial run and you will be able to create a floating share button on your website or blog easily.

Step to step guide on how to create a floating share button on Blogspot
1. Backup the current template setting you have right now. You can do so by selecting Template - Backup / Restore. This option is optional though. Backing up is not compulsory as you do not need to change or edit the HTML codes.

2. Select Layout. Here you are able to see your blog general layout such as widgets location, AdSense ad placements and even header.


3. Click on Add A Gadget and scroll down (or search for HTML/JavaScript).

4. Inside the HTML/JavaScript widget, add this code to it. Copy and paste it.


<style> 
/*-------SCB Floating Sharing Widget------------*/
#floatdiv { 
  position:fixed; 
bottom:15%; 
margin-left:-70px; 
z-index:10; 
float:left; 
padding-bottom:2px;
}
#scbsidebar { 
        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="scbsidebar"> 
    <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="studentscrunch">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>  
    </table> 
</div> 
</div>


5. Save the widget and it is recommended that you move the widget to place it on the left side of the page (if there is available slots).

6. Congratulations! Now you have a floating share buttons for Facebook, Twitter and Google+!

I hope this simple but yet comprehensive guide will enable you to have a nice floating share buttons and if you are adventurous, you may also change change the colour, size etc. However, remember to share this with your friends and family or just simple put it at StumbleUpon for other bloggers to refer to as well :)

Meantime, here is something about me:
I am an avid blogger and close to a full time online writer. I been writing for many years and The Big Fat Reality is one of my upcoming blogs. I am also sharing all my tips and guides on blogging in this blog and my latest writing on blog design tips, How To Add Widget Above Or Below Blog Title.