Cara Memasang Komentar Facebook Berdampingan Dengan Komentar Blog

Cara ini memang bagus untuk tampilan blog kita, kelihatan nya lebih rapi di bandingkan komentar facebook di atas dan komentar blog di bawah, ok deh langsung saja menuju tutorial nya tapi inget... ini tergantung template yang kalian pakai, kalau template nya support pasti kotak komentar kalian berubah.

 Contoh Gambar 1  : facebook comment

Contoh Gambar 2 : blog comment

1. Pasti nya kalian sudah login di blogger.com
2. Pilih Template untuk jaga - jaga sebaiknya kalian unduh dulu template kalian
3. Edit HTML centang Expand Template Widget 
4. Gunakan CTRL + F untuk mencari kode <div class='comments' id='comments'> biasa nya kode <div class='comments' id='comments'> ada dua, karena di template saya ada dua, inget... pilih yang kedua atau yang paling bawah.
5. Lalu letakan kode di bawah ini, di bawah kode yang kalian cari tadi yaitu <div class='comments' id='comments'> 
 

<!-- comment box lined http://yandyndy.blogspot.com- start -->
<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='5' width='500'/>
 </b:if>
</div>
 <div class='comments comments-page' id='blogger-comments-page'>
 <!-- comment box lined http://yandyndy.blogspot.com- end -->

  Note*  kode posts='5' menampilkan jumlah komentar dan kode width='500' itu adalah lebar kotak komentar, jadi kalian sesuaikan masing - masing.

6. Setelah itu cari kode /* Comments
----------------------------------------------- */ kalau misalkan tidak ada, kalian cari yang mirip - mirip, lalu letak kan kode di bawah ini di atas kode tadi.

&lt;!-- comment box lined http://yandyndy.blogspot.com- start --&gt; .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;} &lt;!-- comment box lined http://yandyndy.blogspot.com- end --&gt;

7. Cari kode </head> lalu letak kan kode di bawah ini di atas nya.

<!-- comment box lined http://yandyndy.blogspot.com- start -->
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<script src='http://code.jquery.com/jquery-latest.js'/>
<meta content='http://www.facebook.com/ndy.outsider' property='fb:admins'/>
<script type='text/javascript'>
function commentToggle(selectTab) {
$(&quot;.comments-tab&quot;).addClass(&quot;inactive-select-tab&quot;);
$(selectTab).removeClass(&quot;inactive-select-tab&quot;);
$(&quot;.comments-page&quot;).hide();
$(selectTab + &quot;-page&quot;).show(); }
</script>
<!-- comment box lined http://yandyndy.blogspot.com- end -->

 Note* kode id facebook "http://www.facebook.com/ndy.outsider" ganti dengan url facebook kalian, caranya kalian bisa masuk facebook kalian, klik profil lalu copy id facebook kalian yang ada di addres bar, Sebelum kalian save, alangkah baiknya kalian pratinjau dulu, ok deh cukup sekian dulu tutorial nya, selamat mencoba