Cara Buat Komentar Blogger Disebelah Kotak Komentar FB + Tombol

Kepolover - Nah sobat Kepolover.blogspot.com, ini adalah kelanjutan dari postingan yang saya janjikan pada postingan sebelumnya yaitu Cara Pasang Komentar FB di Blog Lengkap Dengan Moderasi. Pada postingan tersebut dibahas bagaimana tentang cara membuat Aplikasi baru di FB, Mengintegrasikan Aplikasi FB dengan Blog, Memasang kode untuk Moderasi komentar berikut detail dan step2 nya yang sudah saya rinci.

Namun pada postingan tersebut saya hanya menyampaikan tutorial sampai pada tahap ke tiga yaitu sampai dengan memasukkan kode SDK FB. Postingan tersebut secara lengkap detailnya adalah dimulai pada tahap pembuatan Aplikasi FB baru hingga diakhiri pada Pemasangan kode Moderasi supaya pemilik blog bisa mengetahui siapa saja yang berkomentar dan memberikan moderasi yang dikehendaki.

Nah sekaranglah saatnya saya memungkas artikel saya tersebut dengan memberikan 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 <div class='comments' id='comments'> Maka silahkan pilih yang 
     pertama, bila gagal pilih yang kedua.

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

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

Rujukan: http://www.diditrinjano.com/