TRANSLATE THIS PAGE

English French German Spain Italian Dutch

Russian Portuguese Japanese Korean Arabic Chinese Simplified

Friday, January 22, 2010

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



1 comments:

Rizky2009 said...

wah keren nih menu horizontal, tp blog q dah tak pasang dua

SILAHKAN TINGGALKAN KOMENTAR DISINI NO SPAM..NO PORN... KRITIK DAN SARAN YANG MEMBANGUN SANGAT DIBUTUHKAN DAN BERMANFAAT.KOMENTAR YANG MENGHUJAT ATAU DENGAN KATA KATA KOTOR AKAN TERHAPUS DENGAN SENDIRINYA TERIMA KASIH

KOMENTAR TERAKHIR


MY FRIEND


ARAHKAN MOUSE KE IMAGE AKAN BERHENTI

Blogger templates


MAU SEPERTI DIATAS KLIK DISINI

CATEGORY

POSTING TERBARU

 
Back To Top - GURU PKn SMP PGRI 02 BATU - Template By Blogger Edited By Savalia