jQuery Sliding (Efek Geser) Pada Komentar

Sepertinya sudah tidak asing lagi? Benar, tidak jarang pengelola blog menggunakannya — terutama pada elemen komentar — untuk menambahkan efek geser (sliding) buka & tutup. Penerapan sederhana dapat menggunakan metode jQuery slideToggle(), seperti yang telah diuraikan pada situs w3schools tentang jQuery effects — sliding.

$(selector).slideToggle(speed,callback);

Opsional: kita dapat mengatur parameter kecepatan (warna merah) dengan memasukkan nilai “fast”,“slow”, atau besaran waktu dalam milliseconds.

$("#flip").click(function(){
  $("#panel").slideToggle();
});

#flip dan #panel merupakan selector, kita pun dapat merubahnya menjadi bentuk penamaan lain.

Sekarang bagaimana caranya agar jQuery tersebut dapat mengakomodasi efek geser buka & tutup pada elemen komentar. Kita perlu menambahkan script jQuery ajax, kemudian letakkan saja di atas </head>.

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'/>

Perhatikan pada script jQuery ajax di atas, jangan sampai memasukkan dua kali (double). Oleh karena versinya dapat berbeda-beda.

Tambahkan pula jQuery slideToggle() dan letakkan di atas </body>.

<script type='text/javascript'>
//<![CDATA[
$("#flip").click(function(){
  $("#comments").slideToggle("slow");
});
//]]>
</script>

Simpan template, kemudian centang Expand Widget Templates. Sisipkan kode HTML diantara markah berikut.

<!-- posts -->
<div class='blog-posts hfeed'>
  …
    <div class='post-outer'>
    <b:include data='post' name='post'/>
      
    <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
   <div id='flip'><span>Komentar</span></div> <!-- Hapus kode ini, jika tidak ingin menambahkan jQuery efek geser pada halaman statis -->
      <b:include data='post' name='comment_picker'/>
    </b:if>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
   <div id='flip'><span>Komentar</span></div>
      <b:include data='post' name='comment_picker'/>
    </b:if>
    </div>
  …
</div>

Dan terakhir adalah kustomisasi CSS dengan contoh penerapan sebagai berikut. Letakkan di atas ]]></b:skin>.

#flip {
 background: #fc6;
 cursor: pointer;
 padding: 1.5em 0;
}
#flip:hover,
#flip:focus {
 background: #6cf;
}
#comments {
 display: none;
}

Jangan lupa disimpan. jangan lupa sebelum melakukan hal di atas terlebih dahulu backup template anda. jika terjadi sesuatu atau salah kode. Salam Blogger.