MEMBUAT MENU HORIZONTAL DENGAN CSS

Sebenarnya trik ini / cara ini sudah sangat lazim digunakan di dunia blog dan web design. Tapi, meski udah lazim aku akan memberikan tutorial gimana cara buat menu horizontal menggunakan css kode. Untuk demonya bisa kalian lihat disini. Nah, untuk membuat menu seperti itu yang diperlukan hanyalah kode css dan html saja. Sehingga tidak akan membuat blog kita menjadi sangat berat. Oke langsung saja :


1. Login akun blog anda
2. Masuk ke rancangan / Tata Letak
3. Masuk ke Edit HTML kemudian copy paste kode css berikut diatas ]]></b:skin> :



#navigation {  
     list-style: none;  
     background: #000000;  
     overflow: hidden;  
     width: 955px;  
 } 
#navigation li {
 float: left;
 border-right: double 1px #DC143C;
 height: 35px;
}
#navigation li a:link, #navigation li a:visited {
 text-decoration: none;
 display: block;
 height: 35px;
 color: #FFFFFF;
 line-height: 35px;
 padding: 0 9px 0 9px;
 border-right: solid 1px #990000;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 12px;
 font-weight: bold;
}
#navigation li a:hover {
 background: #990000;
 color: #fff;
 list-style: none;
}
#navigation li.first {
 border-left: solid 1px #ca0002;
}


4. Cari kode <div id='header-wrapper'> dan copy-paste kode html berikut diatasnya :



<ul id="navigation">
 <li class="first"><a href="http://ubaynyzhar.blogspot.com">Home</a></li>
 <li><a href="#">Profile</a></li>
 <li><a href="#">Contact Us</a></li>
 <li><a href="#">Tips n Trik</a></li>
</ul>


5. Simpan Template dan lihat hasilnya...!!!
Selamat mencoba dan berkreasi...!!! Jangan lupa komentarnya...!!! Thanks All...!!!

:: Keterangan ::
* kode css bisa kalian sesuaikan dengan keinginan kalian dan dengan template kalian
* kode html sesuaikan dengan url blog kalian