Wednesday, August 8, 2012

Add Slide Out Social Bookmarking Gadget With jQuery For Blogger

Author: Gagan Masoun
Add Slide Out Social Bookmarking Gadget With jQuery For Blogger Blog
Follow buttons and Social bookmarking gadget is important part of every blog.You can generate extra traffic with the help of social sharing.I am going to share cool social bookmarking widget with all of you which works with jQuery.This widget scrolls along with page and when user hovers on share icon then social bookmarking buttons will come out.

Steps for installation are so easy.Let's see how to add this widget to your blogger blog.

Read Also - How To Add Beautiful Social Sharing Widget Just Below Of Blogger Posts


Live Demo
Read Also - Floating Social Media Share Buttons On Blogger Side

How to Add Slide Out Social Bookmarking Gadget With jQuery For Blogger

Adding jQuery Plugin

Remember - Ignore This Step,if You Have Already Added jQuery Code In Your Blog
  • Go to Blogger Dashboard -> Template -> Click Edit HTML -> Proceed
  • Now, Press (Cntrl + F) Find Below Code In Your Template
</head>
  • Copy and Paste Below Code Just Above/Before </head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

Adding Google +1 Button Script

  • Press (Cntrl + F) Find Below Code In Your Template
<head>
  • Copy and Paste Below Code Just Above/Before <head>
<script src='http://apis.google.com/js/plusone.js' type='text/javascript'> {lang: &#39;en-US&#39;} </script>
  • Save Your Template and Follow Next Step

 Adding The Widget Now

  • Go To Blogger Dashboard -> Layout -> Add A Gadget ->HTML/JAVASCRIPT
  • Now Paste Your Follow Tools Code Inside It
<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://2.bp.blogspot.com/-Nbks3cjzITc/UCKMGQMJP4I/AAAAAAAATVI/_ufnWsGlGWE/s1600/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.blogsdaddy.com/2012/08/add-slide-out-social-bookmarking-gadget.html" target='_blank' rel='nofollow'><span class="getfloat">Get buttons</span></a>
            </div>
        </div>
    </div>
</div>
I hope you enjoy this article and if any problem occurred ask via comments. 

0 comments:

Post a Comment