Cara Singkat membuat Tab Menu

21/03/2012 02:56

 

Cara Singkat membuat Tab Menu 
Mau Membuat Tab Menu Seperti Dibawah:
 
Caranya Gampang,silahkan anda Ikuti Petunjuk saya tanpa menambah dan mengurangi isinya,
Untuk membuatnya kita tidak pelu menggunakan javaScript, ini 100% menggunakan CSS.
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 {
 
3. Buka Rancangan -> Elemen Halaman -> Tambah Gadget -> Terus masukan Kode HTML Berikut Ini:
 
<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 
 
**- Untuk code CSS bisa anda rubah warnanya sesuai keinginan.
- Untuk code HTML simpan dan sesuaikan dengan template anda masing-masing.
 
 
Selesai...
 
Mudah banget Bukan???

—————

Back