Modifikasi Tampilan Komentar Responsive Facebook Berdampingan Dengan Blogger

{ Jangan Malas Membaca Ya }

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 menyerupai pada gambar diatas.

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 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 aba-aba 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 aba-aba menyerupai itu, jadi letakkan aba-aba 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 :