Silahkan lihat dulu hasilnya di sini.
Untuk membuat submenu semacam itu, silahkan ikuti langkah-langkah berikut ini:
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, Tahoma, Verdana; 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 Georgia, Times New Roman; } #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 Georgia, Times New Roman; } #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='#'>Menu-1</a> <ul> <li><a href='#'>SubMenu-1-1</a></li> <li><a href='# '> SubMenu-1-2</a></li> </ul> </li> <li><a href='#'>Menu-2</a> <ul> <li><a href='#'>SubMenu-2-1</a></li> <li><a href='#'> SubMenu-2-2</a></li> </ul> </li> <li><a href='#'>Menu-3</a> <ul> <li><a href='#'>SubMenu-3-1</a></li> <li><a href='# '> SubMenu-3-2</a></li> <li><a href='#'> SubMenu-3-3</a></li> </ul> </li> <li><a href='#'>Menu-4 </a></li> </ul> </div> </div> <!-- end navbar --> |
8. Simpan
Selamat mencoba
.jpg)
.jpg)