Info Harga Komputer dan Gadget

Membuat menu navigasi

Advertisement
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
advertisement

4 comments:

Irwan Saputra said...

ane kira yang drop down....

gaptek32 said...

Waduh, ganti template gan :)
keren gan, tapi agak sedikit pusing dengan tampilan barunya

Jefry said...

kode2 diatas kalau dipasang di blog wp kira2 bisa tidak ya ?!

Belajar bisnis internet said...

Mantap...di lanjut gan....tutorialnya !!

Post a Comment

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