Add Floating Share Buttons To Your Blog's Sidebar

Add Floating Share Buttons To Your Blog's Sidebar

Download passwords: hippo

Script Download Here

Step 1. Add JavaScript Code into Blogger template

Login to Your Blogger Account
Follow this tutorial to Add HTML/Javascript to Blogger or,
Navigate to Blogger Dashboard>>Layout>>Add a Gadget>> HTML/Javascript gadget.
Now Paste the below script 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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglIIvOnbcnAqSdLAK4D81MjzL7_rPQayytjqcNUG2YB497ZTF3qGGWEAumfIgUHLbtjZBKVp6VknR7GRb6QCXw7fmaNc70ikKaORoWRvws4yCdy4d3ebkYrhRVx2_JiuSSMRco_kXqORg/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://hackhippo.blogspot.com/" title="Add floating social media share buttons to your blog!"><span class="getfloat">Hack Hippo</span></a>

            </div>

        </div>

    </div>

</div>