Cara Membuat Menu Buka Tutup ( Accordion )

Menu buka tutup atau menu dengan efek accordion sangat berguna sekali untuk sebuah blog, yaitu dapat menghemat template dan mempercepat loading blog.

Nah, bagi anda yang tertatarik untuk memasangnya silahkan ikuti caranya dibawah ini:

1. Pertama silahkan buka Edit HTML template anda, lalu cari kode <b:skin> , Bila sudah ketemu silahkan copy kode css dibawah ini tepat diatas kode <b:skin>

#accordion{width:100%;margin:auto;border:0px solid white}
#accordion h2{padding:5px 10px;background-color:#ccc;background-image: url(http://1.bp.blogspot.com/-qtI_UsPdZwc/Tmzg5K8eADI/AAAAAAAABrU/ScrT9X8fBBY/s1600/arrow_right.gif);background-repeat: no-repeat;background-position: right center;color:#000;font:normal 11px Tahoma;border-bottom:1px solid #FFF;cursor:pointer;}
#accordion .content{font:normal 11px Arial;padding:5px 10px;background:#eee;}
#accordion .content ul {list-style:none;margin:0 0 0;padding:0 0 0;}
#accordion .content li {background-image: url(); background-repeat: no-repeat;background-position: left center;margin:0;padding:2px 0 3px 0;text-indent:0px;border-bottom:1px dotted #ccc;line-height:1.3em;}
#accordion .content li a:hover {text-decoration:none;color:#000;}
#accordion h2.active{background-color:#bbb;background-image: url(http://2.bp.blogspot.com/-9If6SXYDklM/Tmzg4W8YwuI/AAAAAAAABrQ/XlCiTeVqtq0/s1600/arrow_down.gif);background-repeat: no-repeat;background-position: right center;font-weight:bold;}

2. Setelah itu cari kode </bodi> , agar cepat gunakan Ctr+F. bila sudah ketemu, copy kode script dibawah ini tepat sebelum atau diatas kode </body>

<script type="text/javascript" src="http://yourjavascript.com/11535536902/accordionstaohids.js"></script>
<script type='text/javascript'>
$(function() {
$('#accordion .content').hide();
$('#accordion h2:first').addClass('active').next().slideDown('slow');
$('#accordion h2').click(function() {
if($(this).next().is(':hidden')) {
$('#accordion h2').removeClass('active').next().slideUp('slow');
$(this).toggleClass('active').next().slideDown('slow');
}
});
});
</script>

3. Setelah itu klik Simpan Template. 4. Langkah selanjutnya silahkan buka menu Tata Letak, lalu Klik Tambah Widget. Lalu Copy kode dibawah ini

<div id="accordion"> <h2>Title 1</h2> <div class="content"> Isi konten 1 </div> <div id="accordion"> <h2>Title 2</h2> <div class="content"> Isi konten 2 </div> <div id="accordion"> <h2>Title 3</h2> <div class="content"> Isi konten 3 </div> <div id="accordion"> <h2>Title 4</h2> <div class="content"> Isi konten 4 </div> <div id="accordion"> <h2>Title 5</h2> <div class="content"> Isi konten 5 </div> </div></div></div></div></div>

Terakhir anda tinggal mengkreasikan sendiri widget yang akan anda simpan pada menu buka tutup tersebut. Selamat mencoba dan semoga berhasil.