Membuat Menu Dropdown Acordion

Jika anda tertarik membuat menu acordion seperti wigwet di blog saya anda bisa memasangnya caranya sangatlah mudah. Ikuti langkah-langkah berikut ini

1. Login ke Blogger
2. Tata Letak --> Edit HTML
3. Copykan code dibawah tepat di atas kode </head>

<script language='javascript' src='http://www.geocities.com/wawunx_5155/jquery.js' type='text/javascript'/>
<script language='javascript' src='http://www.geocities.com/wawunx_5155/ddacordion.js' type='text/javascript'/>
<script language='javascript' src='http://www.geocities.com/wawunx_5155/ddcordian2.js' type='text/javascript'/>

4. Kemudian copy kode dibawah ini tepat di atas kode ]]></b:skin>

/*----------------DropDown(Acordion)----------------*/
.alert { background: #DDE4FF;
text-align: left;
padding: 10px 10px 10px 10px;
border-top: 1px dotted #223344;border-bottom: 1px dotted #223344;border-left: 1px dotted #223344;border-right: 1px dotted #223344;}
.arrowlistmenu{
width: 320px; /*ukuran lebar dari menu*/
}
.arrowlistmenu .menuheader{ /*CSS class for menu headers in general (expanding or not!)*/
font: bold 14px Arial;
color: white;
background: black url(http://i287.photobucket.com/albums/ll147/rum_marewa/titlebar.png) repeat-x center left;
margin-bottom: 10px; /*bottom spacing between header and rest of content*/
text-transform: uppercase;
padding: 4px 0 4px 10px; /*header text is indented 10px*/
cursor: hand;
cursor: pointer;
}
.arrowlistmenu .openheader{ /*CSS class to apply to expandable header when it's expanded*/
background-image: url(http://i287.photobucket.com/albums/ll147/rum_marewa/titlebar-active.png);
}
.arrowlistmenu ul{ /*CSS for UL of each sub menu*/
list-style-type: none;
margin: 0;
padding: 0;
margin-bottom: 8px; /*bottom spacing between each UL and rest of content*/
}
.arrowlistmenu ul li{
padding-bottom: 2px; /*bottom spacing between menu items*/
}
.arrowlistmenu ul li a{
color: #A70303;
background: url(http://i302.photobucket.com/albums/nn120/wawunx/arrowbullet.png) no-repeat center left; /*custom bullet list image*/
display: block;
padding: 2px 0;
padding-left: 19px; /*link text is indented 19px*/
text-decoration: none;
font-weight: bold;
border-bottom: 1px solid #dadada;
font-size: 90%;
}
.arrowlistmenu ul li a:visited{
color: #A70303;
}
.arrowlistmenu ul li a:hover{ /*hover state CSS*/
color: #A70303;
background-color: #F3F3F3;
}

Jika Selesai Simpan Template

4. klik Tata Letak --> Elemen Halaman --> Tambah Gadget code dibawah ini

<div class="arrowlistmenu">
<h3 class="menuheader expandable">Judul1</h3>
<ul class="categoryitems">
<li><a href="http://gratisz.blogspot.com">Isi1</a></li>
<li><a href="http://gratisz.blogspot.com">isi2</a></li>
</ul>

<h3 class="menuheader expandable">Judul2</h3>
<ul class="categoryitems">
<li><a href="http://gratisz.blogspot.com">isi1</a></li>
<li><a href="http://gratisz.blogspot.com">isi2</a></li>
</ul>
</div>

Cattan:
Warna ini: Merupakan Judul dari menu
Warna ini: Merupakan alamat dari menu isi
Warna ini: Merupakan bacgroud dari menudropdown
Kode Ini: Jika menu dropdownnya mau tambah copy kode