Cara membuat Menu dan Sub Menu

Anda mau membuat menu dan sub menu seperti gambar diatas ? Berikut ini caranya:

1. Login ke blogspot.com
2. Klik Rancangan (Tata Letak)
3. Klik Edit HTML
4 Cari kode ]]></b:skin>
5. Letakkan kode dibawah ini,  diatas kode no 4 tadi


/* ----- 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:
</b:section>
</div>

7. Letakkan kode dibawah ini di bawah kode no 6 tadi

<div id='NavbarMenu'>

<div id='NavbarMenuleft'>

<ul id='nav'>

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

<li><a href='http://www.tamanbelajarblog.blogspot.com/search/label/Nama Label'>Judul Menu</a>

<ul>

<li><a href='http://www.tamanbelajarblog.blogspot.com/search/label/Nama Label'>Judul Menu</a></li>


<li><a href='http://www.tamanbelajarblog.blogspot.com/search/label/Nama Label'>Judul Menu</a></li>

<li><a href='http://www.tamanbelajarblog.blogspot.com/search/label/Nama Label'>Judul Menu</a></li>
</ul>

</li>

<li><a href='http://www.tamanbelajarblog.blogspot.com/search/label/Nama Label'>Judul Menu</a>

<ul>

<li><a href='http://www.tamanbelajarblog.blogspot.com/search/label/Nama Label'>Judul Menu</a></li>

<li><a href='http://www.tamanbelajarblog.blogspot.com/search/label/Nama Label'>Judul Menu</a></li>

</ul>
</li>

<li><a href='http://www.tamanbelajarblog.blogspot.com/search/label/Nama Label'>Judul Menu</a>

<ul>

<li><a href='http://www.tamanbelajarblog.blogspot.com/search/label/Nama Label'>Judul Menu</a></li>

<li><a href='http://www.tamanbelajarblog.blogspot.com/search/label/Nama Label'>Judul Menu</a></li>

<li><a href='http://www.tamanbelajarblog.blogspot.com/search/label/Nama Label'>Judul Menu</a></li>

</ul>
</li>

<li><a href='http://www.tamanbelajarblog.blogspot.com/search/label/Nama Label'>Judul Menu</a></li>

</ul>

</div>



</div> <!-- end navbar -->

Keterangan:
 => www.tamanbelajarblog.blogspot.com diganti dengan alamat blog anda
=> Nama Label diganti dengan nama label pilihan anda yang ada di blog anda
=> Judul Menu diganti dengan judul menu yang anda inginkan


8. Simpan

• Twitter
• Facebook
• Google
• Tumblr
• Pinterest