Komentar Blogger Dan Fb Berdampingan

Tampilan komentar yang satu ini mempunyai kelebihan dibanding komentar default blogger, alasannya selain komentar blogger juga tampil komentar Face Book. Sebagai contoh, coba anda perhatikan bab komentar dari EPG Studio. Komentar akan tampil jikalau tombol komentar diklik baik itu komentar blogger maupun komentar Face Book.

Cara menampilkan komentar menyerupai referensi tadi, sanggup anda ikuti tipsnya dibawah ini.

1. Masuk ke Blogger.
2. Pilih sajian Template.
3. Download template blog anda terlebih dulu, jikalau takut gagal dengan cara klik Cadangkan/Pulihkan yang berada di bab atas kanan.
4. Setelah proses download selesai, klik Edit Template.
5. Cari instruksi ]]></b:skin>   pada template blog anda (gunakan CTRL+F untuk mempercepat pencarian).
6. Copy instruksi dibawah ini lalu paste sempurna 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 cita-cita anda. Warna itu dipilih semoga sesuai dengan warna tampilan EPG Studio
   2. Kode #blogger-comments-page { padding: 0px 5px; display: none;}   merupakan instruksi untuk menyembunyikan komentar dari Blogger dikala postingan dibuka. Jika anda ingin menampilkan komentar dari Blogger, hapus instruksi tersebut.
   3. Kode #fb-comments-page { padding: 0px 5px; display: none;}  merupakan instruksi untuk menyembunyikan komentar dari Face Book dikala postingan dibuka. Jika anda ingin menampilkan komentar dari Face Book, hapus instruksi tersebut. 
7. Selanjutnya cari instruksi </head>
8. Copy instruksi dibawah ini, lalu paste sempurna 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 instruksi ID Face Book anda  dengan angka dari ID Face Book anda.
   2. Cara mendapat ID Face Book :
      • Pada alamat Face Book anda misalnya  http://www.facebook.com/ades.sambas
      • Ganti www dengan kata graph sehingga menjadi menyerupai ini http://graph.facebook.com/ades.sambas. Tekan enter.
      • Berikutnya akan muncul data fb anda, copy formasi 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 lalu copy instruksi diwah ini dan paste sempurna dibawah instruksi <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 instruksi <div class='comments' id='comments'>   yang pertama, coba pada instruksi <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 kemudahan 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...!!!
Sumber http://epg-studio.blogspot.com/

Bagikan Artikel ini