Cara Menggabungkan Komentar Facebook Dengan Komentar Blogger

Cara Menggabungkan Komentar Facebook Dengan Komentar Blogger

kali ini saya mau share mengenai Cara Menggabungkan Komentar Facebook Dengan Komentar Blogger, dengan begitu blog kita akan terlihat lebih bagus dilihat.

Okelah, Kalau anda tertarik ingin membuatnya, silakan ikuti langkah muda Cara Menggabungkan Komentar Facebook Dengan Komentar Blogger dibawah ini:

pilih Rancangan, Edit html, centang Expand Template Widget, Hmm.. untuk menghindari kegagalan dalam pemasangan, mending kamu backup/download dulu template asli kamu buat jaga-jaga.. :) caranya klik tulisan 'Download Template Lengkap'
Oke selanjutnya Ctrl + F pada Keyboard sobat, Lalu cari code di bawah ini :

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

Setelah ketemu Silahkan Copy dan Paste code berikut di bawahnya :

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

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

Cari kode </head> lalu letakkan kode dibawah ini diatasnya

<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 FB SOBAT BLOGGER' 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>

NB: Ganti tulisan yang diperintahkan dengan ID Facebook kamu, Contoh ID Facebook saya: http://facebook.com/rahman pendukung, mudah bukan ? hehe..

cari kode ini /* Comment atau #comments

NB: Sesuaikan dengan yang ada di Blog, jika tidak Ketemu juga silahkan Cari Code yang semirip Mungkin

Lalu Letakkan Code Berikut 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;}

Silahkan Klik Pratinjau dulu apakah Peletakan Code sudah Benar Atau tidak, Jika tidak ada masalah Silahkan Klik SIMPAN