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.


add-floating-share-buttons-on-blogger-blog




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.

<style> 
/*-------JustNaira Floating Sharing Widget------------*/
#floatdiv {      
  position:fixed;       
bottom:15%;       
margin-left:-70px;       
z-index:10;       
float:left;       
padding-bottom:2px; 
}
#justNairasidebar {      
        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="justnairasidebar">       
    <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">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.justnaira.com/2012/02/floating-share-buttons-on-blogger-blog.html">Get Widgets</a></p> 
    </td>       
    </tr>       
    </table>       
</div>       
</div>



Customization



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


I love sharing my knowledge with others. Feel free to contact me with any questions you may have. Please subscribe to the newsfeed and get updates through email, share this article with friends, or leave a comment below. New users can read about me HERE

Share this on:Share on Facebook2Tweet about this on Twitter0Share on Google+5Pin on Pinterest0Share on StumbleUpon0Digg this

Comments

  1. great..I’ve been looking for this…hope it works

  2. thanks man.. really really worked for me

  3. @Arshad Ahmed, go to your blog layout and remove the gadget.

  4. Arshad Ahmed says:

    Hey thanks for this and it definitely works. However, I’d like to take this widget of one blog I have and have it on the remaining two.
    Having added the code and weary about playing with the HTML, would you mind telling me some steps on how to delete it safely?

    Many thanks

  5. Bipin Thingujam says:

    I profoundly thank you…you made me so easy to work out..now my blog is so beautiful with your help http://bipinthingujam.blogspot.in/
    Appreciate it….

  6. Tomasz Borgul says:

    very nice tutorial:)

  7. Bikramjit singh says:

    thanxx man…….

  8. Love this! Easy-to-follow instructions, and the floating share button looks really cool! Did it in no time, and I’m always worried I’ll break something if I touch the HTML.

Tell us what you're thinking...

All comments are moderated.

* Denotes required field.

*