Sumber: How to Create Drop Down Navigation Menu With Sub Menu in Blogger
1. Masuk ke Blogger
2. Klik Tata Letak
3. Klik Edit HTML
4. Cari kode: ]]></b:skin>
5. Tambahkan kode berikut ini di atas kode yang tadi (no. 4)
| /* ----- NAVBAR MENU ----- */ #NavbarMenu {
width: 875px; height: 35px; background:#FF6600 url(http://i802.photobucket.com/albums/yy308/penerjemah/navbar-hitam.png) repeat-x top; color: #ffffff margin: 0 auto 0; padding: 0; font: bold 11px Arial; border-top: 1px solid #ffffff; border-bottom: 1px solid #ffffff; } #NavbarMenuleft { width: 680px; float: left; margin: 0; padding: 0; } #nav { margin: 0; padding: 0; } #nav ul { float: left; list-style: none; margin: 0; padding: 0; } #nav li { list-style: none; margin: 0; padding: 0; } #nav li a, #nav li a:link, #nav li a:visited { color: #ffffff; display: block; text-transform: capitalize; margin: 0; padding: 9px 15px 8px; font: normal 15px Arial; } #nav li a:hover, #nav li a:active { background:#FF6600; color: #ffffff; margin: 0; padding: 9px 15px 8px; text-decoration: none; } #nav li li a, #nav li li a:link, #nav li li a:visited { background: #ffffff url(http://i802.photobucket.com/albums/yy308/penerjemah/navbar-hitam.png) repeat-x top; width: 150px; color: #ffffff; text-transform: lowercase; float: none; margin: 0; padding: 7px 10px; border-bottom: 1px solid #ffffff; border-left: 1px solid #ffffff; border-right: 1px solid #ffffff; font: normal 14px Arial; }
#nav li li a:hover, #nav li li a:active { background: #FF6600; color: #ffffff; padding: 7px 10px; } #nav li { float: left; padding: 0; } #nav li ul { z-index: 9999; position: absolute; left: -999em; height: auto; width: 170px; margin: 0; padding: 0; } #nav li ul a { width: 140px; } #nav li ul ul { margin: -32px 0 0 171px; } #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:hover, #nav li.sfhover { position: static; } |
6. Kemudian, cari kode ini:
| <div id='header-wrapper'> <b:section class='header' id='header' maxwidgets='1' showaddelement='no'> <b:widget id='Header1' locked='true' title='Your Blog Title (Header)' type='Header'/> </b:section> </div> |
7. Tambahkan kode berikut ini di bawah kode no. 6
| <div id='NavbarMenu'> <div id='NavbarMenuleft'> <ul id='nav'> <li><a expr:href='data:blog.homepageUrl'>Beranda</a></li> <li><a href='http://www.jtc-indonesia.com/'>Penerjemahan</a> <ul> <li><a href='http://www.jtc-indonesia.com/'>Biaya</a></li> <li><a href='http://www.jtc-indonesia.com/'>Ketentuan</a></li> </ul> </li> <li><a href='http://www.jtc-indonesia.com/'>Interpretasi</a> <ul> <li><a href='http://www.jtc-indonesia.com/'>Biaya</a></li> <li><a href='http://www.jtc-indonesia.com/'>Ketentuan</a></li> </ul> </li> <li><a href='http://www.jtc-indonesia.com/'>Legalisasi</a> <ul> <li><a href='http://www.jtc-indonesia.com/-dokumen'>Kementerian</a></li> <li><a href='http://www.jtc-indonesia.com/-kedutaan'>Kedutaan</a></li> <li><a href='http://www.jtc-indonesia.com/-notaris'>Notaris</a></li> </ul> </li> <li><a href='http://www.jtc-indonesia.com/'>Hubungi Kami</a></li> </ul> </div>
</div> <!-- end navbar --> |
8. Simpan
Selamat mencoba
0 Komentar Cara Membuat Submenu di Blogspot
Posting Komentar