Cara Membuat Menu accordion

Langkah awal membuat Menu accordion ini adalah sebagai berpikut:

1. Masuk ke edit html
2. jangan centang Expand Widget Templates
3. Masukan kode di bawah tepat di atas kode ]]></b:skin>

/*accordion menu<br /> ********************/<br /> .verticalaccordion>ul {<br /> margin: 0;<br /> padding: 0;<br /> list-style:none;<br /> width: 500px;<br /> }<br /> <br /> .verticalaccordion>ul>li {<br /> display:block;<br /> overflow: hidden;<br /> margin: 0;<br /> padding: 0;<br /> list-style:none;<br /> height:40px;<br /> width: 500px;<br /> <br /> /* Decorative CSS */<br /> background-color:#f0f0f0;<br /> <br /> /* CSS3 Transition Effect */<br /> transition: height 0.3s ease-in-out;<br /> -moz-transition: height 0.3s ease-in-out;<br /> -webkit-transition: height 0.3s ease-in-out;<br /> -o-transition: height 0.3s ease-in-out;<br /> <br /> }<br /> <br /> .verticalaccordion>ul>li>h3 {<br /> display:block;<br /> margin: 0;<br /> padding:10px;<br /> height:19px;<br /> <br /> /* Decorative CSS */<br /> border-top:#f0f0f0 1px solid;<br /> font-family: Arial, Helvetica, sans-serif;<br /> text-decoration:none;<br /> text-transform:uppercase;<br /> color: #000;<br /> background: #cccccc;<br /> <br /> /* CSS3 Gradient Effect */<br /> background: -moz-linear-gradient( top, #999999, #cccccc);<br /> background: -webkit-gradient(linear, left top, left bottom, from(#999999), to(#cccccc));<br /> filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff999999, endColorstr=#ffcccccc); /* IE 7 */<br /> -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff999999, endColorstr=#ffcccccc)"; /* IE 8 */<br /> }<br /> <br /> .verticalaccordion>ul>li>div {<br /> margin:0;<br /> overflow: auto;<br /> padding:10px;<br /> height:220px;<br /> }<br /> <br /> .verticalaccordion>ul>li:hover {<br /> height: 280px;<br /> }<br /> <br /> .verticalaccordion:hover>ul>li:hover>h3 {<br /> /* Decorative CSS */<br /> color:#fff;<br /> background: #000000;<br /> <br /> /* CSS3 Gradient Effect */<br /> background: -moz-linear-gradient( top, #454545, #000000); /* FF, Flock */<br /> background: -webkit-gradient(linear, left top, left bottom, from(#454545), to(#000000)); /* Safari, Chrome */<br /> filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff454545, endColorstr=#ff000000); /* IE 5.5 - IE 7 */<br /> -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff454545, endColorstr=#ff000000)"; /* IE 8 */<br /> }<br /> <br /> .verticalaccordion>ul>li>h3:hover {<br /> cursor:pointer;}

Save template

Itu belum selesai sob,, sekarang kita akan membuat menunya langkahnya adalah:
1.Masuk ke page element/element laman
2.Klik add a gadget
3.Lalu cari HTML/ java script dan masukan kode dibawah ini:

<div class="verticalaccordion"><ul> <li><br /> <h3>Isi konten</h3> <div>isi konten di sini bisa juga dengan java script atau yang lainnya</div> </li> <li><br /> <h3>Daftar selingkuhan</h3> <div>pokonya apa saja isi di sini terserah mau di isi apa</div> </li> <li><br /> <h3>Daftar isi</h3> <div>isi apa saja terserah sobat</div><br /> </li> <li><br /> <h3>Daftar istri</h3> <div>isi konten di sini bisa dengan gambar atau yang lainnya</div> </li> </ul></div><br />

Klik save dan lihat hasilnya