Cara mudah buat komentar blog dan facebook berdampingan

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

Selamat mencoba dan semoga bermanfaat