cara membuat komentar facebook dan blog berdampingan

Cara membuat kotak komentar facebook berdampingan dengan kotak komentar blogger - Pada postingan terdahulu Wan Bloggers bikin postingan cara membuat kotak komentarfacebook di blog, tapi kali ini akan memposting cara membuat kotak komentar facebook berdampingan dengan kotak komentar blogger. Masih bingung seperti apa bentuknya, lihat gambar dibawah ini :

Untuk cara membuatnya ikuti saja langkah-langkahnya :

1.    Masuk ke Edit HTML, kemudian beri centang pada expand widget template. Jangan lupa di back up dulu templatenya biar anda aman.

2.    Cari kode berikut <div class='comments' id='comments'> 

3.    Copy Kode berikut di bawah kode di atas :

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

4.    Cari kode </head> kemudian pastekan kode berikut di atasnya.

<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<script src='http://code.jquery.com/jquery-latest.js'/>
<meta content='Masukkan ID Facebook anda' 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>

5.    Kemudian cari kode berikut /* Comment atau #comments. Kemudian letakkan kode berikut di bawahnya.

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

Keterangan :

·      Ganti kode warna biru denga jumlah koment yang ingin di tampilkan dan berapa ukuran lebar yang diinginkan.

·      Ganti id facebook dengan kepunyaan anda, contoh alamat fb saya https://www.facebook.com/rifqiblogger nah, id nya adalah [rifqiblogger]

Selamat mencoba semoga berhasil.