Widget Social Bookmark Share dengan jQuery untuk Blogger!

Setelah kemarin saya mencoba menulis sinopsis movie resident Evil yang ternyata laris dibaca, kali ini saya akan sedikit share tutorial tentang blogger. Yup, kali ini saya mau share bagaimana caranya membuat tombol share seperti di samping kiri halaman ini. Di sana terpampang beberapa tombol social bookmarking yang pastinya sobat udah tau bahwa Social bookmark selalu memberi peran penting buat traffic ke blog sobat! Itulah sebabnya kenapa hampir semua blog, website yang ada selalu menampilkan tombol-tombol social bookmark. Nah, untuk yang kali ini, tombol social bookmark meliputi Facebook, Twitter, Google+, Digg dan Stumble upon. Coba deh sobat lihat.

Pengen? Langsung aja deh. Ikuti semua langkah berurutan ya.

Langkah 1

PS: Lewati langkah ini jika sobat sudah pernah memasukkan jQuery ke dalam blog sobat.
PS: Selalu lakukan backup sebelum melakukan perubahan kode html, sehingga sobat bisa kembali ke settingan awal lagi.

Buka blogger sobat, lalu Dashboard > Template

Klik Edit HTML

Klik Proceed

Nah, cari kode di bawah (bisa dengan ctrl+f)

</head>

Tepat di atasnya, tambahkan kode berikut

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

Langkah 2

cari kode di bawah (bisa dengan ctrl+f)

<head>

Tepat di bawahnya, tambahkan kode berikut

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

Simpan kode html

Langkah 3 (terakhir)

Buka Page Layout

Klik Add a Gadget

Pilih HTML/JavaScript

Copy Paste kode di bawah ini, lalu save

Drag widget ke bagian bawah page (di bawah post)

Save

<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>