Cara Membuat Komentar Facebook di Blogspot lebih Rapi dan Keren

12/07/2011 BERRY HARDISAKHA 17 COMMENTS

Cara Membuat Komentar Facebook di Blogspot. 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 mengenaicara memasang komentar facebook di bawah postingan blog, namun kali ini caranya lebih oke dan top deh , seperti gambar ini .

nah itu gambar yang ada komentar facebook di bawah postingan di blog saya, gimana ? tertarik sobat ? kalau tertarik yuk kita belajar buat itu :

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("#fb-comments");' 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("#blogger-comments");' 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 == "item"'>
<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 blogspotyang dapat berjejer dengan komentar di bawah artikel sehingga tampilannya bisa lebih rapi .

referensi : Kumpulancara.com

Share this Article now on :