Membuat Komentar Facebook Berdampingan dengan Komentar Blogger

Hai sob bagaimana kabar akhir pekan anda yang pasti menyenangkan bukan. Kebetulan karena suasana yang menyenangkan ini saya akan memberikan tutorial gimana cara membuat komentar facebook dan blogger berdampingan di blog anda. Trik yang satu ini udah saya terapkan di Blog trik dan Tips dan hasilnya sangat bagus. Oke langsung saja kita ikuti langkah-langkahnya ya: Apa itu Harlem Shake

1. Login ke Blogger
2. Masuk ke Rancangan --> Klik Edit HTML
3. Centang Expand Template Widget
4. Carilah kode <div class='comments' id='comments'>
5. Setelah ketemu paste kode dibawah ini 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'/> Komentar Facebook
</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/> Komentar Blogger
</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'>

Keterangan: kode warna merah adalah lebar kotak komentar, tinggal anda sesuaikan

6. Kemudian letakkan kode dibawah ini diatas kode </head>

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

7. Ganti ID Facebook (BlogTrikDanTips) dengan ID Facebook anda
8. Cari lagi kode /* atau #comments
9. Letakan kode berikut ini dibawah kode 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;}

Sekian tutorial dari saya selamat mencobanya.