Cara membuat Menu dan Sub Menu

Page views: views

Biasanya pada template blogspot yang kita temukan/download ada yang tidak menggunakan menu dan sub menu, termasuk template yang saya gunakan ini. Akan tetapi jika anda mau membuat menu dan sub menu seperti gambar diatas ? Berikut ini caranya :

1. Login ke ke account blogspot.com anda
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'>Home</a></li>
<li><a href='http://tokocampuran.blogspot.com/search/label/Nama Label'>Judul Menu</a>
<ul>
<li><a href='http://tokocampuran.blogspot.com/search/label/Nama Label'>Judul Menu</a></li>
<li><a href='http://tokocampuran.blogspot.com/search/label/Nama Label'>Judul Menu</a></li>
<li><a href='http://tokocampuran.blogspot.com/search/label/Nama Label'>Judul Menu</a></li>
</ul>
</li>
<li><a href='http://tokocampuran.blogspot.com/search/label/Nama Label'>Judul Menu</a>
<ul>
<li><a href='http://tokocampuran.blogspot.com/search/label/Nama Label'>Judul Menu</a></li>
<li><a href='http://tokocampuran.blogspot.com/search/label/Nama Label'>Judul Menu</a></li>
</ul>
</li>
<li><a href='http://tokocampuran.blogspot.com/search/label/Nama Label'>Judul Menu</a>
<ul>
<li><a href='http://tokocampuran.blogspot.com/search/label/Nama Label'>Judul Menu</a></li>
<li><a href='http://tokocampuran.blogspot.com/search/label/Nama Label'>Judul Menu</a></li>
<li><a href='http://tokocampuran.blogspot.com/search/label/Nama Label'>Judul Menu</a></li>
</ul>
</li>
<li><a href='http://tokocampuran.blogspot.com/search/label/Nama Label'>Judul Menu</a></li>
</ul>
</div>

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

Keterangan:

• http://tokocampuran.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

Anda Menyukai Artikel Ini ?