TRANSPARANT MENU HORIZONTAL DENGAN SUB PAGE

CARA MEMBUAT MENU HORIZONTAL DENGAN SUB PAGE

1. Sign in di blogger



2. Klik menu Layout



3. Klik menu Edit HTML



4. Klik link Download template, save dulu untuk di jadikan backup agar aman



5. Beri tanda centang pada kotak kecil di samping tulisan Expand Widget Template, sekali lagi jangan lupa beri tanda centang
   



6. Cari kode seperti berikut :
   

]]a></b:skin>

copy pastekan kode dibawah ini diatasnya

/* navbar
================== */

#NavbarMenu {
background: #0F4704 ;
border-bottom: 1px solid #18630A;
border-left: 1px solid #18630A;
border-right: 1px solid #18630A;
border-top: 1px solid #18630A;
width: 1010px;
height: 35px;
font-size: 12px;
font-family: Arial, Tahoma, Verdana;
color: #FFF;
font-weight: bold;
margin: 0;
padding: 0;
}
#NavbarMenuleft {
width: 680px;
float: left;
margin: 0;
padding: 0;
}
#NavbarMenuright {
width: 280px;
font-size: 11px;
float: right;
margin: 0;
padding: 6px 0 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: #79ED62;
border-bottom: 1px solid #18630A;
border-left: 1px solid #18630A;
border-right: 1px solid #18630A;
border-top: 1px solid #18630A;
display: block;
font-size: 16px;
font-family: Georgia, Times New Roman;
font-weight: normal;
text-transform: BOLD;
margin: 0;
padding: 9px 15px 8px;
}
#nav li a:hover, #nav li a:active {
background: #6EE6A1 ;
background:#004800;
opacity: 0.7;filter:alpha(opacity=5);zoom:1;
border-bottom: 1px solid #18630A;
border-left: 1px solid #18630A;
border-right: 1px solid #18630A;
border-top: 1px solid #18630A;
margin: 0;
padding: 9px 15px 8px;
text-decoration: none;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #C4DF9B;
background:#004800;
background:#004800;
opacity: 0.7;filter:alpha(opacity=5);zoom:1;
width: 150px;
color: #79ED62;
font-size: 14px;
font-family: Georgia, Times New Roman;
font-weight: normal;
text-transform: BOLD;
float: none;
margin: 0;
padding: 7px 10px;
border-bottom: 1px solid #18630A;
border-left: 1px solid #18630A;
border-right: 1px solid #18630A;
border-top: 1px solid #18630A;
}
#nav li li a:hover, #nav li li a:active {

background: #00480e;
color: #007236;
background:#004800;
opacity: 0.7;filter:alpha(opacity=5);zoom:1;

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;
}

Kemudian cari kode seperti ini <div id='content-wrapper'>
dan copy pastekan kode dibawah ini diatasnya ( sesuai dengan jenis template anda )

<div id='NavbarMenu'>
<div id='NavbarMenuleft'>
<ul id='nav'>
<li><a expr:href='data:blog.homepageUrl'> HOME</a></li>
<li>
<a href='ALAMAT URL ANDA' target='_new'>TITLE</a>
<ul>
<li>
<a href='ALAMAT URL ANDA' target='_new'>TITLE</a>
<ul>
<li><a href='ALAMAT URL ANDA' target='_new'> TITLE</a></li>
<li><a href='ALAMAT URL ANDA' target='_new'> TITLE</a></li>
<li><a href='ALAMAT URL ANDA' target='_new'> TITLE</a></li>
</ul>
</li>
<li><a href='ALAMAT URL ANDA' target='_new'> TITLE</a></li>
<li><a href='ALAMAT URL ANDA' target='_new'> TITLE</a></li>
<li><a href='ALAMAT URL ANDA.com' target='_new'> TITLE</a></li>
<li><a href='ALAMAT URL ANDA' target='_new'> TITLE</a></li>
</ul>
</li>
<li><a href='ALAMAT URL ANDA' target='_new'> TITLE</a></li>
<li><a href='ALAMAT URL ANDA' target='_new'> TITLE</a></li>
</ul>
</div>
</div>

HASILNYA SEPERTI INI

Artikel Lainnya Dibawah ini