Membuat komentar Blog dan Facebook Berdampingan atau Tab

1. Masuk ke Blog anda.

2. Pilih  Layout/Tata Letak ► Edit HTML

3. Saya sarankan untuk membackup template anda dengan mengklik Download Full Template untuk berjaga jaga jika terjadi kesalahan.

4. Centang kotak yang bertuliskanExpand Widget Template.



5. Setelah itu cari code <div class='comments' id='comments'> gunakan ctrl + F untuk mempermudah pencarian.



6. Setelah ketemu letakan code berikut ini Tepat dibawah <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'>


Dan hasilnya akan Seperti ini :

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

Note :witdh='400' sesuaikanlah dengan Lebar Halaman Artikel Blog masing-masing


7. Sekarang cari lagi Code </head>



8. Jika sudah ketemu silahkan Letakkan Code Berikut Tepat di Atas code </head>

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

Dan hasilnya akan seperti ini :

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

    </head>

Note : Ganti ID FB Sobat disini dengan ID Facebook Masing-masing, Cara Melihat Id Facebook tinggal buka profil kamu terus lihat code di belakangnya, bisa berupa angka atau tulisan, atau nama, contohnya seperti berikut : https://www.facebook.com/febriandeny

Nama atau Angka dibelakang Alamat Fb sobat, itulah Id Nya.


9. Sekarang Cari Lagi Code ini  /* Comment atau #comments

Sesuaikan dengan yang ada di Blog, jika tidak Ketemu juga silahkan Cari Code yang mirip dengan code diatas.

Lalu Letakkan Code Berikut tepat di Bawah nya

    .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;}



10. Sekarang Silahkan Klik Pratinjau dulu untuk melihat sudah benar atau belum, Jika sudah benar dan tidak ada masalah Silahkan Klik SIMPAN.

Sumber