Dari kemarin saya kepikiran kalo listing komentar di blog kalo kepanjangan (banyak yang komentar) suka kurang sip pada saat hendak mengisi komentar. Otomatis pengunjung yang mau berkomentar harus rajin men-scroll down halaman sampai ketemu kotak komentar. sempet kebayang juga misalnya kalo ada artikel yang memiliki komentar diatas 100 tentu bisa aja bikin ilfil orang yang mau komentar karena pegel scrolling down halaman.

Walaupun ada alternatif lain seperti menggunakan plugin wordpress Ajah Comments tapi tetap aja saya kurang berani mengambil alternatif tersebut karena alasan ketergantungan versi.

Artikel berikut saya tulis membahas teknik mengatasi permasalahan tersebut menggunakan javascript framework jquery.  Langkah-langkah nya mudah diterapkan dan aman karena teknik ini hanya meng-custom code dibagian theme wordpress-nya saja

Step #1

• siapkan kopi (jika anda peminum kopi) / teh (jika anda peminum teh)…. vodka dan whisky sangat saya tidak rekomendasikan
• siapkan rokok (jika anda perokok) , nyalakan mp3 (saya merekomendasikan lagunya aura kasih – asmara)
• Download file .js-nya disini
• Ekstrak file js-nya (file: jquery-1.2.2.pack.js & animatedcollapse.js)  kemudian copy pada folder theme yang anda mao custom

Step #2

Buka/edit file header.php yang terdapat pada theme anda lalu tambahkan code berikut sebelum tags </head>

<script type="text/javascript"
src="<?php bloginfo('stylesheet_directory'); ?>/jquery-1.2.2.pack.js">
</script>
<script type="text/javascript"
src="<?php bloginfo('stylesheet_directory'); ?>/animatedcollapse.js">
</script>
<script type="text/javascript">
<!--
animatedcollapse.addDiv('komentar_area', 'fade=1,height=100%')
animatedcollapse.init()
//-->
</script>

Step #3

Selanjutnya kita akan membuat link yang melakukan aksi buka-tutup area listing komentar.

Buka file comments.php yang terdapat pada theme anda. Anda bisa saja membuat link bebas untuk buka-tutup area listing komentar mungkin dengan cara :

<a href="javascript:animatedcollapse.toggle('komentar_area')" >
klik untuk melihat komentar </a>

yang penting property link href-nya merujuk pada :
javascript:animatedcollapse.toggle(’komentar_area’)

Step #4

Masih didalam file comments.php . berikut ini mungkin agak rumit karena kita harus mencari bagian code yang mendisplay listing komentar . tentu saja karena struktur code tiap themes berbeda antara satu theme dengan yang lainnya. tapi normalnya cari aja bagian berikut  :

<ul class="commentlist">
.....
</ul>

atau jika tidak ada mungkin theme-nya menggunakan yang ini nih :

<ol class="commentlist">

.....

<ol>

nah, didalam tags <ul> atau <ol> itu lah yang terdapat generated listing comment. begitu kira-kira..

Selanjutnya sebelum dan sesudah  <ul> atau <ol> itu tambahkan code berikut

<div id="komentar_area" style="width: 100%; display:none" >
.............

</div>

titik-titik diatas merupakan area <ul> atau <ol> anda . perhatikan huruf berwarna orange yang berarti code tambahan pada code asli theme .sehingga hasil akhir kode terlihat seperti berikut :

<div id="komentar_area" style="width: 100%; display:none" >

<ul class="commentlist">
.....
</ul>
</div>

atau pada tags <ol> seperti berikut

<div id="komentar_area" style="width: 100%; display:none" >

<ol class="commentlist">
.....
</ol>

</div>

sip deh.. beres sudah.

Selamat mencoba, semoga penjelasan saya tidak membingungkan temans-temans. hasil akhir bisa dilihat di tiap artikel saya. Thx