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.








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


5 komentar:

24 Mei 2012 pukul 21.10 Reply To This Comment Unknown mengatakan...

tks yah sob.. mampir di blogq
ikhwan-insancita.blogspot.com

24 Mei 2012 pukul 22.52 NDY mengatakan...

@ikhwan insancita Ok sob sama-sama,,
langsung TKP sob...

20 Januari 2013 pukul 02.37 Reply To This Comment Unknown mengatakan...

Thankkss...tapi gmn kalo biar berdampingan ya gan antara koment facebook dan blog?

10 Februari 2013 pukul 17.21 Reply To This Comment Anonim mengatakan...

thnks ya atas infonya,,,langsung dicoba ni,,,

25 Mei 2013 pukul 01.09 Reply To This Comment Yerie H mengatakan...

gan,pyku blogspot kok gak ada tulisan expand template widget? udh gitu div class comments jg gak ada,adanya column
apa itu?

:a: :b: :c: :d: :e: :f: :g: :h: :i: :j: :k: :l: :m: :n: :)) :)] ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} ~x( :-t b-( :-L x( =))

Tinggalkan jejak Sahabat di Bawah ini. Buat Sahabat yang Mempunyai Blog Insya allah saya kunjungi Balik