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 == "static_page"'> <div id='flip'><span>Komentar</span></div> <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 dapat diamati pada posting “Bentuk Halaman Unik di Blog”.
This post first appeared on Optimasi Blog | Trik Blogger | Tips Blogging | SE, please read the originial post: here
