Masih ingat dengan tulisan Membuat Toggle Spoiler Untuk Menampilkan dan Menyembunyikan Widget Sidebar? Nah, kali inipun saya akan menuliskan hal yang sama. Bedanya, sekarang menggunakan framework dari jQuery. Dengan adanya "polesan" jQuery ini, toggle akan tampil lebih dinamis dan menarik. Beda dengan yang hanya menggunakan javascript saja, kelihatan kaku dan monoton.
Sebagai contoh dari toggle dengan polesan jQuery ini bisa dilihat pada sidebar dengan judul "Yang Baru Dari Sastra Culun".
Jika sobat ingin membuat toggle seperti itu, lakukan hal-hal berikut:
- Dari halaman Dasbor, pilih Template - Edit HTML (untuk amannya, lakukan duplikasi template terlebih dahulu).
- Beri tanda centrang pada Expand Template Widget.
- Setelah itu tambahkan CSS berikut di atas kode ]]></b:skin>:
/*=== Toggle Sidebar jQuery ===*/ #toggle-sidebar {} #toggle-sidebar h2 {cursor:pointer; display:block;} #toggle-sidebar h2:hover {opacity: 0.75; -o-opacity: 0.75; -moz-opacity: 0.75; -webkit-opacity: 0.75; filter: alpha(opacity=75);} #toggle-sidebar h2:active {color:#888} /*warna huruf ketika aktif*/ .toggle-content {} - Lalu tambahkan script berikut di bawah kode ]]></b:skin> tadi:
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/> <script type='text/javascript'> jQuery(document).ready(function(){ jQuery(".toggle-content").hide(); jQuery("#toggle-sidebar>h2").click(function(){ jQuery(this).toggleClass("active").next().slideToggle("slow"); }); }); </script>Jika sudah menggunakan script jQuery, hapus salah satunya.
- Setelah itu cari kode widget yang akan dibuatkan toggle seperti ini (atau yang mirip, karena tiap template kadang berbeda):
<b:includable id='main'> <!-- only display title if it's non-empty --> <b:if cond='data:title != ""'> <h2 class='title'><data:title/></h2> </b:if> <div class='widget-content'> <data:content/> </div> <b:include name='quickedit'/> </b:includable> - Jika sudah ketemu tambahkan kode berwarna merah sehingga menjadi seperti ini:
<b:includable id='main'> <div id='toggle-sidebar'> <!-- only display title if it's non-empty --> <b:if cond='data:title != ""'> <h2 class='title'><data:title/></h2> </b:if> <div class='toggle-content'> <div class='widget-content'> <data:content/> </div> </div><!--/toggle-content--> </div><!--/toggle-sidebar--> <b:include name='quickedit'/> </b:includable>
- Simpan hasil kerjaan ini lalu ucapkan Alhamdulillah...
Jika ingin membuatkan toggle untuk widget lainnya, lakukan hal yang sama seperti pada langkah ke-5 dan ke-6.
Ok, segitu aja sob. Semoga bermanfaat .....
5 komentarPosting Komentar
Terima kasih atas infonya..
Salam kenal yach..
@AdamSama-sama sob...
Salam kenal juga
aduhhh ente gimana sih script javascript kok dimasukin ke b:skin ? harusnya /body dong. apa boleh seperti itu ?
@Abdul Haris Alfakhor bukan di atas skin bro... tapi di bawah skin.
Bisa ko, coba aja
Thank's Gan Tutornya..
Tambahkan Komentar
Terimakasih atas semua apresiasi yang sobat berikan.