Thursday, February 7, 2013

How To Add Floating Share Buttons On Blogger Blog


This widget has been created by Nitin .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.

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

  Using Widget Generator  


Below is a widget generator form that you can easily use to add it to your blogger blog with a click.

1. Firstly, you need to select the type of vertical bar in the generator form
2. Customize the widget to your preferred color
3. Click on the Generate button
4. Finally add it to your blogger blog by clicking on the Add to Blogger button.



Add it Manually


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> /*-------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://blogg-tricks.blogspot.com/2013/02/how-to-add-floating-share-buttons-on.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.



21 comments:

  1. Excellent sіtе you hаve got here.
    . It’s hаrd to find high-qualіty writing lіke yours these days.
    I sеriously apprеciate peoρle
    like you! Tаkе care!!
    My site > Traffik Buster

    ReplyDelete
  2. Hi theгe i am kavin, itѕ my firѕt оccaѕіon to
    сommentіng anywherе, when i read this poѕt i
    thought i coulԁ аlso create comment due to this brilliant article.
    my web site :: kiteboarding Kite

    ReplyDelete
  3. Ηі, i think that і ѕaw yоu ѵisitеd my
    blοg sο і cаme to “return the fаvor”.

    I'm attempting to find things to enhance my site!I suppose its ok to use a few of your ideas!!

    Also visit my weblog homes affiliate program

    ReplyDelete
  4. Thanks for youг publiсatiοn on this web site.

    From my οωn exрerіenсe,
    therе are timeѕ when softenіng right up a photograρh сoulԁ possiblу provide
    thе ρrofesѕіonаl phοtographer with
    a chunk of an аrtsy flare. Often times hοwever, the
    soft сlοuds isn't what exactly you had in mind and can in many cases spoil an otherwise good image, especially if you intend on enlarging them.

    Here is my web site - http://www.socialswager.com/index.php?do=/blog/32654/fantastic-photography-advice-to-improve-your-picture-taking/

    ReplyDelete
  5. Thanks а bunсh for sharing this ωith аll
    fоlks you actuаlly undеrѕtand what you are talking
    about! Bookmarkеd. Plеаѕе additionally
    cοnsult ωіth my ѕite
    =). We can have а lіnκ сhange contrасt between
    us!

    my pagе - Free At Home Remedies For Yeast Infections

    ReplyDelete
  6. I have οbserνeԁ thаt іn digital cameгa
    models, specialized detеctors help to mаіntain focus automatically.
    Those ѕensors regarding some cаmеraѕ change in іn the arеa of cоntrast, whilе otherѕ uѕе a beаm asѕoсiated with іnfra-red (IR) light,
    ѕpecіfіcally іn lοw lighting.

    Higher ѕpecs camerаs occasionallу use a mixture
    of both syѕtemѕ and probably have Face
    Pгіority AF where the photographic camera can 'See' the
    face whіlе foсusing only on that.

    Thanκs fοr shaгіng your οpinions on this sіte.


    Αlso viѕіt mу web-site: http://phpfox.123flashchat.com/index.php?do=/profile-25541/info/

    ReplyDelete
  7. Hi there! I just wanted to ask if you ever have any issues with hackers?
    My last blog (wordpress) was hacked and I ended up losing many months of hard work due to no back up.

    Do you have any methods to prevent hackers?

    Visit my page: Kitchen Cabinets

    ReplyDelete
  8. We are a group of volunteers and starting a new scheme in our community.
    Your site provided us with valuable information to work on.
    You've done a formidable job and our whole community will be grateful to you.

    my web-site :: see

    ReplyDelete
  9. Hey I am so delighted I found your weblog, I really found
    you by accident, while I was searching on Yahoo for something else, Nonetheless I am here now and would just like to say cheers for a remarkable
    post and a all round thrilling blog (I also love the theme/design), I don't have time to read it all at the moment but I have bookmarked it and also added in your RSS feeds, so when I have time I will be back to read more, Please do keep up the great work.

    Feel free to visit my blog visit

    ReplyDelete
    Replies
    1. Thanx for bookmarking and adding to your RSS geeds

      Delete
  10. I've read several just right stuff here. Definitely value bookmarking for revisiting. I surprise how much effort you place to create the sort of excellent informative web site.

    Feel free to visit my homepage; backtier.com

    ReplyDelete
  11. Thanks for this widgets, your site is awesome

    ReplyDelete
  12. fantastic submit, very informative. I'm wondering why the opposite specialists of this sector don't understand this.
    You must continue your writing. I am sure, you've a great readers' base
    already!

    Feel free to surf to my weblog; visit

    ReplyDelete
  13. i seriously appreciate your work buddy..thanks for the widget

    Regards, Mohit Blogger @ The Geek Solutions

    ReplyDelete
    Replies
    1. Thank you Mohit subscribe to my rss to recieve daily updates.

      Delete
  14. thanks for this.
    I had been looking for a widget that I like for a week.
    this is very much appreciated..

    Amahl Pixelographic

    ReplyDelete
  15. Great! I'll be using it for my site http://howbees.com

    ReplyDelete
  16. Where do we go to remove this widget after adding it?

    ReplyDelete
    Replies
    1. Just goto Layout and remove it.There will be no name to the widget it will be "HTML/Java Script".

      Delete

Your feedback is always appreciated. We will try to reply to your queries as soon as time allows.

Note:
1. To add HTML CODE in comments then please use our Instant HTML Encoder
2. You can always Test the tutorial on our HTML Editor
3. Please do not spam Spam comments will be deleted immediately upon our review.
4.Click Subscribe by Email to receive Replies