pelajaran sekolah: Membuat Accordion Menu

bikin Accordion menu alias menu yang bisa kebuka dan ketutup secara otomatis

banyak dari teman teman yang menanyai gimana sih
bikin menu yang bisa kebuka dan ketutp secara otomatis
contohnya yang saya pakai di sidebar saya

karena banyak yang bertanya gimana cara membuatnya
oke deh saya akan kasih tutorialnya

pertama
Login dulu di Account blogger anda
kedua
pilih Tata Letak
ketiga
klik Edit HTML

cari tag HTML di bawah ini:
<head>

kalau sudah copy kode yang berwarna merah
dan paste di atas kode
<head>

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

<script src='http://ariistiadi.googlepages.com/ddaccordion1.js' type='text/javascript'>

</script>

kalo masih bingung
seperti ini contoh penempatannya

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>

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

<script src='http://ariistiadi.googlepages.com/ddaccordion1.js' type='text/javascript'>

</script>

<head>

masih bingung juga?
nih saya kasih screen shootnya

terus coba cari kode yang berwarna hijau
</head>

kalo sudah ketemu
copy kode kode yang berwarna biru dan paste di bawah kode yang berwarna hijau
</head>

<script type='text/javascript'>

ddaccordion.init({
headerclass: "headerbar", //Shared CSS class name of headers group
contentclass: "submenu", //Shared CSS class name of contents group
revealtype: "mouseover", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover"
mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover
collapseprev: true, //Collapse previous content (so only one open at any time)? true/false
defaultexpanded: [0], //index of content(s) open by default [index1, index2, etc] [] denotes no content
onemustopen: true, //Specify whether at least one header should be open always (so never all headers closed)
animatedefault: false, //Should contents open by default be animated into view?
persiststate: true, //persist state of opened contents within browser session?
toggleclass: ["", "selected"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
togglehtml: ["", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively ["position", "html1", "html2"] (see docs)
animatespeed: "normal", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
oninit:function(headers, expandedindices){ //custom code to run when headers have initalized
//do nothing
},
onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
//do nothing
}
})

</script>

nih screen shootnya

kalo sudah kita ke tahap selanjutnya
coba anda cari kode di bawah ini
]]></b:skin>

kalo sudah,copy kode kode di bawah ini persis di atas kode
]]></b:skin>

.urbangreymenu{width:100%}

.urbangreymenu .headerbar{font:bold 13px Verdana; color:white; background:#606060 url(http://i242.photobucket.com/albums/ff196/rodadepan/arrowstop.gif) no-repeat 8px 6px; margin-bottom:0; text-transform:uppercase; padding:7px 0 7px 31px}

.urbangreymenu .headerbar a{text-decoration:none; color:white; display:block}

.urbangreymenu ul{list-style-type:none; margin:0; padding:0; margin-bottom:0}

.urbangreymenu ul li{padding-bottom:2px}

.urbangreymenu ul li a{font:normal 12px Arial; color:black; background:#E9E9E9; display:block; padding:5px 0; line-height:17px; padding-left:20px; text-decoration:none}

.urbangreymenu ul li a:visited{color:black}

.urbangreymenu ul li a:hover{color:white; background:black}

nih screen shootnya

dah belum?
kalo sudah klik SIMPAN TEMPLATE

selanjutnya kita klik ELEMEN HALAMAN

kalau sudah di ELEMEN HALAMAN
klik Tambah Gadget

kalau dah di klik
pilih HTML/JavaScript

setelah itu copy kode di bawah ini

<div class="urbangreymenu">

<h3 class="headerbar"><a href="http://www.catatan-belajarku.blogspot.com">Catatan</a></h3>
<ul class="submenu">
<li><a href="http://www.catatan-belajarku.blogspot.com">catatan</a></li>
<li><a href="http://www.catatan-belajarku.blogspot.com">catatan</a></li>
<li><a href="http://www.catatan-belajarku.blogspot.com">catatan</a></li>
<li><a href="http://www.catatan-belajarku.blogspot.com">catatan</a></li>
<li><a href="http://www.catatan-belajarku.blogspot.com">catatan</a></li>
</ul>

<h3 class="headerbar"><a href="http://www.catatan-belajarku.blogspot.com">Catatan</a></h3>
<ul class="submenu">
<li><a href="http://www.catatan-belajarku.blogspot.com">catatan</a></li>
<li><a href="http://www.catatan-belajarku.blogspot.com">catatan</a></li>
<li><a href="http://www.catatan-belajarku.blogspot.com">catatan</a></li>
<li><a href="http://www.catatan-belajarku.blogspot.com">catatan</a></li>
<li><a href="http://www.catatan-belajarku.blogspot.com">catatan</a></li>
</ul>

<h3 class="headerbar"><a href="http://www.catatan-belajarku.blogspot.com">Catatan</a></h3>
<ul class="submenu">
<li><a href="http://www.catatan-belajarku.blogspot.com">catatan</a></li>
<li><a href="http://www.catatan-belajarku.blogspot.com">catatan</a></li>
<li><a href="http://www.catatan-belajarku.blogspot.com">catatan</a></li>
<li><a href="http://www.catatan-belajarku.blogspot.com">catatan</a></li>
<li><a href="http://www.catatan-belajarku.blogspot.com">catatan</a></li>
</ul>

</div>

jangan lupa klik SIMPAN

anda bisa mengganti link <a href="http://www.catatan-belajarku.blogspot.com">catatan</a>
dengan link milik anda sendiri

kalau anda ingin melihat lihat menu yang lain anda bisa
mengunjungi Dynamic Drive

Sumber: www.dynamicdrive.com

NB:belum berhasil? tanyakan saja

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.