Untuk
membuat submenu semacam itu, silahkan ikuti langkah-langkah berikut ini:
1. Masuk
ke Blogger
2. Klik
Tata Letak
3. Klik
Edit HTML
4. Cari
kode: ]]></b:skin>
5.
Tambahkan kode berikut ini di atas kode yang tadi (no. 4)
/* -----
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:
<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>
7.
Tambahkan kode berikut ini di bawah kode no. 6
<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 -->
8. Simpan
Selamat
mencoba
http://dankastamsis.blogspot.com/
