Cara Membuat Kotak Komentar Facebook Dan Blog Berdampingan

Terimakasih Telah Mengunjungi Zink Blog

Cara Membuat Kotak Komentar Facebook Dan Blog Berdampingan - Kali ini Zink Blog posting tentang Tutorial Blogspot, langsung ke materi saja ya?. Untuk tampilan kotak tampilan Blog biasanya hanya ada satu, tapi sekarang Zink Blog akan memberikan tips yaitu menambah Kotak Komentar di blog dengan komentar Facebook, Lihat Contoh :

Klik gambar untuk memperbesar

Kalau anda tertarik anda bisa mendapatkannya dengan membaca sampai akhir artikel ini. Pengunjung/visitor blog akan senang berkomentar di form komentar blog, jika form komentar blog tersebut tidak merepotkan dan membuat jengkel pengunjung karena kotak komentar tersebut terlalu sulit untuk disii sehingga pengunjung malas mendatanginya lagi. Jadi buatlah nyaman pengunjung blog dalam memberikan tanggapan dalam kotak komentar blog anda.

Cara menggabungkan kotak komentar blog dan komentar facebook (FB) yang ada di bawah postingan blog ini selain form komentar blog tersebut akan tampil cantik, juga akan membuat pengunjung merasa enak dan dapat memilih untuk mengisi komentarnya pada kedua kotak komentar yang telah tersedia baik pada kotak komentar blog ataupun pada kotak komentar facebook.

Cara Membuat Kotak Komentar Facebook Dan Blog Berdampingan :

1. Login ke blogger.com atau draft.blogger.com

2. Pilih Template

3. Pilih Edit HTML

4. Centang pada Expand Widget Templates

5. Cari kode ]]></b:skin>

6. Lalu letakkan kode dibawah ini diatas kode ]]></b:skin>

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

Keterangan
Silahkan ubah code #f2f2f2 dengan code warna sesuka anda, tapi jika anda ingin transparant anda hanya mengubahnya ke # saja

7. Lalu cari kode </head>
8. Lalu letakkan kode dibawah ini 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='Silahkan isi dengan ID Facebook anda' 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><span style="font-size: 50%">Widget by <a href="http://maxwebid.blogspot.com" target="_blank" rel="follow">MaxWebID blogspot</a></span>

Keterangan :
Silahkan ganti "Silahkan isi dengan ID Facebook anda" pada Code diatas dengan https://www.facebook.com/IDfacebookanda. Namun jika Anda belum merubah ID Anda maka yang tertera adalah berupa angka.

9. Lanjut dengan langkah yang lain dengan mencari kode <div class='comments' id='comments'>
Jika menemukan 2 kode <div class='comments' id='comments'> maka copy dan paste saja kode dibawah ini pada keduanya dan letakkan dibawah kode <div class='comments' id='comments'> setelah Read More!

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

Keterangan :
1. angka 2 adalah jumlah komentar yang mau ditampilkan di komentar facebook.
2. angka 400 adalah lebar kotak komentar facebook. (sesuaikan dengan lebar template anda)
3. untuk kode warna merah, jika penempatan kode dibawah <div class='comments' id='comments'> yang kedua menemukan kode yang sama, maka hapus salah satunya.

9. Selesai, simpan templates

Penting :
Seperti biasanya untuk susunan template blog rata-rata tidak sama. Jika didalam template blog anda terdapat 2 kode yang sama yaitu kode <div class='comments' id='comments'>, maka untuk lebih mudahnya, letakkan kode-kode pada no.9 tersebut pada kode yang nomor 2 (dua) saja untuk ditempatkan dibawah kode <div class='comments' id='comments'>

apakah anda masih kurang mengerti ? Pasti mengerti lah! Jika error harap Ulangi Tutorialnya atau Comment di korak comment

Successful! Semoga Bermanfaat..