Membuat Header Menu

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

}

• 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

Posted in: blog