Siap?! sebelum kita mulai, untuk memperkuat keyakinan, kita liat dulu hasil nya, KLIK DISINI...
=====================================================
kalo udah yakin, baru kita mulai.... jangan lupa baca bismillah... =====================================================
1. Login ke BLOG, klik rancangan, klik menu "edit html", kemudian Cari kode berikut ini :
]]></b:skin>
2.Copy kode dibawah ini tepat diatas kode diatas :
/* ----- NAVBAR MENU ----- */
#NavbarMenu {
width: 1000;
height: 35px;
background:#99C9FF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMqXClhWBCS2cw0_HPjyQjpqZ17Q2HQkwvh8FC9ifxgyloFMmSsm-BPRnDwLcVEc4rSeT93gDNMS6y68onhSr8ptFWaXMXVrtnah3IdZYF_iiKvnYeiy7VSnGJxecB38_JVBroPWtS7ym2/s800/navbar.gif) repeat-x top;
color: #3D81EE
margin: 0 auto 0;
padding: 0;
font: bold 11px Verdana, Verdana, Verdana;
border-top: 1px solid #AFAFAF;
border-bottom: 1px solid #FFFFFF;
}
#NavbarMenuleft {
width: 1000;
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: #3D81EE;
display: block;
text-transform: capitalize;
margin: 0;
padding: 9px 15px 8px;
font: normal 12px Verdana, Verdana, Verdana;
}
#nav li a:hover, #nav li a:active {
background:#99C9FF;
color: #3D81EE;
margin: 0;
padding: 9px 15px 8px;
text-decoration: none;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #3D81EE url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMqXClhWBCS2cw0_HPjyQjpqZ17Q2HQkwvh8FC9ifxgyloFMmSsm-BPRnDwLcVEc4rSeT93gDNMS6y68onhSr8ptFWaXMXVrtnah3IdZYF_iiKvnYeiy7VSnGJxecB38_JVBroPWtS7ym2/s800/navbar.gif) repeat-x top;
width: 150px;
color: #000;
text-transform: normal;
float: none;
margin: 0;
padding: 7px 10px;
border-bottom: 1px solid #99C9FF;
border-left: 1px solid #99C9FF;
border-right: 1px solid #99C9FF;
font: normal 11px Verdana, Verdana, Verdana;
}
#nav li li a:hover, #nav li li a:active {
background: #99C9FF;
color: #3D81EE;
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;
}
3. Belum selesai... sekarang coba cari kode berikut :
</header>
4. Copy kode dibawah ini tepat diatas kode di atas :
<div id='NavbarMenu'>
<div id='NavbarMenuleft'>
<ul id='nav'>
<li><a expr:href='data:blog.homepageUrl'>Beranda</a></li>
<li><a href='GANTI DENGAN URL KAMU'>Menu 1</a> </li>
<li><a>Menu 2</a>
<ul>
<li><a href='GANTI DENGAN URL KAMU'>Sub Menu 1</a></li>
<li><a href='GANTI DENGAN URL KAMU'>Sub Menu 2</a></li>
</ul>
</li>
<li><a>Menu 3</a>
<ul>
<li><a href='GANTI DENGAN URL KAMU'>Sub Menu 1</a></li>
<li><a href='GANTI DENGAN URL KAMU'>Sub Menu 2</a></li>
</ul>
</li>
</ul>
</div>
</div> <!-- end navbar -->
Alhamdulillah selesai...
nb: buat yang masih belum ngerti bisa tanya jawab di kotak komentar
0 komentar:
Posting Komentar