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, aku ingin sedikit memodifikasi tampilan Tab komentar semoga lebih lezat dipandang. Sebenarnya cara pemasangannya sama saja dengan cara memasang komentar facebook yang lain, namun aku sedikit mengubah tampilan pada CSSnya saja.

Cara Memasang komentar Facebook Berdampingan dengan Blogger

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

2. Buka Menu Template kemudian klik Edit HTML. Letakkan CSS berikut sebelum instruksi ]]></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 instruksi berikut diatas instruksi </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 instruksi <div class='comments' id='comments'>. Anda akan menemukan dua instruksi menyerupai itu, jadi letakkan instruksi berikut dibawah kedua instruksi <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 perihal Modifikasi Tampilan Komentar Facebook Berdampingan Dengan Blogger. Semoga sanggup mempunyai kegunaan bagi Anda dan jangan lupa untuk berkomentar sebelum menerapkan tutorial diatas. Terima Kasih.