Cara Mudah Menggabungkan Komentar Facebook dan Komentar Blogger

Cara Mudah Menggabungkan Komentar Facebook dan Komentar Blogger merupakan tutorial Blogger yang akan Tutor Blogger jelaskan kali ini. Yang artinya kita hanya memerlukan satu kolom komentar
saja untuk menempatkan dua komentar sekaligus yaitu komentar facebook dan komentar blogger.

Trik ini sangat berguna, sebagai contoh untuk template yang sudah terlalu penuh dengan widget, penempatan kolom komentar facebook dan komentar blog menjadi satu bisa menjadi solusi. Selain itu pengunjung bisa bebas memilih apakah mereka ingin berkomentar menggunakan akun google atau akun facebook.

Baiklah silahkan ikuti langkah-langkah berikut ini :

1. Masuk ke Blogger, pilih blog yang ingin Anda edit. Untuk keamanan bila terjadi kesalahan edit, buat tempalte cadangan dengan mengklik "cadangkan/pulihkan", simpan file template cadangan tersebut.
2. Kemudian klik Template -- Edit HTML -- Lanjutkan -- Centang kotak kecil "Expand Templates Widget ".
3. Cari kode di bawah ini :
<div class='comments' id='comments'>

jika terdapat dua kode, pilih saja yang pertama !!
4. Kemudian masukkan kode berikut ini dibawah kode tersebut :
   <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'>
   Catatan :
   - width='400' dapat disesuaikan dengan lebar halaman artikel blog Anda.
   - Untuk menambah efek scroll pada kolom komentar Anda bisa mengganti kode:
   <div class="comments-page" id="fb-comments-page">
   dengan kode: <div class="comments-page" id="fb-comments-page" style="max-height: 230px; overflow: auto;">
   Tetapi jika tidak ingin menambah scroll, silahkan di abaikan saja.
5. Selanjutnya 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 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>
   Catatan : 
   Ganti tulisan ( MASUKKAN ID FACEBOOK ANDA ) dengan ID Facebook Anda.
6. Kemudian untuk berikutnya cari kode: /* Comment atau kode: #comments , bila tidak menemukan kode tersebut, Anda bisa sesuaikan dengan kode yang ada di template Anda. Cari saja kode yang semirip mungkin. Setelah menemukan kode tersebut, masukkan kode berikut ini dibawahnya.
   .comments-page {} #blogger-comments-page {display: none;} .comments-tab {float:left; padding: 5px; margin-right: 3px; cursor: pointer; background-color: #f2f2f2; border-radius:4px;} .comments-tab-icon { height: 16px; width: auto; margin-right: 3px;} .comments-tab:hover { background-color: #eeeeee;} .inactive-select-tab { background-color: #d1d1d1;}

   
   
7. Sebelum disimpan, Anda bisa klik Pratinjau dulu untuk memastikan tidak terjadi kesalahan edit. Setelah tidak ada masalah, kilk save / simpan template. Lihat artikel Anda yang sudah berisi komentar, atau Anda bisa uji coba membuat komentar dengan akun blog dan akun facebook untuk melihat hasilnya.

Langkah-langkah untuk Cara Mudah Menggabungkan Komentar Facebook dan Komentar Blogger telah selesai.
Semoga Bermanfaat...