Membuat Accordion Menu Pada Blog

// June 18th, 2009 // design

Membuat Accordion Menu Pada Blog

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 :

  1. Download file accordion menu (link download ada di bagian bawah post)
  2. 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.
  3. 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”>

  4. 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>

  5. 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.

Delicious Stumble Upon Technorati Twitter Facebook Digg

14 Responses to “Membuat Accordion Menu Pada Blog”

  1. Usep says:
    July 10, 2009 at 17:48

    Bro! Salam kenal..
    Kira2 untuk blog gratis paling yahud itu dimana? Versi bro tentunya!
    Alesannya juga!

    Reply
    • dhenk says:
      July 10, 2009 at 18:12

      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… :-)

      Reply
  2. Rifas says:
    October 21, 2009 at 06:20

    Hi salam kenal,klo selain acordion ad lagi g?

    Reply
    • dhenk says:
      October 21, 2009 at 14:20

      Yo bro, salam kenal juga… Sebetulnya masih banyak bentuk2 menu yang bagus dan menarik… Nanti aku post lagi deh disini, asap..!!

      Reply
  3. SUMAFONE says:
    November 18, 2009 at 10:09

    Wah saya kebetulan sedang cari artikel yang membahas accordion. Terima kasih infonya bermanfaat sekali

    Reply
  4. beblogseo says:
    November 28, 2009 at 03:03

    asik dibahas juga saya sudah mencari ke banyak blog tidak ada yang terperinci seperti tulisan anda, terima kasih sobat

    Reply
  5. juna says:
    November 28, 2009 at 20:29

    aslm. bro, bagus bgt kata2nya bro….
    tapi penjelasannya kok cuman bwt blog2 yg hrs bayar sih, gmn cara bikin di bloggernya ?
    txs bro.
    waslm. :-)

    Reply
    • dhenk says:
      November 29, 2009 at 14:21

      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.

      Reply
  6. pulsamurah says:
    January 5, 2010 at 05:24

    tipnya bagus,tapi susah juga yah nerapinnya

    Reply
  7. cikatos says:
    January 16, 2010 at 21:17

    bagus bget sih blog loe…gmn bknnya c???

    Reply
  8. angga says:
    February 12, 2010 at 22:36

    keren layoutnya …..!!!

    Reply
  9. andi says:
    February 14, 2010 at 15:53

    boz aku bingung letak diedit html aku cari g ada
    aku pake template hasil aku download bukan template clasik …

    Reply

Leave a Reply

csscomposer's Profile on Ping.sg