How To Add Slide Out Bookmarking Gadget To Blogger?

Social Bookmarking Gadgets plays important part in boosting blog traffic.Thats why you may plant ethnic bookmarking gadgets virtually on every blog/website.This gadget scrolls along with industrialist and when any mortal hovers on painting,several mixer bookmarking buttons equivalent facebook same fix,twirp tweet switch,stumbleupon submit button and digg's digg it fix.Also the beginning of this gadget is hoot simplified,now lets see how to add it to blogger journal.See the exhibit of gadget prototypical.

For outgo understanding I am disjunctive this tutorial in 3 unsophisticated steps,righteous play them carefully and you instrument add this gadget rattling easily to your journal.

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.

Go to Blogger Dashboard > Template
Click Edit HTML
Hit Proceed
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

Now go to Page Layout
Click on Add a Gadget
Select HTML/JavaScript
Leave title field blank
Paste below code and save it
Drag the widget to bottom of your page.
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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqbGHjsAVlmbOG9fJPwlTD4fKCv43guL2KI4eAA2yQT2pm7JhET7bjrXE-idHnvh8N98OFi1E0NbpVsQoG6Zh9LQX_B5E8hgE7T4vD-CbaellDId7Z3d4MgWLKuC875nbCOU4w2cFWYgOb/s102/blogger%2520hero-tab_left_vertical.jpg") 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.bloggers-hero.blogspot.com/" title="Add floating social media share buttons to your blog!"><span class="getfloat">Get buttons</span></a>
            </div>
        </div>
    </div>
</div>

Note:- Hello There!Happy for reading the article and don't forget share this article on your social network.Thanks You ^_^

share this article to: Facebook Twitter Google+ Linkedin Technorati Digg

Posted by Admin ID-Netblog, Published at 6:18 AM and have 0 comments

Writed by : Admin ID-Netblog

My friend was reading the article onHow To Add Slide Out Bookmarking Gadget To Blogger?. Admin, buddy permitted copying and pasting or disseminate this article, but do not forget to put the source link below.

<a href="https://bloggerheroe.blogspot.com/2011/08/how-to-add-slide-out-bookmarking-gadget.html" target="_blank">How To Add Slide Out Bookmarking Gadget To Blogger?</a>