0 Komentar Facebook Feat Komentar Blog

Posted by Blogger Name. Category: Trick And Tips

Bagaimana Cara Membuat Komentar Facebook Berdampingan dengan Komentar Blog seperti gambar di atas? Oke saya akan jawab. Setelah saya searching di Google ternyata ketemu dan saya akan menjawab pertanyaan kalian semua dengan langkah langkah berikut.

1. Login Blogger
2. Menuju Dashboard
3. Menuju Template, lakukan backup terlebih dahulu untuk template blog kalian sebelum di edit, ya untuk jaga jaga jika terjadi kesalahan.
4. Edit HTML, dan Centang Expand Template Widget
5. Cari code ]]></b:skin>
6. Copy code di bawah paste tepat di atas ]]></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;}

7. Cari code </head>
8. Copy code di bawah paste tepat di atas </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 Anda 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>

   Keterangan:
   
   • Tulisan yang berwana merah  ganti dengan ID FB kalian atau ID App atau ID Halaman facebook kalian untuk mengetahui ID kalian gunakan tool Find ID FACEBOOK 


9. Cari code <div class='comments' id='comments'>
10. Paste Code berikut di bawah <div class='comments' id='comments'>, jika ada dua code <div class='comments' id='comments'> letakkan kedua duanya

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

Keterangan:

• 2 adalah jumlah komentar yang ingin di tampilkan nanti, jadi silahkan di ganti sesuai keingnan anda
• 400 adalah ukuran lebar komentar facebook, jadi silahkan di ganti sesuai keingnan anda
•   <div class='comments comments-page' id='blogger-comments-page'> Jika code tersebut sudah ada di blog anda maka hapus dulu kemudian paste codenya


11. Terakhir Save dan Lihat Hasilnya

Sumber : 3vil666

Tweet

Komentar →