Membuat Accordion Menu Pada Blog
// June 18th, 2009 // design
Bro & Sist, kali ini, untuk membuat blog menjadi lebih menarik, kita coba membuat menu navigasi dengan sentuhan accordion. Kamu mungkin pernah atau bahkan sering mendengar istilah ini. Accordion adalah efek yang bekerja jika header di klik. Illustrasinya begini, jika header menu pertama di klik, maka sub menu akan tampil secara keseluruhan. Dan jika header menu kedua diklik, header yang pertama akan kembali tertutup dan menu header kedua akan tampil. Begitu seterusnya jika header menu yang lain di klik.
Dalam contoh kali ini, menu header adalah tag H3, dengan masing-masing sub menu dengan tag UL tag yang akan memperluas/tampil jiak header di klik. Header adalah tombol yang ditekan dengan “klik” melalui mouse. Tampilan menu ini diatur melalui CSS dan efek accordion menggunakan Javascript, salah satunya menggunakan jquery dari google.
Berikut adalah cara pemasangan accordion menu ini pada blog atau web :
- Download file accordion menu (link download ada di bagian bawah post)
- Upload semua file yang telah di download ke hostingan kamu. Contoh, letakan semua file dalam satu folder yang diberi nama “menu” ke folder public_html di hostingan-mu.
- Tambahkan script berikut kedalam tag header diantara <header> … </header>
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js”></script>
<script type=”text/javascript” src=”acc/ddaccordion.js”></script>
<script type=”text/javascript” src=”acc/ddaccordion2.js”></script>
<link title=”default” media=”screen” type=”text/css” href=”acc/ddaccordion.css” rel=”stylesheet”>
- Letakan script berikut di dalam tag <body>. Script berikut adalah script menu dan sub menu. Kamu bisa merubah menu sesuka hati, baik menambah atau mengurangi menu/submenu.
<div>
<h3>MENU 1</h3>
<ul>
<li><a href=”#”>Submenu 1</a></li>
<li><a href=”#”>Submenu 2</a></li>
<li><a href=”#”>Submenu 3</a></li>
<li><a href=”#”>Submenu 4</a></li>
<li><a href=”#”>Submenu 5</a></li>
<li><a href=”#”>Submenu 6</a></li>
<li><a href=”#”>Submenu 7</a></li>
<li><a href=”#”>Submenu 8</a></li>
</ul><h3>MENU 2</h3>
<ul>
<li><a href=”#”>Submenu 1</a></li>
<li><a href=”#”>Submenu 2</a></li>
<li><a href=”#”>Submenu 3</a></li>
<li><a href=”#”>Submenu 4</a></li>
<li><a href=”#”>Submenu 5</a></li>
<li><a href=”#”>Submenu 6</a></li>
<li><a href=”#”>Submenu 7</a></li>
<li><a href=”#”>Submenu 8</a></li>
</ul><h3>MENU 3</h3>
<ul>
<li><a href=”#”>Submenu 1</a></li>
<li><a href=”#”>Submenu 2</a></li>
<li><a href=”#”>Submenu 3</a></li>
<li><a href=”#”>Submenu 4</a></li>
<li><a href=”#”>Submenu 5</a></li>
<li><a href=”#”>Submenu 6</a></li>
<li><a href=”#”>Submenu 7</a></li>
<li><a href=”#”>Submenu 8</a></li>
</ul><h3 style=”cursor: default”>MENU 4</h3>
<div>
</div> - Selesai…!!!
Note :
– Sebelum mengupload semua file, perhatikan lokasi images yang ada di file ddaccordion.css. Images ini digunakan untuk background header menu pada saat submenu tampil/tidak.
– Buat kamu yang menggunakan free hosting dan tidak bisa upload file (misal : blogger.com), semua file bisa diupload ke hosting yang terpisah dari hosting blog, dengan catatan lokasi file yang ada di ddaccordion.css dan script yang ada di header harus tepat.
Gimana, kamu tertarik untuk menggunakan accordion menu…? Sok atuh, tunggu apa lagi buruan coba. Kalo ada pertanyaan, silahkan isi form comment dibawah, jangan ragu-ragu.
















Bro! Salam kenal..
Kira2 untuk blog gratis paling yahud itu dimana? Versi bro tentunya!
Alesannya juga!
Salam kenal juga bro…
Menurutku blog gratis yang yahud di http://blogger.com
Soalnya aku bisa bebas custom themes, dan optimasi script yang aku pake… Selain itu, space buat host images besar, 1Gb dengan host di picasa… Aku juga bisa custom domain…
Itu bro yang aku tau…
Hi salam kenal,klo selain acordion ad lagi g?
Yo bro, salam kenal juga… Sebetulnya masih banyak bentuk2 menu yang bagus dan menarik… Nanti aku post lagi deh disini, asap..!!
Wah saya kebetulan sedang cari artikel yang membahas accordion. Terima kasih infonya bermanfaat sekali
Yup, sama-sama brother. Kebetulan juga disini ada accordion
asik dibahas juga saya sudah mencari ke banyak blog tidak ada yang terperinci seperti tulisan anda, terima kasih sobat
Yoiyoy, sama bro. Sukses terus ya…!!
aslm. bro, bagus bgt kata2nya bro….
tapi penjelasannya kok cuman bwt blog2 yg hrs bayar sih, gmn cara bikin di bloggernya ?
txs bro.
waslm.
Waalaikum Salam,
Menu accordion bisa digunakan juga di blogger, tapi semua script JS dan CSS di taruh di hosting, dan script yangdi taruh di themes blogger cuma script yang ada di langkah no 4.
tipnya bagus,tapi susah juga yah nerapinnya
bagus bget sih blog loe…gmn bknnya c???
keren layoutnya …..!!!
boz aku bingung letak diedit html aku cari g ada
aku pake template hasil aku download bukan template clasik …