How To Add Floating Share Buttons On Blogger Blog

Integrating share buttons widget on your blog is a great way to get free traffic from social bookmarking website such as Twitter, Facebook, Google Plus, Digg and others. Share buttons make it easier for your blog readers and visitors to share posts they find interesting on your blog on social book marking site which will in turn increase your social engagement and page views.


Today, I want to teach you how to add a floating sharing widget for blogger blogs. This floating sharing gadget contains the best social buttons like Facebook Share/Like, Google +1 and Twitter button. This widget has been tested to be compatible with all major browsers. An example of this widget is at the left side of my blog post.

How To Add Floating Share Buttons On The Sidebar Of Blogger Blog.

1. Log in to your blogger account and click on Design
2. Click on Add A Gadget on the sidebar.
3. Select HTML/Java Script
4. Paste the code below into the box and save.

/*-------JustNaira Floating Sharing Widget------------*/
#floatdiv {      
#justNairasidebar {      
        border-top:1px solid #ddd;       
        border-left:1px solid #ddd;       
        border-bottom:1px solid #ddd;       
        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;} 

<div id="floatdiv">       
<div id="justnairasidebar">       
    <table cellpadding="1px" cellspacing="0">

    <td style="padding:5px 0px 0px 0;">       
<a href="" class="twitter-share-button" data-count="vertical">Tweet</a><script type="text/javascript" src=""></script> 
    <td style="padding:5px 0 2px 0;">       
    <a name="fb_share" type="box_count" href="">Share</a><script src="" type="text/javascript"></script> 
    <td style=" padding:5px 0px 0px 0px;"> 
<script src='' type='text/javascript'> {lang: &#39;en-US&#39;} </script> 
<g:plusone size="Tall" expr:href="data:post.url">      
<p style=" line-height:0px; font-size:10px; font-weight:bold; text-align:center;"><a style="color:#D3D3D3;" href="">Get Widgets</a></p> 


You can change the background colour of the floating widget to the colour that suits you. To do this, locate background:#fff; in the code above and change the Hex code(#fff) to your preferred colour. Use our online Colour Generator to select a colour.

The widget is align to the left side at default, so if you wish to move it towards the right side or you want to shift it more to the left side, locate margin-left:-70px; in the code above and decrease the numeric value to move it to the right and increase the numeric value to shift it more to the left side.

Enjoy Blogging!!!

Over 50,000 + Readers

Get fresh content from JustNaira


  1. Ujesh Nada
  2. korex
  3. bisco
  4. Arshad Ahmed
  5. Bipin Thingujam
  6. Tomasz Borgul
  7. Bikramjit singh

Leave a Reply