Membuat Horizontal Menu di blog dan Membuat Dropdown Pada Horizontal Menu
Friday, June 25, 2010
, Posted by Titiyan Nugroho at 11:09 PM
- 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
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.
Currently have 0 comments: