Cara Membuat Menu Header Dengan CSS Di Blog

Salah satu cara yang tidak terlalu rumit untuk menggunakan perintah-perintah CSS adalah dengan menggunakan software dreamweaver. Ketika Anda mengetikan code-code CSS pada dreamweaver secara otomatis akan mucul code-code CSSnya disana.

Memang bermacam-macam cara untuk membuat webisite agar kelihatan lebih menarik, salah satunya dengan menggunakan CSS (colek sana sini ). Dengan code CSS, selain membuat halaman webiste Anda enak di pandang mata, Code CSS lebih ringan loadingnya dari pada Java Script.



Lalu bagaimana cara menggunakan CSS, apakah kita harus hapal dengan code-codenya?, Tidak perlu sampai hapal, saya pun tidak pernah hapal dengan yang namanya code css, dengan keinginan yang kuat untuk belajar CSS pasti Anda juga bisa, dengan modal colek sana sini seperti halnya saya, lama-lama juga pasti Anda memahaminya. Salah satu cara yang tidak terlalu rumit untuk menggunakan perintah-perintah CSS adalah dengan menggunakan software dreamweaver. Ketika Anda mengetikan code-code CSS pada dreamweaver secara otomatis akan mucul code-code CSSnya disana.

Langsung saja kita kembali ke topi awal yaitu membuat header home page dengan CSS. Langkah - langkahnya sebagai berikut :

1. Supaya gampang silahkan Anda gunakan Gambar Headernya disini, Save as dengan nama file header.jpg
2. Copy-Paste code html di bawah ini, Kemudian simpan dengan nama header.html :
   

   
   
   
   
   
   
   
   
   
   
   
   
   Home
   About
   Services
   Staff
   Portfolio
   Contact
   
   
   
   

3. Agar code html di atas sesuai dengan apa yang Anda inginkan maka Anda perlu menambahkan code CSS seperti di bawah ini, Code css di bawah ini tambahkan di antara code
   

   body{
   margin: 0;
   padding: 0;
   text-align: center;
   font: 85% arial, helvetica, sans-serif;
   background: #B0BFC2;
   color: #444;
   }
   
   #container{
   text-align: left;
   margin: 0 auto;
   width: 800px;
   background: #FFF;
   }
   
   h1{
   margin: 0;
   padding: 0;
   border-bottom: 1px solid #fff;
   }
   
   h1 img{
   display: block;
   border: 0;
   }
   
   ul#topnav{
   margin: 0;
   padding: 5px 10px;
   list-style-type: none;
   background: #387A9B;
   }
   
   ul#topnav li{
   display: inline;
   background: url(header-bullet.gif) no-repeat 0 50%;
   padding: 0 10px 0 8px;
   }
   
   ul#topnav li a:link, ul#topnav li a:visited{
   text-decoration: none;
   color: #fff;
   }
   
   ul#topnav li a:hover, ul#topnav li a:active{
   text-decoration: none;
   color: #387A9B;
   background: #fff;
   } 

4. Selesai

Catatan : Supaya tidak terjadi masalah error, Letakan file header.jpg dan header.html dalam satu folder..!