03.14
GURU DESA
Sebenarnya banyak sekali script/ kode yang menjelaskan tentang pembuatan navigasi. Kode yang digunakan biasanya menggunakan tag <li> (singkatan dari list). Padahal sebenarnya <li> akan lebih optimal penggunaannya jika kita mau membuat menu navigasi drop down.
Kekurangan dari kode navigasi menggunakan <li> adalah script yang dipakai sangatlah panjang dibandingkan dengan tidak menggunakan <li> (perbedaannya sekitar 25%). 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.
"Bagaimana membuatnya?"
Lets go... kita mulai sekarang.
Untuk Kode CSS:
Tambahan:
Jika anda mau mengganti background menu, silahkan ganti kode yang warna biru (#6F0).
Jika mau mengganti warna tulisan menunya, ganti kode warna hijau (#C30)
Untuk kode warna silahkan anda pilih disini
Untuk kode HTML
Tambahan:
Gantilah Tulisan yang berwarna merah dengan url / link yang akan menjadi tujuan anda.
Gantilah tulisan yang berwarna coklat (menu1, menu2, ...) dengan nama menu yang anda inginkan.
Jika ingin menambahkan menu menjadi dua seperti punya blog ini, tinggal ikuti langkahnya sama seperti langkah diatas (tinggal ganti background dan warna tulisan menunya).
Selesai...
Mohon bantuannya jika dalam penerapan menu ini ada masalah, baik kesalahan dalam kode atau yang lainnya. Mohon maaf karena saya juga pemula.
Kekurangan dari kode navigasi menggunakan <li> adalah script yang dipakai sangatlah panjang dibandingkan dengan tidak menggunakan <li> (perbedaannya sekitar 25%). 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.
"Bagaimana membuatnya?"
Lets go... kita mulai sekarang.
Untuk Kode CSS:
#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}
Cari kode ]]></b:skin> ( untuk memudahkan pencarian, silahkan tekan ctrl+f ) Simpan kode diatas (yang ada didalam kotak hijau) di atas kode ]]></b:skin>#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}
Tambahan:
Jika anda mau mengganti background menu, silahkan ganti kode yang warna biru (#6F0).
Jika mau mengganti warna tulisan menunya, ganti kode warna hijau (#C30)
Untuk kode warna silahkan anda pilih disini
Untuk kode HTML
<div id="mnatas">
<ul><a href="http://congcot.co.cc/">Menu1</a></ul>
<ul><a href="http://congcot.co.cc/">Menu2</a></ul>
<ul><a href="http://congcot.co.cc/">Menu3</a></ul>
<ul><a href="http://congcot.co.cc/">Menu4</a></ul>
<ul><a href="http://congcot.co.cc/">Menu5</a></ul>
</div>
Cari kode <div id='content-wrapper'> dan simpan kode diatas (didalam kotak hijau) di atas kode <div id='content-wrapper'><ul><a href="http://congcot.co.cc/">Menu1</a></ul>
<ul><a href="http://congcot.co.cc/">Menu2</a></ul>
<ul><a href="http://congcot.co.cc/">Menu3</a></ul>
<ul><a href="http://congcot.co.cc/">Menu4</a></ul>
<ul><a href="http://congcot.co.cc/">Menu5</a></ul>
</div>
Tambahan:
Gantilah Tulisan yang berwarna merah dengan url / link yang akan menjadi tujuan anda.
Gantilah tulisan yang berwarna coklat (menu1, menu2, ...) dengan nama menu yang anda inginkan.
Jika ingin menambahkan menu menjadi dua seperti punya blog ini, tinggal ikuti langkahnya sama seperti langkah diatas (tinggal ganti background dan warna tulisan menunya).
Selesai...
Mohon bantuannya jika dalam penerapan menu ini ada masalah, baik kesalahan dalam kode atau yang lainnya. Mohon maaf karena saya juga pemula.
