Admin Pada 7/22/2012 Membuat menu navigasi

Baca Juga

Advertidement

Setelah Kemarin Kita membahas tentang Style header dan logo kini kita lanjutkan ke bagian menu navigasi

menu navigasi berfungsi untuk menunjukan kepada pengunjung agar lebih mudah apa yang mereka cari, biasanya menu di tujukan untuk menampilkan kategory artikel atau artikel penting yang terdapat pada blog misalnya Home about, contact us dan lainya.

oke langsung saja kita buat stylenya, Cari kode berikut :

]]></b:skin>

kemudian copy code berikut ini diatasnya:

#menu-wrapper{background: #558701;margin:0 auto;text-align: left;color:#fff;width:900px;height:30px;}
#menu,#menu ul{list-style-type:none;list-style:none;position:relative;text-align:left;font-size:12px;font-family:Arial;font-weight:bold;padding:0px 1px;}
#menu a{height:24px;display:block;color:#fff;text-decoration:none;background:none;padding:5px 6px 1px 6px;border-right:1px solid #fff;}
#menu a:hover{ color:#000;}
#menu li{float:left;position:relative;padding:0px 0px}

kemudian kita akan buat kode HTML nya,  cari kode ini :

<section id='mainwrap'>

kemudan copy kode ini diatasnya :

<div id='menu-wrapper'>
<ul id='menu'>
<li><a href='/'>Home</a></li>
<li><a href='/'>About</a></li>
<li><a href='/'>Contact Us</a></li>
<li><a href='/'>Edit sendiri ya gan</a></li>
</ul>
</div>

Save dan lihat hasilnya
sampe sini dulu tutorialnya besok kita lanjut lagi ya gan

Advertidement

Related Posts