hallo, kali ini saya akan membahas tentang submenu.
Membuat submenu bukanlah hal yang mudah tetapi setelah bertemu dengan postingan ini saya rasa hal ini akan terasa mudah dan tidak sedikitpun merasa sulit.
nah untuk mengetahui Cara Membuat SubMenu di Blogspot dapat anda ikuti langkah berikut :
1. log in dulu pada ID Blogspot kita
2. klik tata letak
3. pilih edit HTML
4. Copas kode berikut 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;
}
5. cari kode berikut
<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>
6. jika langkah no. 5 sudah ketemu kemudian copas kode berikut dibawah kode no. 5
<div
id='NavbarMenu'>
<div
id='NavbarMenuleft'>
<ul id='nav'>
<li><a
expr:href='data:blog.homepageUrl'>Beranda</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 -->
7. lalu di simpan
mudah bukan??
SELAMAT MENCOBA!!
