Memasang Accordion Menu

Temen-temen, kali ini mau bagi-bagi tips gimana caranya Memasang Accordion Menu. Sebelumnya udah pada tahu belum apa itu Accordion menu. buat contoh langsungnya kalian bisa liat langsung di blog ini di sidebar kanan atas. kalo mau tahu previewnya, nih gambarnya :



accordion menu bisa ngasi efek buka tutup secara sliding. kurang lebih begitu penjelasannya..hehe.. dengan accordion menu, fitur ini bisa mempercantik blog kamu..hehe..kalau kalian pengen tahu langsung, klik disini.

ok langsung aja gimana cara buatnya:

1. Menu Dashboard, klik Tata Letak, klik Edit HTML.
2. copy paste kode berikut ini sebelum atau di atas kode </head>

<script src='http://blogipank.fileave.com/accmenu/ddaccordion.js' type='text/javascript'/>

<script src='http://blogipank.fileave.com/accmenu/jquery.min.js' type='text/javascript'/>

<script src='http://blogipank.fileave.com/accmenu/menu2.js' type='text/javascript'/>

<style type='text/css'>

.urbangreymenu{
width: 300px; /*lebar menu*/
}

.urbangreymenu .headerbar{
font: bold 13px Verdana;
color: white;
background: #606060 url(http://blogipank.fileave.com/accmenu/arrowstop.gif) no-repeat 8px 6px; /*last 2 values are the x and y coordinates of bullet image*/
margin-bottom: 0; /*bottom spacing between header and rest of content*/
text-transform: uppercase;
padding: 7px 0 7px 31px; /*31px is left indentation of header text*/
}

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

.urbangreymenu ul{
list-style-type: none;
margin: 0;
padding: 0;
margin-bottom: 0; /*bottom spacing between each UL and rest of content*/
}

.urbangreymenu ul li{
padding-bottom: 2px; /*bottom spacing between menu items*/
}

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

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

.urbangreymenu ul li a:hover{ /*hover state CSS*/
color: white;
background: black;
}

</style>

3. Klik Simpan.

Setelah itu, kalian masuk ke Elemen Halaman, Tambah Gadget, HTML/Javascript. Kalian copy paste kode berikut ini:

<div class="urbangreymenu">

<h3 class="headerbar"><a href="URL KALIAN">NAMA LINK</a></h3>
<ul class="submenu">
<li><a href="URL KALIAN">NAMA LINK</a></li>
</ul>

</div>

Kalian Tinggal ganti yang berwarna merah sesuai kebutuhan kalian. Untuk menambahkan menu utama, kalian bisa copy paste kode :

<h3 class="headerbar"><a href="URL KALIAN">NAMA LINK</a></h3>

Untuk menambahkan sub menu, kalian bisa copy paste kode :

<li><a href="URL KALIAN">NAMA LINK</a></li>

Buat contohnya yang kayak di blog ini, kodenya seperti ini:

<div class="urbangreymenu">

<h3 class="headerbar"><a href="http://blognyaipank.blogspot.com">Home</a></h3>

<ul class="submenu">
<li><a href="http://blognyaipank.blogspot.com/search/label/bisnis%20online">Bisnis Online</a></li>
<li><a href="http://blognyaipank.blogspot.com/search/label/others">News and Others</a></li>
<li><a href="http://blognyaipank.blogspot.com/2009/07/tukeran-link.html">Link Exchange</a></li>
</ul>

<h3 class="headerbar"><a href="http://blognyaipank.blogspot.com/search/label/blogging">Blogging</a></h3>

<ul class="submenu">
<li><a href="http://blognyaipank.blogspot.com/search/label/blogging">Tips Blogging</a></li>
<li><a href="http://blognyaipank.blogspot.com/search/label/seo">Tips SEO</a></li>
</ul>


<h3 class="headerbar"><a href="http://blognyaipank.blogspot.com/search/label/download">Download</a></h3>

<ul class="submenu">
<li><a href="http://blognyaipank.blogspot.com/search/label/template">Template</a></li>
<li><a href="http://blognyaipank.blogspot.com/search/label/software">Software</a></li>
</ul>


<h3 class="headerbar"><a href="http://blognyaipank.blogspot.com/2009/07/pasang-iklan-murah.html">Advertise</a></h3>

<h3 class="headerbar"><a href="http://facebooktrik.blogspot.com/" target="window">Trik Facebook</a></h3>

</div>

Yang berwarna biru adalah kode menu utama sedangkan yang berwarna hijau adalah sub menu.
OK kawand, semoga bermanfaat yah tipsnya. baca juga ya cara buat widget tukeran link..
thanks!