Cara Membuat Menu Navigasi Dengan Sub-Menu - Membuat Menu Navigasi, Dengan
menu navigasi blog akan terlihat lebih menarik bukan? Selain itu tentunya bagi
si pemilik blog juga lebih mudah meng - organisir konten dari blognya.
Begitupun sebaliknya buat pengunjung blog anda, menu seperti ini mempermudah
pengunjung dalam meng-eksplor isi blog anda. Nah, langsung aja ya masuk ke
penjelasan bagaimana caranya memasang menu ini di blog sobat........
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)
#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
Sumber
: http://www.blog.jtc-indonesia.com/
Artikel 
1 Comments
thanks bro.....
BalasHapus