Cara Membuat Kotak Komentar Blogger Berdampingan dengan Komentar Facebook Style

Also Read Other Articles

Membuat Kotak komentar lebih menarik memang target utama utama supaya sobat blogger sudi kiranya untuk meninggalkan saran, kritik, pesan, pertanyaan dan berbagai macam interaksi,  sebetulnya tak begitu lama untuk bisa membuat kotak komentar blogger dengan facebook berdampingan dan style, dalam hal ini kamipun belajar untuk bisa memodifikasi kotak komentar tersebut, namun beberapa kendala kami temui sampai akhirnya kami mendapatkan yang kami inginkan. Sobat blogger kepengen untuk mencobanya... Mari kita lihat bersama-sama..

1. Masuk Ke Akun Blogger Sobat
2. Masuk Dasbor, Klik Rancangan
3. Edit HTML, (Peringatan Download templat)

4. Apabila Sudah di download beri tanda centang (Exspand)
5. Cari Kode berikut <div class='comments' id='comments'>
6. Sudah ketemu, biasanya kode di atas ada 2,  tergantung templat masing-masing.
7. Copy Code dibawah, & tempatkan di bawah kode <div class='comments' id='comments'> no 2

Klik Show Untuk Melihat Kode

<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='ID SOBAT BLOGGER ' property='fb:admins'/>
<script type='text/javascript'>
function commentToggle(selectTab) {
$(&quot;.comments-tab&quot;).addClass(&quot;inactive-select-tab&quot;);
$(selectTab).removeClass(&quot;inactive-select-tab&quot;);
$(&quot;.comments-page&quot;).hide();
$(selectTab + &quot;-page&quot;).show();
}
</script>
<style>.comments-page { background-colorscheme=dark;}
#blogger-comments-page { padding: 0px 5px; display: none;}
.comments-tab { float: left; border:2px inset #0dc3ff;padding:5px;text-align:center;-moz-border-radius-topleft:0px;-moz-border-radius-topright:10px;-moz-border-radius-bottomleft:10px;-moz-border-radius-bottomright:0px}
.comments-tab-icon { height: 14px; width: auto; margin-right: 3px;}
.comments-tab:hover { background-color: #000000;}
.inactive-select-tab { background-color: #FF8000;}</style>

 

8. Gantilah ID Sobat Blogger

9. Sesuaikan Jenis warna Yang diinginkan, Pratinjau, lalu Klik Simpan

Lihatlah hasilnya; persis punya saya he..he..he..
Selamat Mencoba dan Salam Sukses !!!