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 tetap terlihat keren.

Cara membuatnya.

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 

Perhatian! Artikel ini telah di Copas secara Curang/Licik dan Rakus Oleh Blog, 

http://cararahasiaini.blogspot.com 

Kurang lebih ada 15 Artikel saya yang di Copas