Membuat menu
Salah satu cara menghemat ruang di dalam blogger adalah dengan membuat menu, yang biasanya terletak di atas
sumber : cikalaganb.blogspot.com
»» READMORE...
Salah satu cara menghemat ruang di dalam blogger adalah dengan membuat menu, yang biasanya terletak di atas
Pembuatan menu ini berlaku untuk semua template blogger , dikarenakan kode terlampir di bawah ini akan membuat area widget sendiri, yang terletak di bawah head.
langsung aja... caranya coba cari kode ]]></b:skin> kemudian copy kode css di bawah ini tepat diatasnya.
| /* ----- NAVBAR MENU ----- */ #NavbarMenu { width: 875px; height: 35px; background:#777 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 verdana, arial, comic san ms; border-top: 1px solid #cccccc; border-bottom: 1px solid #cccccc; } #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 verdana, arial; } #nav li a:hover, #nav li a:active { background:#FF6600; color: #cccccc; 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 verdana, arial; } #nav li li a:hover, #nav li li a:active { background: #cce9fd; color: #cccccc; 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> / cari kode ini. <div class='header-outer'> <div class='header-cap-top cap-top'> <div class='cap-left'/> <div class='cap-right'/> </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'>Home</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 mencobasumber : cikalaganb.blogspot.com
