maaf demo tak tersedia
di atas kode ]]></b:skin>
/*=== Toggle Sidebar jQuery ===*/
#toggle-sidebar {}
#toggle-sidebar h2 {cursorointer; 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 {}
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.
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'><!--/toggle-content-->
<!-- 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'><!--/toggle-content-->
<div class='widget-content'>
<data:content/>
</div>
</div><!--/toggle-content-->
</div><!--/toggle-sidebar-->
<b:include name='quickedit'/>
</b:includable>
Simpan .
Jika ingin membuatkan toggle untuk widget lainnya, lakukan hal yang sama seperti pada langkah ke-5 dan ke-6.
Tambahkan komentar Komentator
Konversi KodeOOT