Cara membuat sub menu diblog

Kali ini saya mao share tentang Cara membuat sub menu diblog,caranya gampang kook.

Yukk praktekin hehe

Langkah pertama seperti biasa DOWNLOAD TEMPLATE kalian dulu untuk jaga2, lalu kalau sudah didownload,
masuk ke edit html trus copas kode ini tepat diatas

]]></b:skin>

/* ----- 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;

}

Langkah kedua cari kode ini :

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

Langkah ketiga copas kode ini,dan letakkan dibawah kode langkah kedua :

<li><a expr:href='data:blog.homepageUrl'>Beranda</a></li>

<ul>

<li><a href='#'>SubMenu-1-1</a></li>

<li><a href='# '> SubMenu-1-2</a></li>

</ul>

</li>

<ul>

<li><a href='#'>SubMenu-2-1</a></li>

<li><a href='#'> SubMenu-2-2</a></li>

</ul>

</li>

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

</ul>

</div>

</div>

Langkah keempat, ganti kata MENU & SUBMENU dengan laman yang anda mau.

sebagai contohnya saya ingin membuat laman contact me :

<li><a href='#'>Contact Me</a>

<ul>

<li><a href='#'>Facebook</a></li>

<li><a href='# '>Twitter</a></li>

dan ganti tanda PAGAR (#) dengan URL yg anda tuju. Setelah selesai mengedit HTMLnya lalu KLIK SAVE atau untuk jaga2 KLIK PRATINJAU dahulu (untuk jaga2 saja) kalau sudah tidak ada masalah KLIK SAVE. selesai deh... gimana hasilnya??? keren kan??? :)