Cara membuat Menu Horizontal

Senin, 06 September 2010

1. Login ke blogger » layout / tata letak » edit HTML
2. Masukan CSS dibawah sebelum kode ]]></b:skin>:

#navigation {  
     list-style: none;  
     background: #b60002;  
     overflow: hidden;  
     width: 922px;  
 } 
#navigation li {
 float: left;
 border-right: solid 1px #ca0002;
 height: 35px;
}
#navigation li a:link, #navigation li a:visited {
 text-decoration: none;
 display: block;
 height: 35px;
 color: #fff;
 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;
}
3. Dan ini adalah code HTML-nya.
<ul id="navigation">
 <li class="first"><a href="#">Home</a></li>
 <li><a href="#">Video</a></li>
 <li><a href="#">NewsPulse</a></li>
 <li><a href="#">U.S.</a></li>
 <li><a href="#">World</a></li>
 <li><a href="#">Politics</a></li>
 <li><a href="#">Justice</a></li>
 <li><a href="#">Entertainment</a></li>
 <li><a href="#">Tech</a></li>
 <li><a href="#">Health</a></li>
 <li><a href="#">Living</a></li>
 <li><a href="#">Travel</a></li>
 <li><a href="#">Opinion</a></li>
 <li><a href="#">iReport</a></li>
 <li><a href="#">Money</a></li>
 <li><a href="#">Sports</a></li>
</ul>
4. Simpan template.
::catatan:
- Untuk code CSS bisa anda rubah warnanya sesuai keinginan.
- Untuk code HTML simpan dan sesuaikan dengan template anda masing-masing.

0 komentar:

Posting Komentar

Your Comment = My Inspiration