Cara Membuat Kotak Komentar Facebook dengan Blogger Sejajar

Mungkin tutorial ini cukup sulit untuk dipahami dan dimengerti. Karena saya telah 2x gagal dalam pemasangan Gadget keren ini, dan sebelumnya saya telah membuat sebuah artikel yang memiliki tema yang sama yaitu Cara Memasang Kotak Komentar Facebook pada Setiap Postingan Blog

Ok kali ini saya akan memberikan Tutorial yang cukup keren dan sedikit menantang
Alangkah baiknya sebelum kita mulai, anda download dulu template anda (agar resiko tidak terlalu tinggi - Merusak Template)

Gambar 1.1 Mengunduh template

Mari kita mulai
1. Masuk ke Dashboard ~> Blog Sobat ~> Template ~> Edit HTML ~> Lanjutkan ~> Centang Expand Template Widget
2. Cari kode dibawah ini (Gunakan CTRL+F atau F3 Untuk mempercepat pencarian)

    </head>

3. Setelah itu letakan kode dibawah ini tepat diatas kode yang tadi

    <script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
    <script src='http://code.jquery.com/jquery-latest.js'/>
    <meta content='http://www.facebook.com/Andreanocalvin?ref=tn_tnmn' property='fb:admins'/>
    <script type='text/javascript'>
    function commentToggle(selectTab) {
    $(".comments-tab").addClass("inactive-select-tab");
    $(selectTab).removeClass("inactive-select-tab");
    $(".comments-page").hide();
    $(selectTab + "-page").show();
    }
     </script>
    <span style="font-size: 30%">Get This!<a href="http://tutorialseo-blog.blogspot.com/2012/10/cara-membuat-kotak-komentar-facebook.html" target="_blank" rel="follow">Tutorial Blogger</a></span> 

Ganti kode yang saya coret dengan alamat profil Facebook Anda

4.  Lalu cari

    ]]></b:skin>

5. Letakan kode dibawah ini tepat diatas kode yang tadi

     .comments-page { background-color: #f2f2f2;}
    #blogger-comments-page { padding: 0px 5px; display: none;}
    .comments-tab { float: left; padding: 5px; margin-right: 3px;
    cursor: pointer; background-color: #f2f2f2;}
    .comments-tab-icon { height: 14px; width: auto; margin-right: 3px;}
    .comments-tab:hover { background-color: #eeeeee;}
    .inactive-select-tab { background-color: #d1d1d1;}

6. Simpan template anda terlebih dahulu
7. Setelah itu cari kode

    <div class='comments' id='comments'>

8. Pastekan kode dibawah ini tepat dibawah kode yang tadi

    <div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle(&quot;#fb-comments&quot;);' title='Comments made with Facebook'>
    <img class='comments-tab-icon' src='http://static.ak.fbcdn.net/rsrc.php/v1/yH/r/eIpbnVKI9lR.png'/>
    <fb:comments-count expr:href='data:post.url'/> Comments
    </div>
    <div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle(&quot;#blogger-comments&quot;);' title='Comments from Blogger'>
    <img class='comments-tab-icon' src='http://www.blogger.com/img/icon_logo32.gif'/> <data:post.numComments/> Comments
    </div><div class='clear'/>
    </div>
    <div class='comments-page' id='fb-comments-page'>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div id='fb-root'/>
    <fb:comments expr:href='data:post.url' num_posts='6' width='650'/>
    </b:if>
    </div>
    <div class='comments comments-page' id='blogger-comments-page'>

Kode bewarna merah adalah lebar dari kotak komentar

 TAMBAHAN

    Kebanyakan blog akan memiliki 2 kode <div class='comments' id='comments'>. Jika anda adalah salah satunya, maka letakan kode no 8 dibawah ke-2 kode tersebut
    Jika Kotak komentar belum muncul, maka hapus kode <div class='comments' id='comments'> yang ke-2. Contoh

    <div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle("#fb-comments");' title='Comments made with Facebook'>
    <img class='comments-tab-icon' src='http://static.ak.fbcdn.net/rsrc.php/v1/yH/r/eIpbnVKI9lR.png'/>
    <fb:comments-count expr:href='data:post.url'/> Comments
    </div>
    <div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle("#blogger-comments");' title='Comments from Blogger'>
    <img class='comments-tab-icon' src='http://www.blogger.com/img/icon_logo32.gif'/> <data:post.numComments/> Comments
    </div><div class='clear'/>
    </div>
    <div class='comments-page' id='fb-comments-page'>
    <b:if cond='data:blog.pageType == "item"'>
    <div id='fb-root'/>
    <fb:comments expr:href='data:post.url' num_posts='2' width='400'/>
    </b:if>
    </div>
    <div class='comments comments-page' id='blogger-comments-page'>
    <div class='comments comments-page' id='blogger-comments-page'>

Berikut ini adalah hasil akhir dari kode-kode tadi

 

Gambar 1.2 Hasil akhir

INGAT UNTUK SELALU MEMBACKUP TEMPLATE!!

Artikel Terkait: