Beranda
Tip's - Trick's

Modifikasi Tampilan Komentar Responsive Facebook Berdampingan Dengan Blogger

2 minute read
{ Jangan Malas Membaca Ya }

Terlepas dari banyaknya tutorial seputar cara memasang komentar facebook yang berdampingan dengan komentar blogger, saya ingin sedikit memodifikasi tampilan Tab komentar agar lebih enak dipandang. Sebenarnya cara pemasangannya sama saja dengan cara memasang komentar facebook yang lain, namun saya sedikit mengubah tampilan pada CSSnya saja seperti pada gambar diatas.

Cara Memasang komentar Facebook Berdampingan dengan Blogger

1. Sebaiknya sebelum memasang komentar Facebook, Anda sudah harus memiliki App ID Facebook. Bila belum memilikinya, silahkan buat di https://developers.facebook.com/apps.

2. Buka Menu Template lalu klik Edit HTML. Letakkan CSS berikut sebelum kode ]]></b:skin> atau </style>.
/* CSS Facebook Comments by co-paz.blogspot.com */
#blogger-comments-page {display:none;padding:20px}
#fb-comments-page{padding:20px;}
.facebook-tab {float:left;cursor:pointer;width:50%;padding:25px;font-weight:bold;text-align:center;color:#fff;background-color:#516ca4;}
.facebook-tab:hover {background-color:#6881b4;}
.blogger-tab {float:left;cursor:pointer;width:50%;font-weight:bold;padding:25px;text-align:center;color:#fff;background-color:#fda352;}
.blogger-tab:hover{background-color:#fdb879;}

3. Kemudian letakkan kode berikut diatas kode </head>.
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'/>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1&amp;version=v2.10'/>
<meta content='App ID Facebook Anda' property='fb:app_id'/>
<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 :
Gantilah " App ID Facebook Anda " dengan App ID Facebook yang telah Anda buat.

4. Carilah kode <div class='comments' id='comments'>. Anda akan menemukan dua kode seperti itu, jadi letakkan kode berikut dibawah kedua kode <div class='comments' id='comments'>.
<div class='facebook-tab' id='fb-comments' onclick='javascript:commentToggle(&quot;#fb-comments&quot;);' title='Komentar Dari Facebook'>
<fb:comments-count expr:href='data:post.url'/> Komentar di Facebook
</div>
<div class='blogger-tab' id='blogger-comments' onclick='javascript:commentToggle(&quot;#blogger-comments&quot;);' title='Komentar Dari Blogger'>
<data:post.numComments/> Komentar di Blogger
</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'/><div align='left'><font style='color:#516ca4;font-weight:600;font-size:18px;'><center>Silahkan Berkomentar Melalui Akun Facebook Anda</center></font></div>
<fb:comments class='fb-comments' data-num-posts='3' data-width='100%' expr:href='data:post.url' />
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>
<div align='left'><font style='color:#fda352;font-weight:600;font-size:18px;'><center>Silahkan Tinggalkan Komentar Anda</center></font></div>
Keterangan :
  • Ganti '3' dengan jumlah komentar facebook yang ingin Anda tampilkan
  • Sesuaikan lebar komentar facebook dengan mengubah '100%'.

5. Klik Save dan lihat Hasilnya.

Selamat Mencoba, Semoga Bermanfaat... ^_^

4 komentar

  1. Alhamdulillah Makasih mas, setelah ane putar" cape cari yg kek gini yg work. akhirnya ketemujuga Bermanfaat :) kunjungi jga www.anonimcyber.com
    • Sama-sama Mas :D, Sankyou udh mampir diblog ane yang miskin ini hhihi, Alhamdullah kalau bermanfaat mas :)
    • Gan saya coba cara diatas kok reply komentar jadi buka ke tab baru ya.
    • Coba diperiksa lagi Source Codenya gan, mana tau ada yg ketinggalan, karna koding sangat sensitif, kalau udah pas tapi gk bisa, berarti itu ada kemungkinan bentrok (gak cocok/gak jodoh) dengan templatenya gan, saya sering juga ngalamin yg seperti itu, jadi harus pilih salah 1 gan,. coba aja dulu gan yg teliti dan jgn lupa di backup ya :) sankyou