loading...
/ / Menambah Dropdown Menu dalam Horizontal Navigasi

Menambah Dropdown Menu dalam Horizontal Navigasi

Diposting trik blogger terdahulu OB telah menulis tentang membuat menu horizontal. Dimana pengkodeannya menggunakan CSS yang disadur dari blog Kang Rohman. Selanjutnya tinggal bagaimana trik menambahkan dropdown menu di dalam kode tersebut. Betulkan... Seandainya OB jeli mengamati kode menu horizontal tersebut, mungkin ini tidak akan menjadi sebuah posting. Ternyata ada hikmahnya juga, karena faktor ketidaktelitian tersebut he..he..he.. Kalau dropdown menunya agak kurang enak dipandang menurut penglihatan dan perasaan kamu, maka diperlukan beberapa optimasi kode CSS-nya, terutama yang memiliki atribut #nav li li. Jadi memodifikasinya terserah pada yang punya blog (ingin seperti apa dan bagaimana).

Berikut trik menambahkan dropdown menu dalam horizontal navigasi :
  • Login ke account blogger kamu.
  • Pilih 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.
  • Cari kode HTML di bawah ini yang posisinya diantara <body> ... <body>.
<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'>Add Link</a></li>
<li><a href='http://Link_yang_dituju'>Add Link</a></li>
<li><a href='http://Link_yang_dituju'>Add Link</a></li>
<li><a href='http://Link_yang_dituju'>Add Link</a></li>
</ul>
</div>
</div>

Tips : Kalau susah mencarinya, coba tekan tombol F3 di keyboard. Maka akan muncul menu toolbar pencarian di bawah browser (Firefox), sehingga kamu tinggal memasukkan kata yang ingin dicari.
  • Tambah kode berikut di nav link yang kamu inginkan, letakkan sebelum </li>.
<ul>
<li><a href='URL sub 1'>Sub menu 1</a></li>
<li><a href='URL sub 2'>Sub menu 2</a></li>
<li><a href='URL sub 3'>Sub menu 3</a></li>
</ul>

Contoh :
<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'>Add Link</a></li>
<li><a href='http://Link_yang_dituju'>Add Link</a>
<ul>
<li><a href='URL sub 1'>Sub menu 1</a></li>
<li><a href='URL sub 2'>Sub menu 2</a></li>
<li><a href='URL sub 3'>Sub menu 3</a></li>
</ul>
</li>
<li><a href='http://Link_yang_dituju'>Add Link</a></li>
<li><a href='http://Link_yang_dituju'>Add Link</a></li>
</ul>
</div>
</div>

Catatan :
  1. Perhatikan peletakkan kode untuk menambah menu dropdown, ditandai dengan warna hijau.
  2. Ganti kode yang berwarna merah dengan alamat link dan teks yang kamu inginkan.

  • Jangan lupa disimpan.


Tambahan : Kode CSS #nav li li yang perlu kamu optimasi adalah sebagai berikut.

#nav li li {
float: left;
margin: 0px;
padding: 0px;
width: 150px; <!-- lebar dropdown menu -->
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #ffffff; <!-- warna latar dropdown menu -->
width: 160px; <!-- lebar dropdown menu, ketika disentuh korsur/mouse -->
float: none;
margin: 0px;
padding: 7px 30px 7px 10px;
border-bottom: 1px solid #ffffff; <!-- garis tepi bawah dropdown menu -->
border-left: 1px solid #ffffff; <!-- garis tepi kiri dropdown menu -->
border-right: 1px solid #ffffff; <!-- garis tepi kanan dropdown menu -->
<!-- atau kamu bisa mengganti kode border-bottom, left, dan right dengan kode border: 1px solid #ffffff; -->
 }
#nav li li a:hover, #nav li li a:active {
background: #c06000; <!-- warna latar dropdown menu , ketika disentuh korsur/mouse -->
padding: 7px 30px 7px 10px;
}


Selamat berdropdown dengan menu horizontal...

51 komentar untuk “Menambah Dropdown Menu dalam Horizontal Navigasi”

  1. didir17 Mei 2009 pukul 16.32

    kira kira kecepatan dropdown-nya bisa diatur nga ya...bang,,???,
    8-}

    BalasHapus
  2. BUSSINES SECRET18 Mei 2009 pukul 05.22

    terima kasih atas infonya!

    jangan lupa mampir ke sini yaa:
    www.noermanshoot.blogspot.com

    BalasHapus
  3. firdaus18 Mei 2009 pukul 05.53

    @didir: (daripada gak dijawab sama yang punya blog :p). gak bisa om. soalnya ini gak pake java. mungkin kalo mau cari yang pake script java atau yg lainnya. :)

    BalasHapus
  4. Unknown19 Mei 2009 pukul 12.17

    to didir: sama jawabannya ama firdaus. Udah defaultnya kaya gitu, dir. Tapi kelihatannya udah cepat tuh.

    to firdaus: thanks banget...:D

    BalasHapus
  5. Ad4m San™20 Mei 2009 pukul 16.29

    mas klo bikin sub-sub menu dr kode diatas bisa gak? biar misalnya Label-Komputer-Hardware tapi sub menu yang kedua kesamping mas bisa gak yah??

    BalasHapus
  6. Abu Rayhan27 Mei 2009 pukul 09.14

    bang saya baru belajar bikin bloger, minta tolong boleh nggak? sudah ampir seminggu nich mau bikin menu drop down tapi gak bisa-bisa. bikinin dong boleh?

    BalasHapus
  7. Unknown27 Mei 2009 pukul 21.31

    to Ad4m San: Bisa tapi harus nambah kode CSS-nya dulu, tapi sebelum bikin posting lagi, lebih baik lihat menu horizontal pakai javascript. Siapa tahu pengen pindah he..he..? Klo Adam pindah, sedangkan OB posting kode CSS tambahannya jadi mubazir dong...

    to Abu Raylan: Selama OB bisa bantu, insyaAllah akan di bantu. thanks

    BalasHapus
  8. Ad4m San™28 Mei 2009 pukul 00.06

    kayaknya prefer pake css deh mas soalnya lebih enteng buat di loadnya daripada pake script huhuhuh tolong yah mas :((

    BalasHapus
  9. Ondink30 Mei 2009 pukul 03.04

    mo nanya nich bang.....maklum (newbie)....setelah triknya ku coba. kenapa ya menu dropdown-nya sering hilang dan muncul jika mouse melintas di atasnya. Nggak kayak punya bang OB. Tolong dibantu ya bang.....Mksh!!!

    BalasHapus
  10. Unknown1 Juni 2009 pukul 20.42

    to onding: udah ngga masalah di blog onding, OB udah jalan-jalan ke blognya

    BalasHapus
  11. Abdul Muin Hafied, SE, M.Pd.3 Juni 2009 pukul 09.32

    mice posting bang makasih pelajaran buatn nwebie nih

    BalasHapus
  12. Ondink3 Juni 2009 pukul 17.53

    :)mksh bang....udah neyempatin jalan-jalan to my blog. Saya tunggu trik-trik berikutnya.;))

    BalasHapus
  13. bliyan_bayem6 Juni 2009 pukul 17.43

    yeahahahahahah.............!! tips ini yang saya cari dan kebetulan sekali ketemu di sini . thanks mas!

    BalasHapus
  14. dunia_maya12 Juni 2009 pukul 19.53

    mau tak coba, terima kasih infonya!

    BalasHapus
  15. wong sokor22 Juni 2009 pukul 21.58

    mampir guru.. mo nanya neh?

    emotion di comment box ku kok g jadi napa ya?

    kasih satan donk...

    BalasHapus
  16. Unknown23 Juni 2009 pukul 20.08

    OB juga pernah mengalami, hal ini mungkin disebabkan javascript emoticon disimpan dalam web hosting tertentu sehingga waktu dipanggil tidak bereaksi. Coba ganti pemanggilan javascript yang dihostkan tadi dengan full javascript emoticonnya. Thanks

    BalasHapus
  17. Anonim8 Juli 2009 pukul 02.19

    bang saya ndak isa nemu kode yang dimaksud..
    apa blog saya error......
    TOLONG KASIH JALAN KELUAR YA.... MAKASIH SEBELUMNYA.

    BalasHapus
  18. Unknown11 Juli 2009 pukul 21.07

    to Kibagus: bagaimana menemukan kode menu horizontalnya ki, jika kode menu horizontalnya belum ada. Sebab posting ini merupakan pelengkap dari posting sebelumnya. Silakan cari posting dalam search di blog ini tentang "menu horizontal"

    BalasHapus
  19. anko22 Juli 2009 pukul 21.46

    penempatan kode css #nav li li itu dimana ya???

    BalasHapus
  20. anko22 Juli 2009 pukul 21.57

    kode css #nav ditaruh dimana??

    BalasHapus
  21. Uguns11 Agustus 2009 pukul 22.55

    oke sob di coba langsung ah...

    BalasHapus
  22. dimaz ghogon15 Agustus 2009 pukul 08.13

    Wah...tipsnya bagus, tapi setelah dicoba malah gak karuan, trus saya kembalikan lagi....ntar tak coba kembali....thank's infonya

    BalasHapus
  23. KOKAM18 Agustus 2009 pukul 23.52

    trim mas sudah bisa cuma bagaimana
    1. memasukkan beberapa posting baru ke sub menunya
    2. memasukkan beberapa posting lama ke sub menunya

    BalasHapus
  24. Dhani_phantom12 Oktober 2009 pukul 16.03

    UDAH DI COBA SOB TAPI TETEP GAK BISA PADAHAL AKUDAH MELUAKUKAN SEMUA PETUNJUKMU DENGEN BENAR :D

    OH YA AKU PAKAI TEMPLATE (Magazine Template 2)

    BalasHapus
  25. Chandra6 November 2009 pukul 17.01

    Terima kasih atas triknya.

    BalasHapus
  26. ganool28 November 2009 pukul 12.00

    wahh..pusing juga ternyata...

    BalasHapus
  27. Mbah Soleh7 Desember 2009 pukul 16.35

    Aku menemukan yang kucari disini. .. Terimakasih banyak dan akan ku coba. ...

    BalasHapus
  28. lucky24 Desember 2009 pukul 16.40

    gant,aku baru seminggu buat blog jadi masih gaptek bgt hihii(nambahin emo aja ga bisa)
    maksudnya langkah tambahan di atas itu apa?nav li li yang sudah ada di ganti dgn yang itu atau di tambahkan?

    BalasHapus
  29. mau belajar29 Desember 2009 pukul 00.12

    terima kasih atas informasinya, ijin ikut belajar. salam

    BalasHapus
  30. icut-titang.blogspot.com29 Desember 2009 pukul 14.59

    manteb nieh aku cari dari dulue eh nemu disini

    BalasHapus
  31. nowGoogle.com adalah Multiple Search Engine Popular6 Februari 2010 pukul 08.38

    thanks ya tips nya

    BalasHapus
  32. Helmy30 April 2010 pukul 10.15

    tips keren mas... tapi saya ada masalah, tolong dong... saya udah berhasil buat seperti yang diatas, tapi masalahnya kok dpordown menunya gak rata mas... bisa bantu ga? sepertinya masalah di CSS saya. blogs saya http://helmyinfo.blogspot.com
    bisa kirim ke emaail saya mas solusinya?
    helmy_gatsoe@yahoo.com

    BalasHapus
  33. Forantum I Blogging is My Life I Tutorial Blog I Tips dan Trik Blog I SEO I Free Template13 Mei 2010 pukul 19.16

    Makasih...

    BalasHapus
  34. kavie17 Mei 2010 pukul 19.07

    thanks infonya..
    kalau sub menunya di tambah menu lagi tapi ke samping bisa ga ya??

    http://lokerfavorit-kavie.blogspot.com

    BalasHapus
  35. putrahosting.com dapur hosting hemat18 Mei 2010 pukul 11.15

    makasih infonya om

    BalasHapus
  36. Reza Rahmat Mahardika26 Mei 2010 pukul 14.25

    Thanks :)

    Makassar Asli

    BalasHapus
  37. jerri30 Mei 2010 pukul 08.29

    nice share :D coba ah

    BalasHapus
  38. Riza Mukti19 Juni 2010 pukul 01.44

    Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  39. d_hardiant27 Juni 2010 pukul 13.12

    makasih bos, luar biasa deh..

    BalasHapus
  40. murni design11 September 2010 pukul 10.16

    terima kasih tips nya ya..gan...
    kunjungan balik yan ke :
    www.murni-design-rumah.blogspot.com

    BalasHapus
  41. ardie20 Oktober 2010 pukul 14.01

    thanks broo atas info nya

    BalasHapus
  42. babasal12 Desember 2010 pukul 23.49

    thnkyu boss.... sangat bermanfaat..

    BalasHapus
  43. poison_boys4 Februari 2011 pukul 19.14

    thx boz untuk sharenya

    BalasHapus
  44. ganeswisata5 Februari 2011 pukul 12.59

    drop down saya tertimbun kode dibawahnya, mas,..mohon pencerahan :)

    BalasHapus
  45. arfz25 Februari 2011 pukul 20.47

    mas, semua cara uda saya praktekan. uda bisa buat menu navigasinya. tapi kok blm bisa dropdown ya?

    add YM saya mas, sekalian cek blog saya arif-dian.blogspot.com

    BalasHapus
  46. Unknown11 Maret 2011 pukul 00.52

    dropdown udah bisa,,tpi kok ktika disorot gmpang sekali tuk hilang,,ada solusinya gak??
    coba lihat di http://northsulawesi-tourism.blogspot.com

    thx,

    BalasHapus
  47. PKP-2 STPI4 April 2011 pukul 23.43

    Punya saya sama kayak Bry-XP bang, solusinya dong. pleassssse???

    BalasHapus
  48. Unknown5 April 2011 pukul 02.46

    @Bry_XP & @PKP-2 STPI:
    Keliatannya ada yang kurang kode CSS - nya di atas, gan.

    #nav ul {
    margin: 0px;
    padding: 0px;
    list-style: none;
    position:absolute;
    }
    #nav li {
    float: left;
    margin:0px;
    padding:0px;
    position:relatif;
    }
    #nav li li a, #nav li li a:link, #nav li li a:visited {
    background: #ffffff;
    width: 160px;
    float: none;
    margin: 0px;
    padding: 7px 30px 7px 10px;
    border-bottom: 1px solid #ffffff;
    border-left: 1px solid #ffffff;
    border-right: 1px solid #ffffff;
    display:block;
    }

    Coba diperbaiki kode tersebut, gan dan huruf tebal merupakan kode CSS yang perlu ditambahkan.
    Terima kasih, gan. Ntar saya update postingnya.

    BalasHapus
  49. PKP-2 STPI6 April 2011 pukul 11.42

    taruh kodenya dmn gan??

    BalasHapus
  50. Unknown6 April 2011 pukul 16.34

    @PKP-2 STPI:
    Agan kan sudah memasukkan kodenya di CSS, coba cari #nav ul, #nav li, dan #nav li li a, #nav li li a:link, #nav li li a:visited.
    Kemudian tambahkan kode yang tercetak tebal, di tiap elemen kode di atas.

    BalasHapus
  51. download software gratis11 April 2011 pukul 02.11

    makasih banyak tutorialnya mas

    BalasHapus

Komentar baru tidak diizinkan.

Langganan: Posting Komentar (Atom)