Membuat Sub Dropdown Pada Horizontal Menu

sub dropdown horizontal menu
Lagi-lagi menu horizontal, sampai-sampai bosan nih!!! Yah, mungkin karena sudah terlanjur cinta sama yang namanya menu horizontal dengan menggunakan kode CSS dibandingkan menu horizontal pakai javascript, jadi saya mau ngga mau menerbitkan posting ini (ha...ha...ha...). Sorry, yang merasa disentil berarti mendapat perhatian khusus dari saya. Memang kalau dipikir-pikir yang namanya trik blogger tidak akan pernah habis-habisnya, kecuali tidak ada lagi orang yang nge-blog di blogger. Dalam kesempatan ini saya akan sedikit menambahkah tentang "Membuat Sub Dropdown Pada Horizontal Menu". Jangan kedipkan mata kamu dan mari kita mulai  trik bloggernya.

Oia, sebelumnya buat dulu horizontal menu, silakan buka  Membuat Horizontal Menu di blog dan Membuat Dropdown Pada Horizontal Menu
  • Login dulu ke account blogger kamu.
  • Pilih tab Tata Letak --> Edit HTML --> centang "Expand Template Widget".

Tips: Sebelum melakukan edit template, sebaiknya simpan dulu template kamu yang ada dengan meng-klik tulisan Download Template Lengkap. Kemudian simpan dalam harddisk atau media penyimpanan lainnya, sehingga jika terjadi hal-hal yang tidak diinginkan kamu sudah memiliki back-up untuk mengembalikannya seperti semula.

  • Tambahkan kode CSS berikut di bawah kode CSS menu horizontal yang ada.

    #nav li ul a {
    width: 100px;
    }
    #nav li ul ul {
    position: absolute;
    margin: -30% 0 0 95%;
    }
    #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
    left:-999em;
    }
    #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
    left:auto;
    }
    #nav li li li.sfhover ul {
    left:auto;
    }
    #nav li:hover, #nav li.sfhover {
    position:static;
    }


  •  Cari kode HTML <div id='navleft'>.

Tips: Kalau susah mencarinya, coba tekan tombol F3 di keyboard. Maka akan timbul menu toolbar pencarian di bawah browser (Firefox), sehingga kamu tinggal memasukkan kata yang ingin dicari.

  • Kemudian tambahkan menu turunan kedua, seperti kamu menambahkan dropdown menu dalam horizontal navigasi (turunan pertama). Illustrasi kodenya adalah sebagai berikut.

    <div id='navleft'>
    <div id='nav'>
    <ul>
    <li><a href='http://Alamat_Blog_Kamu.blogspot.com/'>home</a></li>
    <li><a href='http://Link_yang_dituju'>teks kamu</a></li>
    <li><a href='http://Link_yang_dituju'>teks kamu</a>
    <ul>
    <li><a href='URL sub 1'>teks kamu</a></li>
    <li><a href='URL sub 2'>teks kamu</a></li>
    <li><a href='URL sub 3'>teks kamu</a>

    <ul>
    <li><a href='URL sub 3.1'>teks kamu</a></li>
    <li><a href='URL sub 3.2'>teks kamu</a></li>
    </ul>
    </li>


    </ul>
    </li>
    <li><a href='http://Link_yang_dituju'>teks kamu</a></li>
    <li><a href='http://Link_yang_dituju'>teks kamu</a></li>
    </ul>
    </div>
    </div>


Catatan :
   1. Perhatikan peletakkan kode untuk menambah dropdown menu, ditandai dengan kode berwarna hijau.
   2. Perhatikan pula peletakkan kode untuk menambah menu turunan kedua, ditandai dengan kode yang berkedap-kedip.
   3. Ganti kode yang berwarna merah dengan alamat link dan teks yang kamu inginkan.


  • Jangan lupa disimpan.


Selamat membuat sub dropdown pada horizontal menu...

Sumber: Optimasi-Blog.blogspot.com

25 komentar:

  1. makasih shob ilmunya ..... jadi tau neh ...

    BalasHapus
  2. nah yo ini lo sob yangaku cari dari kemrin,, soale kampir sama ni template nya :b:

    BalasHapus
  3. mas tuker banner link ya.. benner mas udah ku pasang diblogku.. linkback bannerku ya mas.. thanks

    BalasHapus
  4. terima kasih boz,. for sharing ilmunya,..moga gak pernh habis ilmu yang diberikan,..hihihihi,..emng makanan >>???

    tank"s berat sob !!!

    BalasHapus
  5. terima kasih boz sharing ilmunya ,...moga gak pernh abis , & Allah akan selalu membalas berkah atas kebaikan...amin3

    BalasHapus
  6. trima kasih gan, sekarang gwe bisa bikin sub menu
    :c:

    BalasHapus
  7. MAS TAPI KOK PUNYAK Q DIBAWAH G DIATAS....
    MOHON BANTUANYA

    BalasHapus
  8. Mas kenapa menu drop down and sub menu hanya sedikit yang kelihatan, bingung nich dimana salahnya, bantu dong cari solusinya.
    Mohon Bantuannya. http://usman-msd.blogspot.com
    Terima kasih

    BalasHapus
  9. mas kalau aku pakai menu horisontalnya yang asli widget blogger yaitu linklist namanya, gimana cara nambahin sub menunya sedangkan kodenya berbeda, diantarnya tidak ada kode navleft adanya tabs. thanks..kutunggu jawabannya

    BalasHapus
  10. Gan saya butuh bantuan. tutorialnya sudah saya coba,, tapi ko sub menunya ga bisa disorot sampai bawah, trus tampilannya juga ada di belakang postingan yang ada di bwahnya. biar jelas coba gan liat blog ane dan liat apa kesalahannya
    movies2dua.blogspot.com

    BalasHapus
  11. Yang pengen domain [dot] COM GrAtIs silahkan baca artikel di njeporoku.blogspot.com :c: :h:

    BalasHapus
  12. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  13. Bos klo menu horizontal kaya gw gimana caranya supaya bisa buat "SUB MENU"..


    VISIT ME AT WWW.REFLECTOR-NET.CO.CC THANX

    BalasHapus
  14. bos aku dah copy pas listingnya tapi kok gak ada kode 'navleft'> gima klo belum ada kode tersebut,,,,makasih

    BalasHapus
  15. infonya donk...klo buat naronya bukan d blog tapi d website gimana?
    help me please...

    rn..

    BalasHapus
  16. bannernya udah di pasang,.
    silahkan cek di http://northsulawesi-tourism.blogspot.com

    GBU

    BalasHapus
  17. thank's infonya sob, coba dlu gmn hasilnya...
    hehehe...
    oya, mw tukeran link nggak sob ?
    balas d blog ane y sob...
    sekalian follow back..

    BalasHapus
  18. terima kasih banyak gan buat infonya, semoga bermanfaat gan ,

    BalasHapus
  19. makasih infonya ini yg saya cari gan

    BalasHapus

Mau tukeran link? silakan buka Link Sahabat dan apabila ada pertanyaan silakan tulis di Kotak Pertanyaan. Terima Kasih...

Kami akan menghapus komentar yang: Tak sopan, memakai HURUF BESAR, berupa caci maki, mengandung kata-kata kebun binatang, debat kusir, provokasi, di luar konteks, berupa undangan/ reklame. Komentar yang terlalu panjang, tanpa paragraf dan sulit dipahami. Komentar copy-paste, silakan di-link saja.

Isi komentar adalah tanggung jawab penulis komentar, bukan tanggung jawab pengelola blog/situs ini. Harap maklum.