Membuat Komentar Facebook Disamping/Berdampingan Komentar Blogger

Membuat Komentar Facebook Disamping/Berdampingan Komentar Blogger

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3bYhlvJ9PJeIzPpn7hK_1vIUyCAFYO0Kjn8FggpLTXuwBinLMesZDy9S6RopiDr9CnU9Ql8xCulT3bH1330W4kQRSuvPA9QUP_fqL003MIBfCotnHD6w1AT3WheJUHpKxBsPpV9R9PA/s72-c/ok+facebook.png

Membuat Kotak Komentar Facebook Berdampingan atau Disamping Kotak Komentar Blogger - Mungkin sebagian sobat udah banyak yang tau dan buat tutorial cara membuat kotak komentar facebook berdampingan dengan kotak komentar blogger. Tapi belom semua tau cara paling mudah. Ok Sobat caranya gampang kok, ikuti aja langkah-langkah membuat kotak komentar facebook berdampingan dengan kotak komentar blogger dibawah ini :

1. Login dulu ke akun Blogger Sobat.

2. Pilih Rancangan lalu Edit HTML kemudian centang Expand Template Widget

3. Cari kode <div class='comments' id='comments'>

kemudian copas kode dibawah ini, letakkan tepat dibawah kode 

tadi.

Ket : Jika kode <div class='comments' id='comments'>
 ada 2, pastekan kode dibawah ini tepat dibawah kode
 yang ke-2.

<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='Masukan ID Fb anda 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>

4. Ganti tulisan warna biru (Masukkan ID Fb anda disini) dengan ID facebook anda. Karna ID fb sudah diganti menjadi username, untuk mengetahui ID anda silahkan pastekan link ini ke browser anda https://graph.facebook.com/username (contoh http://www.facebook.com/mul.ganteng maka usernamenya mul.ganteng)
5. Setelah diganti Simpan Template anda dan lihat hasilnya.
Selesai deh, gampang kan? ??
Demikan semoga bermanfaat..