PANDUAN,TIPS,TRIK DAN CARA MEMBUAT BLOG DENGAN MUDAH SERTA GRATIS

  • RSS
  • Delicious
  • Digg
  • Facebook
  • Twitter
  • Linkedin
  • Youtube

You need to upgrade your Flash Player to version 10 or newer.

MEMBUAT MENU NAVIGATOR HORISONTAL VERSI KEDUA

'Menu navigator horisontal' versi kedua,, Seperti postingan yang pertama (versi pertama),, langkah2 pembuatannya seperti berikut ,,,,


login ke blogger - pilih layout - edit Html
cari code   ]]</b:skin> 
copy code dibawah ini tepat diatas code tadi  ( ]]</b:skin>  )

/*******************Navigation Bar*******************/


#navbartop {
background: #E1DCCA url( );
width: 660px;
height: 35px;
font-size: 12px;
font-family: Arial, Tahoma, Verdana;
color: #FFFFFF;
font-weight: bold;
margin: 0px;
padding: 0px;
}


#nav {
margin: 0px;
padding: 0px;
}


#nav ul {
float: left;
list-style: none;
margin: 0px;
padding: 0px;
}


#nav li {
list-style: none;
margin: 0px;
padding: 0px;
}


#nav li a, #nav li a:link, #nav li a:visited {
color: #495D5C;
display: block;
font-size: 14px;
font-family: Georgia, Times New Roman;
font-weight: normal;
text-transform: uppercase;
margin: 0px;
padding: 9px 15px 8px 15px;
}


#nav li a:hover, #nav li a:active {
background: #EBE6D4 url();
color: #495D5C;
margin: 0px;
padding: 9px 15px 8px 15px;
text-decoration: none;
}


#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #E1DCCA;
width: 150px;
color: #495D5C;
font-size: 12px;
font-family: Georgia, Times New Roman;
font-weight: normal;
text-transform: uppercase;
float: none;
margin: 0px;
padding: 7px 10px 7px 10px;
border-bottom: 1px solid #FFFFFF;
border-left: 1px solid #FFFFFF;
border-right: 1px solid #FFFFFF;
}


#nav li li a:hover, #nav li li a:active {
background: #85ACAC;
color: #FFFFFF;
padding: 7px 10px 7px 10px;
}


#nav li {
float: left;
padding: 0px;
}


#nav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 170px;
margin: 0px;
padding: 0px;
}


#nav li li {
}


#nav li ul a {
width: 140px;
}


#nav li ul a:hover, #nav li ul a:active {
}


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

Simpan

Selanjutnya pindah  ke page element - add a gadget - pilih Html/JavaSricp
Copy dan paste code di dibawah ini

<div id='navbartop'>
<ul id='nav'>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li>
<a href='#'>grand father</a>
<ul>
<li>
<a href='#'>father</a>
<ul>
<li><a href='#'>son</a></li>
<li><a href='#'>daughter</a></li>
</ul>
</li>
<li><a href='#'>mother</a></li>
</ul>
</li>
</ul>
</div>
<div style='clear:both;'/>

Simpan.
sesuaikan code dengan blog anda termasuk warna ( cari kode warna disini )dan ukuran pada Css code

Salam Blogger

  • Share this
  • Sumbit to Digg
  • Sumbit to StumbleUpon
  • Sumbit to Delicious
  • Sumbit to Technorati
  • Sumbit to Reddit
  • Sumbit to Mixx
  • Sumbit to Twitter
  • Sumbit to Furl
  • Sumbit to Design Float
  • Sumbit to Blinklist
  • Sumbit to Yahoo Buzz
  • Sumbit to Google Bookmarks

Artikel Terkait

0 comments:

Post a Comment

SILAHKAH COMEN DULU...
MAKASIH TELAH MEMBERI COMEN DAN WUKTUNYA....
SALAM PERSAHABATAN.....
edy putra Jl.cik lanang62 Kauman Rt04/05 Jepara-59417

CARI ARTIKEL DISINI By Google

Loading

    COMENTATOR

    CHAT ROOM

    CONTAC Edy putra