Kunjungi Blog Rumah Imajinasi, disana ada berbagai info artikel, tips and trik, gadget review, dan lainnya. Terima Kasih dan maaf jika artikel masih kurang.

Membuat Navigasi Sederhana

Ingin membuat menu navigasi sederhana seperti aku. Kalau ingin, ikutilah langkah langkahnya. Kita langsung saja pembahasanny, nggak usah bertele-tele.
Walaupun tidak begitu berpengaruh dalam hal kecepatan loading blog, tapi alangkah lebih bagusnya kita menggunakan script yang lebih sederhana. Dalam hal ini saya juga lebih suka yang sederhana dan berefek sangat baik.

Kode CSS.nya:


#mnatas{background:#6F0;font-size:13px;font-style:Arial;font-weight:700;height:27px;width:100%}
#mnatas ul{float:left;height:27px;line-height:1.9em;list-style:none;margin:0;padding:0;text-align:center;width:129px}
#mnatas ul a{color:#C30;padding-top:3px}
#mnatas ul a:hover{background:#fff;color:#000;display:block;height:27px;margin:0;padding:0;text-decoration:blink}

Lalu sobat cari kode ]]></b:skin> . Setelah kode sudah ketemu, simpan kode diatas kotak itu diatas kode ]]></b:skin>.
1. ingin mengganti background menu, ganti kode (#6F0) yang berwarna merah.
2. ingin mengganti warna tulisan menunya, ganti kode (#C30) yang berwarna kuning.

Untuk kode HTML


<div id="mnatas">
<ul><a href="http://www.tkjlover.web.id">Menu1</a></ul>
<ul><a href="http://www.tkjlover.web.id">Menu2</a></ul>
<ul><a href="http://www.tkjlover.web.id">Menu3</a></ul>
<ul><a href="http://www.tkjlover.web.id">Menu4</a></ul>
<ul><a href="http://www.tkjlover.web.id">Menu5</a></ul>
</div>



Cari kode <div id='content-wrapper'> dan simpan kode diatas (didalam kotak hijau) di atas kode <div id='content-wrapper'>.
Jangan lupa ganti link dengan nama situs sobat dan ganti menu1 dengan nama menu sobat.

Sekian dari aku, semoga bermanfaat bagi sobat. Terima kasih
Stumble
Delicious
Technorati
Twitter
Facebook
Reddit


Related Posts :

9 komentar:

Risty said...[Reply to comment]

Keren nih. Sebelum ngeblog, saya bikin wapsite gitu, tapi tombol navigasinya saya pake gambar semua. Kalo untuk blog, lebih cocok diterapin cara di atas. thx for share, langsung tak cobain.

Rumah Imajinasi said...[Reply to comment]

oke sama-sama and thx kunjungnya....
silahkan dicoba,,,

Ka Damar said...[Reply to comment]

Mantep SOb ^^


mampir ^^

Rumah Imajinasi said...[Reply to comment]

Thank sob..

Gieterror said...[Reply to comment]

mangstap nih artikelnya,langsung praktek ah. .

sodiyc & acun said...[Reply to comment]

Makasih tipsnya Gan!

PIK Remaja Al-Hikmah said...[Reply to comment]

Makasih infonya, ijin mencoba kawan, guna menambah wawasan Blogger

Rumah Imajinasi said...[Reply to comment]

Gieterror: silahkan dicoba...

Sodiyc: masma sob

PIK: masama sob, silahkan dicoba aja...

terima kasih atas kujungan sobat dan memberi komentar pada posting saya..

Mutiara Firdausy Hakim said...[Reply to comment]

itu yang kode html nya, kita copas dimana ya?

Post a Comment

 

Ritem Blog is proudly powered by Blogger.com | Template by Blog Zone