Cara Membuat Navigasi Horizolntal

Pada  kali ini saya ingin berbagi bagaimana caranya membuat navigasi horizotal. Untuk itu kita langsung aja ke TKP...

• Buka blogger anda
• Pilih desain kemudian Edit HTML
• Cari Tag </header>   
• Copi kode dibawah ini dan taruh di bawahnya

<!-- univmenucontainer -->
<div id='univmenucontainer'>
  <div id='menu'>
  <ul>
    <li><a expr:href='data:blog.homepageUrl'>Home</a></li>
    <li><a href='#'  title='ganti'>About Us</a></li>
    <li><a href='#' title='ganti'>Download</a>
      <ul class='subnav-2'>
        <li><a href='#' title='Ebook'>Ebook</a>
        </li>
        <li><a href='#' title='ganti'>Software</a>
        </li>
      </ul>
    </li>
    <li><a href='#' title='ganti'>Sitemap</a></li>
        <li><a href='#' title='ganti'>Produk</a></li>
   <li><a href='#' title='ganti'>Belum Ada</a></li>
  </ul>
</div>        
</div>
<!-- /univmenucontainer -->

Ganti tanda " # " pada kode diatas dengan URL link lengkap , 

misalnya URL halaman Page , atau URL postingan blog yang ingin ditampilkan 

di Tab navigasi blog anda.
Contoh URL lengkap : http://templatepertama1.blogspot.com/p/about.html
Ganti title nya sesuai dengan Link yg anda tampilkan
Ganti keterangan TEXT  : About ; Ebook,SOftware dll dgn Text sesuai 

dengan link yg ingin ditampilkan.

•  Cari kode ]]></b:skin>, kemudian taruh di atasnya kode dibawah ini

/* Navigasi horrisontal --*/
#univmenucontainer{
height:26px;
display:block;
margin:5px 0;padding:2px;
font: 14px "Century gothic",verdana, Arial, sans-serif;
font-weight:normal;background:#000444;
}
#menu ,#menu ul {
height:24px;
margin: 0 1px;
padding: 0;
list-style: none;
height:24px;
}
#menu a {
color: #B3DBEF;
display: block;
font-weight: normal;
padding: 4px 5px;
background:#000222;
border-left:1px solid #666;
}
#menu a:hover {
background:#999;
color: #222;
display: block;
text-decoration: none;
background:#0fffff;
border:0.5px solid #666;
}
#menu li {
float: left;
margin:0;
padding: 0;
}
#menu li li {
float: left;
margin: 0px 0px 0px 5px;
padding: 0px;
width: 130px;
background:#aaa;
border:1px solid #666;
}
#menu li li a, #menu li li a:link, #menu li li a:visited {
background:#0fffff;
width: 120px;
float: none;
margin: 0px;
padding: 2px 10px 2px 10px;
color:#000;
}
#menu li li a:hover, #menu li li a:active {
background:#0fffff;
border:0.5px solid #666;
width: 120px;
float: none;
margin: 0px;
padding: 2px 10px 2px 10px;
color:#06415F;
}
#menu li ul {
position: absolute;
width: 10em;
left: -999em;
z-index:1;
}
#menu li:hover ul {
left: auto;
display: block;
}
#menu li:hover ul, #menu li.sfhover ul {
left: auto;
}

• Kemudian Save perubahan tadi

sumber: http://universityofbloggers.blogspot.com

Artikel Yang Terkait: