Membuat Komentar Facebook dan Komentar Blog Berdampingan

Membuat komentar Facebook dan komentar Blog berdampingan, mungkin sudah banyak yang tahu dan buat tutorial cara membuat kotak komentar facebook berdampingan dengan kotak komentar blogger. Tetapi belum semua tahu cara paling mudah dan nggak berbelit-belit seperti yang akan saya utarakan dibawah ini, atau mungkin ada yang belum tahu apa itu komentar facebook dan blogger berdampingan, bagi yang belum tahu.  

Jadi begini caranya kotak komentar yang biasa kita lihat dibawah postingan blog akan kita letakkan persis disebelah atau disamping kotak komentar bawaan blogger. Jadi komentar facebook dan blogger menyatu dan lebih menghemat tempat diblog kita.

Nah udah tahu kan? gimana, keren bukan? Caranya gampang kok, ikuti aja langkah-langkah membuat kotak komentar facebook berdampingan dengan kotak komentar blogger dibawah ini :

1. Login dulu ke akun Blogger kamu.

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 <div class='comments' id='comments'> tadi.

Ket : Jika kode <div class='comments' id='comments'> ada 2, pastekan kode dibawah ini tepat dibawah kode <div class='comments' id='comments'> 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 merah (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/sandaljepit maka user namenya sandaljepit)

5. Setelah diganti Simpan Template anda dan lihat hasilnya.