Membuat Menu Navigasi yang Bersahabat

Cara membuat menu navigasi yang keren. Banyak sekali menu navigasi yang keren keren, tapi yang satu ini tidak lah kalah dengan menu navigasi navigasi lainnya. Menu navigasi ini cocok sekali dengan anda yang suka sekali dengan template yang simple dan bersahabat,

Contoh menu navigasi yang akan di bahas,

Bersahabat bukan ? Menu yang bagus bukan ? oke langsung ke cara pembuatan nya.

1. Login ke blog anda, Masuk ke Rancangan > Edit Html.

2. Copy code di bawah Lalu letakkan di atas ]]></b:skin>.

#menu{
width:700px;
}
#menu ul{
list-style:none;
}
#menu li{
list-style:none;
display:inline;
margin:0 5px;
}
#menu li a{
color:#b5b4b4;
text-transform:uppercase;
font-size:13px;
font-weight:bold;
text-decoration:none;
border-bottom:5px solid #b5b4b4;
cursor:pointer;
padding:0 0 1px 0;
}
#menu li a:hover{
border-bottom:5px solid #008fd5;
color:#008fd5;
text-decoration:none;
}
#menu li a.current{
border-bottom:5px solid #b5b4b4;
color:#008fd5;
text-transform:uppercase;
font-size:13px;
font-weight:bold;
text-decoration:none;
}

3. Simpan dulu, Lalu lanjutkan, cari kode ini : <div id='header'> , jika di bawah nya sudah ada menu navigasi, hapus saja. jika tidak ingin di hapus atau anda ingin menambahkan, letakan di tambah elemen juga bisa.

<div id="menu">
<ul>
<li><a href="#" class="red">home</a></li>
<li><a href="#" class="orange">about us</a></li>
<li><a href="#" class="yellow">services</a></li>
<li><a href="#" class="green">solutions</a></li>
<li><a href="#" class="blue">contact us</a></li>
</ul>
</div>

Nb : Teks yang diberi warna merah adalah Teks yang anda bisa ganti. Dan Teks yang berwarna biru bisa anda ganti dengan link yang anda ingin masukan.

 Semoga Bermanfaat !