Tutorial Kotak Komenter FB di seblah Kotak Komentar Blog

tutorial tentang Cara Membuat Kotak Komentar FB Disebelah Kotak Komentar Blogger lengkap dengan tombol buka dan penutup. Sangat bagus memang dengan menggunakan cara ini gan, disamping tanpilannya menjadi elegant, kita juga bisa menghemat tempat. Disana nanti pengunjung bisa memilih antara berkomentar dengan menggunakan kotak komentar FB atau dengan kotak komentar Blogger. Lihat screeshoot:

Nah, itulah gambarnya nantinya, elegan kan? setiap kali ada pengunjung yang berkomentar nanti mereka bisa klik sesuai yang dipilih yaitu FB Comments atau Blogger Comments. Disamping penampilanya sangat bagus ada keuntungan sendiri loh bagi blogger yang memasang kotak komentar FB di blog mereka,. Apa yah???  Gini Gan, dengan menaruh kotak komentar FB pada blog maka setiap kali ada pengunjung yang komentar di kotak FB blog kalian maka secara otomatis url postingan kalian akan muncul dan dishare di FB. Nah bukankan ini juga faktor yang bagus untuk traffic blog kalian....:)

Oke, sekarang langsung saja saya berikan tutorialnya tentang Cara Membuat Kotak Komentar FB Bersebelahan dengan Kotak Komentar Blogger lengkap dengan tombol buka dan penutup.
1. Masuk ke blogger dan pilih Template ----> edit HTML ----> Proceed---->  
    Centang Expand Widget Templates 
    (PERHATIAN: BACK UP DULU TEMPLATE KALIAN)
2. Cari kode <div class='comments' id='comments'>   (Gunakan CTRL+F)
3. Copas kode berikut tepat dibawah kode <div class='comments' id='comments'>
    -Bila ada dua kode maka silahkan pilih yag kedua/bawah.

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

4. Setelah pemasangan kode tersebut, lanjutkan dengan mencari kode </head>
5. Bila sudah ketemu maka copas kode berikut tepat diatas kode </head>

<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<script src='http://code.jquery.com/jquery-latest.js'/>
<meta content='YOUR ID FB PROFILE' 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>

Penting!!
- Ganti YOUR ID FB PROFILE dengan nomor ID FB kalian. Bila nggak tahu cara dapetin kodenya klik disini untuk caranya.

5. Sesudah itu lanjuntkan dengan memasang kode CSS berikut. Untuk memasangnya cari kode #comment atau .comment dan letakkan kode berikut dibawahnya atau diatasnya (terserah kalian).

.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;}

Selesai dan selamat mencoba semoga berhasil