Info Harga Komputer dan Gadget

Membuat menu navigasi

advertisement
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

No comments:

Post a Comment

Blog Ini Dofollow Ya bro tapi jangan nyepam komentar secara bijak dan sesuai dengan postingan