Membuat Menu Cantik Sederhana Blog Dengan CSS Bagian 1

Selamat Pagi.

Lama rasanya sudah tidak posting Blog, karena kesibukan yang membuat diri ini higga memmerlukan yang namanya istirahat. Walaupun begitu, pikiran harus tetap semagat menyambut hari esok.

Sobat di sini pasti pernah melihat menu navigasi yang biasanya terletak di atas. Dengan menu tersebut diharapkan membuat tampilan Blog maupun Web semakin menarik untuk dilihat.

Menu yang akan saya buat ini sangat sederhan untuk keperluan belajar, selebihnya kreatifitas anda yang akan bekerja untuk menghasilkan tampilan yang lebih menarik lagi dantentunya power-full. Menu ini hanya menggunakan CSS dasar saja untuk keperluan stylenya, jadi saya anggap anda sudah paham tentang CSS walaupun hanya dasarnya saja.

1. CSS Style

#menu {
    background-color: #757575;
    width: 960px;
    height: 37px;
}
#nav-menu {
    list-style: none;
}
#nav-menu li {
    background-color: #DDDDDD;
    margin: 0px 1px;
    text-align: center;
    width: 100px;
    line-height: 35px;
    height: 35px;
    float: left;
    border: 1px solid #993366;
}
#nav-menu li:hover {
    background-color: #F3F2E4;
}
#nav-menu li a {
    color:#039;
    text-decoration:none;
    font-weight:bold;
}
#nav-menu li a:hover {
    color:#09F;
    font-weight:normal;
}

2. List Menu

<div id="menu">
  <ul id="nav-menu">
    <li><a href="">Home</a></li>
    <li><a href="">Menu 1</a> </li>
    <li><a href="">Menu 2</a> </li>
    <li><a href="">Menu 3</a> </li>
    <li><a href="">Menu 4</a></li>
    <li><a href="">Menu 5</a></li>
  </ul>
</div>

Saya tidak akan menjelaskan secara terperinci, biarkan pikiran anda memahami. Karena dengan begitu anda akan lebih bisa mengerti logikanya. Silakan edit-edit kodenya, dan temukan hadiah di dalamnya. Hehehehe.....

Anda juga dapat menggunakan Menu ini di Blog anda dengan cara :
1. Login ke akun Blogger anda.
2. Pilih Template klik pada "Edit HTML"
3. Cari kode "]]></b:skin>"
4. Paste-kan kode "CSS Style" tepat diatas  "]]></b:skin>"
5. Kemudian cari kode "</header>" ( letak menu )
6. Lalu paste-kan kode "List Menu" diatas "</header>"

Dalam peletakan Menu tergantung keinginan kita, apa diletakan di atas samping, tengah atau bawah.

"Salam Blogger Warok"