Cara Untuk Memasang Komentar Facebook Bersebelahan Dengan Komentar Blogger

Berikut ini merupakan cara untuk memasang kotak komentar facebook dengan tombol untuk memilih menggunakan komen fb atau komen blogger (multi tab).

Cara ini terbukti support dengan segala jenis template :
1. login ke Akun BLOGGER

2. Pada dasbor, pilih RANCANGAN/DESIGN kemudian pilih EDIT HTML

3. Centang kolom EXPAND TEMPLATE WIDGET (wajib jika tidak maka kode <div class='comments' id='comments'>

kemungkinan tidak akan muncul di pencarian )

4. Baru kemudian Cari kode <div class='comments' id='comments'>

gunakan tombol Ctrl F di keyboard untuk memudahkan mencari (apabila terdapat 2 atau 3 kode yang sama, harus memilih kode yang terakhir jika salah dan tidak pada kode <div class='comments' id='comments'>

yang terakir maka kotak komentarnya tidak akan muncul ) klik tombol next 2 atau 3 kali pada Ctrl F (find) untuk mendeteksi apakah kode <div class='comments' id='comments'>

tersebut terdapat lebih dari satu pada template anda.

5. Setelah anda menemukan kode tersebut, kemudian COPAS kode dibawah ini tepat DIBAWAH kode <div class='comments' id='comments'>

<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='2' width='400'/>
    </b:if>
    </div>
    <div class='comments comments-page' id='blogger-comments-page'>

    <script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
    <script src='http://code.jquery.com/jquery-latest.js'/>
    <meta content='ID FB Sobat disini' 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>
    <style>.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;}</style>

Keterangan :


Huruf yang berwarna MERAH itu menunjukan lebar kotak komentar Facebook
Huruf yang berwarna ORANGE itu diganti dengan ID Facebook kamu ya
Huruf yang berwarna HIJAU menunjukan Warna Background

6. Terakhir save template.

Selamat Mencoba ^_^