Content Accordion dengan jquery

Apa kabar sobat?masih bingung bagaimana bisa template hatsune miku magazine style bisa seperti itu?sebenar'a cara'a sudah cukup umum menurut saya.taukah kamu tentang trik Jquery Accordion?yapp,sebenar'a sama saja,trik'a,kalau biasanya diterapkan untuk list menu atau sidebar,maka trik ini saya terapkan ke element" seperti content,posting,sidebar atau sekaligus semuanya.


Sebelumnya saya peringatkan dahulu sebelum mencoba trik ini,backup dahulu template kamu agar tidak terjadi hal - hal yang tidak diinginkan.kemungkinan berhasilnya trik ini tergantung dirimu sendiri,bagi yang sudah familiar/biasa main css dan html,saya yakin sudah mengerti,tapi bagi yang belum,saya sarankan jangan,tapi jika berniat sungguh",silakan berusaha,saya hanya bisa membantu memberikan solusi,bukan bantuan ini itu =___=v.
#atau yang ga mau ribet ,saya sudah sediakan template yang udah jadi'a~:hatsune miku magazine style+demo

-contoh-

Ok,pertama seperti biasa buka blogger=>template=>edit HTML,setelah itu,ikuti intruksi" dibawah ini.

Copy paste semua CSS ini dibawah code ]]></b:skin>

<style type='text/css'>
#panel{
overflow:auto;
display:block;
}
.slide{
margin:0;
padding:0;
}
.btn-slide:hover {background:#CA2968;}
.btn-slide {
cursor: pointer;
text-align: center;
padding: 10px;
display: block;
color: #B3B3A9; /*Warna text*/
background-color: #1F1538; /*warna background tombol menu*/
position: absolute;
z-index: 9;
margin-left: 0px; /*atur posisi dengan margin*/
margin-right: 0px; /*atur posisi dengan margin*/
margin-top: 0px; /*atur posisi dengan margin*/
margin-bottom: 0px; /*atur posisi dengan margin*/
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
width: 50px; /*Lebar*/
height: 50px; /*tinggi*/
line-height: 50px;
border: 5px solid white; /*border atau garis pinggir*/
-webkit-box-shadow: 0 2px 4px rgba(0,0,0,0.5); /*bayangan*/
-moz-box-shadow: 0 2px 4px rgba(0,0,0,0.5);
} /* trik dari djogzs.blogspot.com*/
</style>

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style type='text/css'>

#panel{
overflow:auto;
display:none; /*panel yang disembunyikan dalam keaddan normal*/
}
</style>
</b:if>


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
.btn-slide{display:none;} /*Agar tombol menu hilang di halaman posting*/
</style>
</b:if>

Lalu copy paste juga Jquery dibawah ini diatas code </body>


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>

$(document).ready(function(){

$(&#39;.btn-slide&#39;).click(function(){

$(&#39;#panel&#39;).slideToggle(&#39;slow&#39;);

});

});

</script>

Selanjutnya pengaturan code HTMl'a.perhatikan kode html dibawah ini dan copy paste

//Kode Html dibawah ini,adalah tombol open untuk membuka tutup content//

<div class='slide'><span class='btn-slide'>-OPEN-</span></div>

#untuk mengatur posisi,lebar,tinggi warna dan sebagai'a,kamu tinggal atur css .btn-slide {

kemudian,tentukan content yang akan kamu sembunyikan.

<div id='panel'>

isi content

</div>

#Contoh pada template hatsune miku magazine style

<div id='panel'>


<span id='skiplinks' style='display:none;'>
<a href='#main'>skip to main </a> |
<a href='#sidebar'>skip to sidebar</a>
</span>
<div id='sidebar-right'> /*Sidebar*/
<b:section class='sidebar' id='sidebartop'>
<b:widget id='Profile1' locked='false' title='Profile' type='Profile'/>
</b:section>
</div>
<div id='content-wrapper'> /*wrapper*/
<div id='main-wrap1'>
<div id='main-wrap2'>
<b:section class='main' id='main' showaddelement='no'> /*posting*/
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>
</div>


</div>

Intinya,semua kode html yang ada didalam code <div id='panel'> akan tersembunyi,dan difungsikan seperti .
accordion/ buka tutup.



Setelah itu,simpan dan lihat hasilnya.

#trik ini sudah saya tinjau dan coba",hasil'a 2 template ujicoba berhasil diterapkan.

mohon maaf kalau penjelasan'a agak rumit,tapi teorinya sudah cukup dan dapat dicoba,semoga berhasil,:)