Cara Membuat komentar facebook berdampingan dengan komentar blogger

Salam blogger, kali ini saya akan melengkapi posting sebelumnya yaitu cara membuat komentar facebook di blog, kali ini saya lengkapi dengan membuat komentar dari blogger juga sobat. Maksud dari judul di atas adalah kotak komentar yang setelah posting akan ada dua pilihan, yang satu dari blogger dan yang satu lagi dari facebook. Jadi para pengunjung bisa memilih apakah mereka mau comment di kotak facebook atau di kotak yang disediakan blogger dan letak button nya juga berdampingan.

Berikut langkah-langkah membuat komentar facebook berdampingan dengan komentar blogger :

1. Login ke account blogger sobat

2. klik menu Template

 

3. lalu pilih Edit html

   

4. lalu sobat cari kode  ]]></b:skin> (tekan ctrl+f agar lebih mudah)

5. copy kode dibawah ini dan letakan di atas 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;}

6. kemudian sobat cari lagi kode </head>
7. copy kode dibawah ini dan letakan di atas 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='ID FB SOBAT DISINI' 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>

8.  Teks yang bertuliskan ID FB SOBAT DISINI ganti dengan alamat atau url  
    profil facebook sobat.
    misal : https://www.facebook.com/riefkhay.beats
9. yang terakhir cari kode <div class='comments' id='comments'> hasil 
    pencarian pasti ada 2 kode seperti ini, sobat copy kode di bawah ini dan 
    letakan dibawah kode <div class='comments' id='comments'> yang ke 2.

<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='600'/></b:if></div><div class='comments comments-page' id='blogger-comments-page'>

10. Teks merah yang bertuliskan 600 adalah lebar kotak komentar yang akan 
     dibuat, bisa anda ganti dan sesuaikan.
11. kemudian Simpan template

Related Post:

tutorial blog

• PENYEBAB ANJLOKNYA PERINGKAT BLOG
• Contoh Penulisan KODE Background Image
• Daftar widget keren untuk blogger
• Cara mudah Bikin Template Blog Sendiri
• Cara Termudah Membuat Slider Popular Post
• Cara Cepat dan Akurat Memantau Pengunjung Blog/ Website
• Tips Cara Membuat Animasi Semut berjalan di blog
• Cara Mudah Memasang Iklan Melayang di Bawah Footer Blog dengan tombol Close
• Cara Memasang Widget Admin Blog Lagi Online dan Offline
• Cara Mudah Memasang Widget Radio Online Multy Chanel Di Blog/Website
• Cara Memasang Siaran Radio Online di Blog
• Membuat Gambar dan Keterangan di atas Kotak Komentar blog
• Cara Mengetahui Harga Jual Sebuah Blog/Website
• cara mudah membuat judul blog kita berjalan di atas postingan blog
• Cara Mudah dan cepat Pasang TV Online di Blog
• Cara Melaporkan Blog yang Copas tanpa izin Agar di Hapus Google
• Menambah Kolom Diatas dan Dibawah Postingan Blog
• Cara Membuat Tweet Box Dibawah Postingan
• Membuat 3 Kolom di Bawah Header Blogspot
• Cara Membuat Tombol Share di Bawah Postingan Blog
• Cara membuat widget reader di postingan blog
• Cara Memasang Like / Share Button di Setiap Postingan Blogger
• Cara Pasang Widget Lintaskan/Lintas Me di Blog
• Cara membuat link otomatis di blogger