Memasang Komentar Facebook Dibawah Postingan Blog

Baik sobat blogger semua kali ini saya mau share mengenai cara membuat komentar facebook seperti yang ada di blog saya ini, ehem..dimana saya juga sebelumnya sudah menjelaskan mengenai Memasang Komentar Facebook Dibawah Postingan Blog, namun kali ini caranya lebih oke dan top deh , seperti gambar ini,gimana ? tertarik sobat ? kalau tertarik yuk kita belajar buat itu :

Oke deh, langsung ke TKP:

1. pilih rancangan, edit html, centang expand template widget supaya semua kode nimbul, oya jangan lupa back up templatenya, di download full dulu ya buat jaga jaga .

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

3. 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>

 ID fb nya adalah di bagian adres bar profile, contoh misalnya fb saya profilnya ini http://www.facebook.com/berryhardisakha  maka ID saya berryhardisakha , gimana ? mudahkan ?


4. cari kode ini  /* Comment atau #comments
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;}

oke demikian tutorial saya mengenai membuat komentar facebook blogspot yang dapat berjejer dengan komentar di bawah artikel sehingga tampilannya bisa lebih rapi .

referensi