Komentar Blog Dan FB Berdampingan

Tampilan komentar yang satu ini memiliki kelebihan dibanding komentar default blogger, karena selain komentar blogger juga tampil komentar Face Book. Sebagai contoh, coba anda perhatikan bagian komentar dari EPG Studio. Komentar akan tampil jika tombol komentar diklik baik itu komentar blogger maupun komentar Face Book.



Cara menampilkan komentar seperti contoh tadi, dapat anda ikuti tipsnya dibawah ini.

1. Masuk ke Blogger.
2. Pilih menu Template.
3. Download template blog anda terlebih dulu, jika takut gagal dengan cara klik Cadangkan/Pulihkan yang berada di bagian atas kanan.
4. Setelah proses download selesai, klik Edit Template.
5. Cari kode ]]></b:skin>   pada template blog anda (gunakan CTRL+F untuk mempercepat pencarian).
6. Copy kode dibawah ini kemudian paste tepat diatas kode ]]></b:skin>
   
   
   .comments-page { background-color:black;}
#blogger-comments-page { padding: 0px 5px; display: none;}
#fb-comments-page { padding: 0px 5px; display: none;}
.comments-tab { float: left; padding: 5px; margin-right: 3px; border:2px dotted #2F323D;-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px:
cursor: pointer; background-color:black;}
.comments-tab-icon { height: 14px; width: auto; margin-right: 3px}
.comments-tab:hover { background-color: black;}
.inactive-select-tab { background-color: black;} 
   
   
   Keterangan :
   1. Tampilan warna dari tombol komentar semuanya berwarna hitam/black. Ganti warna tersebut sesuai dengan keinginan anda. Warna itu dipilih agar sesuai dengan warna tampilan EPG Studio
   2. Kode #blogger-comments-page { padding: 0px 5px; display: none;}   merupakan kode untuk menyembunyikan komentar dari Blogger ketika postingan dibuka. Jika anda ingin menampilkan komentar dari Blogger, hapus kode tersebut.
   3. Kode #fb-comments-page { padding: 0px 5px; display: none;}  merupakan kode untuk menyembunyikan komentar dari Face Book ketika postingan dibuka. Jika anda ingin menampilkan komentar dari Face Book, hapus kode tersebut. 
7. Selanjutnya cari kode </head>
8. Copy kode dibawah ini, kemudian paste tepat diatas 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 Face Book anda' 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>
   
   
   Keterangan :
   1. Ganti kode ID Face Book anda  dengan angka dari ID Face Book anda.
   2. Cara mendapatkan ID Face Book :
      • Pada alamat Face Book anda misalnya  http://www.facebook.com/ades.sambas
      • Ganti www dengan kata graph sehingga menjadi seperti ini http://graph.facebook.com/ades.sambas. Tekan enter.
      • Berikutnya akan muncul data fb anda, copy deretan angka pada "id": "100000174912525", Perhatikan gambar dibawah ini :
        
        
      • Simpan Template.
9. Langkah terakhir masih di Edit Template.
10. Kasih tanda centang pada Expand Template Widget.
11. Cari kode  <div class='comments' id='comments'>
12. Kode tersebut ada dua. Pilih yang pertama kemudian copy kode diwah ini dan paste tepat dibawah kode <div class='comments' id='comments'>
    
    
    <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='500'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page' style='overflow:auto;height:300px;'>
    
    Jika gagal pada kode <div class='comments' id='comments'>   yang pertama, coba pada kode <div class='comments' id='comments'>  yang kedua.
    Keterangan
1. Kode num_posts='2'  merupakan jumlah komentar dari Face Book. Ganti angka 2 dengan jumlah komentar yang ingin anda tampilkan.
2. Kode width='500'  merupakan lebar dari kotak kementar dari Face Book. Ganti angka 500 sesuai dengan lebar post anda.
3. Kode style='overflow:auto;height:300px;  merupakan fasilitas scroll pada komentar Blogger. Ganti angka 300 dengan angka yang anda inginkan.
13. Simpan Template.
14. Lihat Bagian Komentar Blog anda.

Selmat mencoba, semoga bermanfaat...!!!

Read more: http://epg-studio.blogspot.com/2012/05/komentar-blogger-dan-fb-berdampingan.html#ixzz28KnVH9uO