Sep 18, 2012

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>
    
    ItemReviewed: Widget Social Bookmark Share dengan jQuery untuk Blogger!
    Rating: 8 out of 10 based on 24 ratings. 5 user reviews.
    Reviewer: Posting Sembarang

    0 comments:

    Post a Comment