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