Membuat Header Menu

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; }
/* ----- end of NAVBAR MENU ----- */

• 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>

<div class='header-outer'>
    <div class='header-cap-top cap-top'>
      <div class='cap-left'/>
      <div class='cap-right'/>
    </div>

• Tambahkan kode berikut ini di bawah kode di atas

<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 -->

• Simpan

Selamat mencoba