Berikut trik menambahkan dropdown menu dalam horizontal navigasi :
- Sebelumnya buat dulu horizontal menu. Silakan buka Membuat Horizontal Menu di blog 2
- 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...
oh gitu ya caranya.. Ini loadingnya lama gak? Thx ya udah share..
BalasHapusGADO: Ringan koq, dicoba dulu aja. Sama-sama....
BalasHapusthx ya om, ketoe aku deh yg pernah tanya
BalasHapusko ga bisa di klik sub menunya ya? langsung ilang pas kursor dikebawahin..??
BalasHapusaku baru nich di bloger,jadi masih nubie,tutor2nya sangat membantu. masalahnya = yang dialami riza mukti, sub menunya koq hilang pas korsor dikebawahin.tolong solusinya sob??? please
BalasHapusMasalah itu juga saya alami pada saat menggunakan tutorialnya kang rohman yang membuat dropdown dengan java script, masalahnya karena java script tidak bekerja. Tapi tutor diatas tidak memakai Java Script koq...
BalasHapusngk bisa dipake sub menunya.. klo dklik langsung ilang. ada yg perlu diedit ngak mas?... makasih
BalasHapustu kode yg css naruhnya dimana trus maksudnya gmn? yg jelas dung. cos aku bru blajar blogging?
BalasHapusngk bisa dipake sub menunya.. klo dklik langsung ilang. ada yg perlu diedit ngak mas?... makasih
BalasHapusKK tolong dong aku kasih link tempat aku ya ... http://skyzonestudio.blogspot.com.
BalasHapusdropdown aku muncul tapi gak bisa diclik .. mau di clik ilang.
ya tuh gimana solusinya... kok sub menunya ilang pas mau di klik ?
BalasHapusgimana solusinya kk ?
TQ
kunjungin blog aku yah
http://www.cipudan.co.cc/
aku dah coba kok sub menunya gak mau tampil pas di tunjuk kursor... kayaknya tampil di belakang tuh... bagaimana cara ngatasinnya?
BalasHapuskok menu nya aku gak bisa di klik?? gmn ya ?? thanks
BalasHapuso....gitu ya sahabat, thank's banyak dah moga sukses selalu
BalasHapusane sedottt ya gan,,,
BalasHapusterima kasih banyak atas infonya massssssss...
BalasHapusbagi temen-temen yang gila bola jangan lupa juga berkunjung
keblog saya!!! di www.barter-bola.blogspot.com
menu saya udah jdi,,tpi kok gmpang banget hilang yah?!
BalasHapusmnta bntuannya di http://northsulawesi-tourism.blogspot.com,,
thx
itu mesti kata home atau terserah kita yang mau dijadiin menu dropdown itu yang mana?
BalasHapusthanks
kok sub menunya ilang pas mau di klik ?
BalasHapusgimana solusinya mas?
pas kursornya di ke bawahin, ilang cause kena` entri di bwahnya, truz ilang, gimana neh? bisa kasi solusinya g? thanks
BalasHapusfollow blog aku donk gan
BalasHapusThanks ya gan tas infonya,...
BalasHapusmantab gan, berhasil
BalasHapusObat Cytotec
BalasHapuscara menggugurkan Kandungan
cara menggugurkan Hamil
cara gugurkan Hamil
cara menggugurkan Hamil