Social Bookmarking Gadgets plays important role in boosting blog traffic.Thats why you may found social bookmarking gadgets almost on every blog/website.Today we are sharing a cool social bookmarking gadget designed by Chandeep and which works with jQuery.This gadget scrolls along with page and when any user hovers on icon,some social bookmarking buttons like facebook like button,twitter tweet button,stumbleupon submit button and digg's digg it button.Also the installation of this gadget is damn easy,now lets see how to add it to blogger blog.See the demo of gadget first.






How To Add Slide Out Bookmarking Gadget To Blogger?


For better understanding I am dividing this tutorial in 3 simple steps,just follow them carefully and you will add this gadget very easily to your blog.

Step 1 : Adding jQuery Plugin
Step 2 : Adding Google +1 Button Script
Step 3 : Adding the Gadget

Step 1 : Adding jQuery Plugin


Note - Ignore this step,if you have already added jQuery plugin to your blog.


  1. Go to Blogger Dashboard > Template
  2. Click Edit HTML
  3. Hit Proceed
  4. Now find below code in your template


</head>


add below code just above it

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>


Step 2 : Adding Google +1 Button Script


Find below code in your temlate

<head>


add below code just below of above code

<script src='http://apis.google.com/js/plusone.js' type='text/javascript'> {lang: &#39;en-US&#39;} </script>


Step 3 : Adding the Gadget


  1. Now go to Page Layout
  2. Click on Add a Gadget
  3. Select HTML/JavaScript
  4. Leave title field blank
  5. Paste below code and save it
  6. Drag the widget to bottom of your page.
  7. Finally save your changes

<script type="text/javascript">
    /*<![CDATA[*/
    jQuery(document).ready(function () {
        jQuery(".hbslidebox").hover(function () {
            jQuery(this).stop().animate({
                left: "0"
            }, "medium");
        }, function () {
            jQuery(this).stop().animate({
                left: "-70"
            }, "medium");
        }, 500);
    });
    /*]]>*/
</script>
<style type="text/css">
    .hbslidebox {
        background: url("http://3.bp.blogspot.com/-Dbq2keEcGbs/T7seLQzzy8I/AAAAAAAAByY/6olpRUktfhE/s1600/helperblogger.com-tab_left_vertical.png") no-repeat scroll right top transparent !important;
        display: block;
        float: left;
        height: auto;
        padding: 0 45px 0 0px;
        width: 65px;
        z-index: 99999;
        position:fixed;
        left:-70px;
        top:20%;
    }
    .hbslidebox div {
        border:none;
        position:relative;
        display:block;
    }
    #floatingbuttons {
        background: #fff;
        border-radius: 5px 5px 5px 5px;
        border: 1px solid #CCCCCC;
        float:left;
        padding:0 0 3px 0;
        bottom:15%;
        z-index:399;
    }
    #floatingbuttons .floatbutton {
        float:left;
        clear:both;
        margin:5px 4px 0 4px;
    }
    .addbuttons {
        clear:both;
        text-align:center;
        padding-top:5px;
    }
    .addbuttons a span.getfloat, .addbuttons a span.sharebuttons {
        color:#000;
        background:none;
        font-family:arial, sans-serif;
        display:block;
        font-size:9px;
        font-weight:bold;
        text-decoration:none;
        line-height:11px;
    }
    .addbuttons a:hover span {
        color:#fff;
        background:none;
        text-decoration:underline;
    }
</style>
<div class="hbslidebox" style="">
    <div>
        <div id='floatingbuttons' title="Share this post!">
            <script src="http://connect.facebook.net/en_US/all.js#xfbml=1">
                
            </script>
            <script type="text/javascript">
                (function () {
                    var s = document.createElement('SCRIPT'),
                        s1 = document.getElementsByTagName('SCRIPT')[0];
                    s.type = 'text/javascript';
                    s.async = true;
                    s.src = 'http://widgets.digg.com/buttons.js';
                    s1.parentNode.insertBefore(s, s1);
                })();
            </script>
            <!-- Medium Button -->
            <script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script>
            <div class='floatbutton' id='facebook'>
                <fb:like layout="box_count" show_faces="false" font=""></fb:like>
            </div>
            <div class='floatbutton' id='google+1'>
                <g:plusone size="tall"></g:plusone>
            </div>
            <div class='floatbutton' id='stumbleupon'>
                <script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script>
            </div>
            <div class='floatbutton' id='digg'>
                <a class="DiggThisButton DiggMedium"></a>
            </div>
            <div class='floatbutton' id='twitter'>
                <a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical">Tweet</a>
            </div>
            <div class="addbuttons">
                <a href="http://www.helperblogger.com/" title="Add floating social media share buttons to your blog!"><span class="getfloat">Get buttons</span></a>
            </div>
        </div>
    </div>
</div>

Hope all of you will like this gadget.Peace Buddies :)

Post a Comment

  1. Replies
    1. I can't understand what are you saying,I have already added the demo and it is working....

      Delete
  2. This comment has been removed by the author.

    ReplyDelete
  3. live demo not working sir!!! kindly fix it.....there must be some problem
    shop online india blog

    ReplyDelete
  4. thanks a lot really wonderfull ....so easy to make it.....

    ReplyDelete
    Replies
    1. its my pleasure :) Hope you have liked it ...

      Delete
  5. LOl the demo is working maybe you guys are blind.

    ReplyDelete
  6. Thanks Rahul for this gadget
    the gadget work
    but the demo not workin on Firefox

    ReplyDelete
  7. thanks but not work for me ?

    www.allnewmobilereview.blogspot.com

    ReplyDelete
    Replies
    1. Bro. avoid the first step then try it :)

      Delete
  8. Good once, liked it very much.. working well in my blog -
    History of music

    ReplyDelete
  9. Hello,

    I want to add pin it (with count box) and email button to this gadget.
    Could you help me please?

    Thank you.

    ReplyDelete
  10. good. i like it. but the icons can be more customised

    ReplyDelete
  11. love this but how do i change the Facebook 'like' to Facebook 'share'?...want people to be able to add message in there share like the twitter and g+ areas.

    ReplyDelete
    Replies
    1. This comment has been removed by the author.

      Delete
    2. i have tried and tried...can't get this to change from 'like' to 'share'...pleas help!

      Delete
  12. It was kind on of complicated at first, because the instructions tell your to look for: "head" But it is there on line 5. And you have to add the first script above "head", and the second right below it, and then hit Save. http://www.Jamesdazouloute.blogspot.com/ Thanks so lot.. Visit Me...

    ReplyDelete
  13. Hirap Naman,,, ung isang share lang ang nakabit.

    ReplyDelete
  14. Hi !! I love it !
    I would like to ask a question. I want it to always appear and do not have to move the mouse over it !!
    So what to do.

    Thanks

    ReplyDelete
  15. It's working But showing on home page

    ReplyDelete
  16. This comment has been removed by a blog administrator.

    ReplyDelete
  17. it is helpful side bar widget forICC Cricket World Cup 2015 blogger thank you

    ReplyDelete
  18. This articles or blog posts in this certain an element of your blog are really fantastic. Thank you to your useful discussion.
    Save on cricket nets, cricket pitches, Flicx pitches, artificial cricket surfaces and other equipment at Stellar Sports.

    ReplyDelete
  19. Thanks for share this POST...

    Try this 3 list of Social Bookmarking Submission :

    1. Top High PR Social Bookmarking Sites List
    2. Social Bookmarking Sites List
    3. Social Bookmarking List

    Thank You...

    ReplyDelete

If you want to be informed about any replies then check "Notify me" option (present at lower right corner of comment box and it will display if you are logged in to your google account).PLEASE DO NOT SPAM

 
Top