hallo saepertinya 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 HTMLdiantara markah berikut.
<!-- posts --><div class='blog-posts hfeed'> … <div class='post-outer'> <b:include data='post' name='post'/> <b:if cond='data:blog.pageType == "static_page"'> <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 == "item"'> <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. Untuk demonstrasi jQuery efek geser buka tutup elemen komentar.Semoga Bermanfaat