Modifikasi Tampilan Komentar Facebook Berdampingan Dengan Blogger

Modifikasi Tampilan Komentar Facebook Berdampingan Dengan Blogger

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.

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 wajahilmu.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'/>
<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='500' 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 '500'.

Baca juga : Cara Modifikasi Tampilan Thread Comments Hack Blogger

5. Klik Save dan lihat Hasilnya.

Cukup sekian artikel kali ini tentang Modifikasi Tampilan Komentar Facebook Berdampingan Dengan Blogger. Semoga dapat berguna bagi Anda dan jangan lupa untuk berkomentar sebelum menerapkan tutorial diatas. Terima Kasih.

Bagikan Artikel ini