Horizontal CSS Menu, Keren dan Sederhana

Horizontal CSS Menu

Horizontal CSS Menu, Keren dan Sederhana -- Script ini asalnya dari orang bule, katanya, tutorial ini untuk pemula, katanya lagi, banyak pemula tidak menyadari bahwa betapa sederhananya/mudahnya membuat menu hanya dengan menggunakan CSS murni bahkan bisa dengan menambahkan efek hover yang simple namun terlihat keren.

Kata si bule lagi, nih cara membuatnya. *smile

1. Login ke Akun blogger

2. Klik Template

3. Klik Edit HTML

4. Klik Proceed

5. Cari taq ]]></b:skin> (gunakan kontrol F untuk memudahkan pencarian)

6. Setelah dapat lalu masukkan kode dibawah ini diatas taq ]]></b:skin> 

#nav {background: #2175bc;repeat-x top;width:980px;
height:35px;margin:0 auto;padding:0 auto}
#nav li
{display:inline;}
#nav li a {
font-family: Arial;
font-size:11px;
text-decoration: none;
float:left;
padding: 10px;
background-color: #2175bc;
color: #fff;
}
#nav li a:hover {
background-color: #2586d7;
margin-top:-2px;
padding-bottom:12px;
}

7. Cari taq </head> (gunakan kontrol F untuk memudahkan pencarian)

8. Setelah dapat lalu masukkan kode dibawah ini dibawah taq </head>

<ul id='nav'>
<li><a href='#'>Edit aku</a></li>
<li><a href='#'>Edit aku</a></li>
<li><a href='#'>Edit aku</a></li>
<li><a href='#'>Edit aku</a></li>
<li><a href='#'>Edit aku</a></li>
<li><a href='#'>Edit aku</a></li>
</ul>
 

9. Kik Pratinjau, kalau tidak terjadi kesalahan lalu klik save template dan lihat penampakannya. 

DEMO 

lihat menu yang warna biru

 

Sumber : Tutorial to create a pretty cool, simple, horizontal CSS menu