cara buat menu dropdown [acordion]

Penasaran dengan adanya dropdown menu . dan ingin menerapkan diblogspot anda caranya cukup mudah kok.............

Berikut cara membuat dropdown menu (acordion) :
1. Kamu harus Login dulu di Blogger.com / Blogspot.com
2. Trus Pilih Layout --> Edit HTML
3. Copy script berikut setelah kode head

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

kemudian klik save template

4. Lalu klik/centang Expand Widget Templates cari kode ]]> setelah ketemu copy kode CSS berikut....lalu paste diatas kode ]]>

.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://i302.photobucket.com/albums/nn120/wawunx/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://i302.photobucket.com/albums/nn120/wawunx/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;}

Kemudian save template anda..

5. Masuk kedalam edit pageElement kemudian masukkan kode ini :

<div class="arrowlistmenu"> <h3 class="menuheader expandable">Judul Menu</h3> <ul class="categoryitems"> <li><a href="http://wawunx.blogspot.com">Isi Menu</a></li> <li><a href="http://wawunx.blogspot.com">Wawunx ngeblog</a></li> </ul>
<h3 class="menuheader expandable">Judul</h3><ul class="categoryitems"><li><a href="http://wawunx.blogspot.com">isi</a></li><li><a href="http://wawunx.blogspot.com">Wawunx ngeblog</a></li></ul> </div>

Coba sekarang lihat hasilnya .....

NB:
- Jumlah Menu bisa sebanyak yang anda suka..copy yang berwarna merah..kemudian paste diatas
- Menu ini berfungsi baik pada browser ini : FF1+ IE6+ Opr9+ Crome+Flock