Cara Mudah Memasang Kotak Komentar Facebook Responsive di Blog

Komentar Facebook

Kotak komentar facebook dalam dunia blogging adalah sesuatu yang tidak asing lagi, banyak para blogger yang telah memasangnya di blog mereka. Bahkan, sebagian dari para kreator template ada yang menyematkan kotak komentar ini secara langsung dalam template buatan mereka. Sebagai contoh, sebut saja Template BroSense karya Master Blogger Indonesia, Mas Sugeng.

Terlepas dari kelebihan dan kekurangan pemasangan kotak komentar facebook ini yang sudah banyak dibahas di blog-blog tutorial lainnya. Di sini saya hanya akan memberikan tutorial bagi sobat blogger yang ingin berkreasi sendiri dan memodifikasi tampilan blog yang dimiliki dengan memasang kotak komentar facebook di blognya.

Langsung saja, ikuti langkah-langkah berikut.

Cara Mudah Memasang Kotak Komentar Facebook Responsive di Blog

1.Masuk Lay Out Edit HTML

2.Cari kode di bawah ini (tekan paduan tombol Control + F agar lebih mudah)

<div class='comments' id='comments'>

3.Letakkan kode di bawah ini tepat di bawah kode yang ada pada langkah ke-2 tadi

<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://alqabas.com/wp-content/uploads/2016/04/icon-facebook.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.mlkjoller.com/images/Blogger-icon-Small.png'/> <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='2' width='100%'/>

</b:if>

</div>

<div class='comments comments-page' id='blogger-comments-page'>

<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>

<script src='http://code.jquery.com/jquery-latest.js'/>

<meta content='ID FACEBOOK' 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>

<style>.comments-page { background-color: #f2f2f2;}

#blogger-comments-page { padding: 0px 5px; display: none;}

.comments-tab { float: left; padding: 5px; margin-right: 3px; cursor: pointer; background-color: #f2f2f2;}

.comments-tab-icon { height: 14px; width: auto; margin-right: 3px;}

.comments-tab:hover { background-color: #eeeeee;}

.inactive-select-tab { background-color: #d1d1d1;}</style>

4.Ganti kata ID FACEBOOK dengan ID Facebook kalian

5.Simpan template

6.Selesai

Bagaimana? Mudah bukan memasang kotak komentar facebook responsive di blog?

Kalian juga bisa mengkreasikan tampilan ikon facebook dan ikon blogger yang terdapat dalam script di atas, caranya adalah dengan mengganti URL yang berwarna HIJAU dengan URL ikon facebook yang kalian inginkan dan mengganti URL ikon blogger yang berwarna ORANYE dengan URL ikon blogger lain yang kalian kehendaki.

Oh iya, sebelum memasang script kotak komentar facebook responsive di atas, lebih baik sobat blogger mendownload terlebih dahulu template yang ada, sekedar untuk berjaga-jaga apabila terjadi salah penerapan dan error saat mengikuti tutorial di atas, sehingga nantinya sobat blogger sekalian bisa langsung mengembalikan tampilan blog seperti sedia kala tanpa perlu repot-repot berenang di lautan kode HTML.

Sekian tutorial kali ini, selamat mencoba dan semoga berhasil.

Baca Juga:

Share on Facebook

Share on Twitter

Share on Google+

Share on LinkedIn

Subscribe to receive free email updates: