Menu accordion top banget

Dengan kerendahan hati,Kumpulan Code kali ini akan membahas tentang ,Menu accordion top banget semoga artikel ini bermanfaat bagi sobat semua,dan jika berkenan setelah sobat membaca sudilah kiranya untuk meninggalkan jejak pada kotak komentar dan Insya Alloh saya akan berkunjung balik ke blog/web sobat sebagai tanda terima kasih saya atas kunjungannya

Dalam membuat suatu blog sangat lah penting jika kita menata serapi mungkin sebuah blog agar terlihat rapi dan mudah bagi pengunjung untuk membaca menu menu yang ada di blog tersebut .Salah satu caranya adalah di buatnya sebuah menu yang sangat simpel dan mudah di temukan .Menu yang kita beri nama Menu accordion top banget tersebut sangat lah mudah cara membuatnya ,nah buat sobat blogger yang ingin membuatnya silahkan ikuti petunjuk seperti di bawah ini :

Login ke blogger.com dengan ID sobat tentunya
setelah masuk ke dasboard pilih tata letak kemudian tambah gadget
setelah itu pilih Html Java script lalu masukkan kode dibawah ini

<style type="text/css">
#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;}
</style>
<script type="text/javascript" src="http://yourjavascript.com/121511228073/accordion-menu.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>
<div id="accordion">
<h2>judul 1</h2>
<div class="content">
Isi konten 1
</div>
<div id="accordion">
<h2>Judul 2</h2>
<div class="content">
Isi konten 2
</div>
<div id="accordion">
<h2>Judul 3</h2>
<div class="content">
Isi konten 3
</div>
<div id="accordion">
<h2>Judul 4</h2>
<div class="content">
Isi konten 4
</div>
<div id="accordion">
<h2>Judul 5</h2>
<div class="content">
Isi konten 5
</div>
</div></div></div></div></div>