Membuat navigasi atau menu melayang pada blog. Mungkin anda sering melihat menu navigasi melayang di situs ataupun blog di internet,seperti menu navigasi facebook. Namun,
pernahkah anda terpikir bagaimana cara membuatnya? Nah, sebelum menjawb pertanyaan itu, mari kita membahas apa itu menu navigasi.
Menu navigasi adalah salah satu bagian terpenting dalam pemangunan website yang difungsikan untuk mempermudah user menjelajahi situs anda. Sehingga situs anda terjelajah dan user mendapatkan apa yang ia inginkan.
Biasanya menu navigasi berada dibagian apaling atas halaman website, dan tak jarang kita temui ada menu navigasi yang melayang. Menu navigasi kan terus berada pada posisi teratas dari halaman kita walaupun kita melakukan scoll down. Alhasil, menu navigasi tidak akan luput dari mata pembaca situs anda. Seperti halnya blog saya ini, namun saya tidak menggunakan navigasi melaikan seacrh bar melayang. heheheh tampil beda gitu 😀
Persiapan Awal
Sebagai persiapan awal membaut menu navigasi melayang tentu login ke akun blogger agan hehe :D. selanjutnya diikut langkah berikut :
Langkah #1 : Penentuan id elemen menu navigasi.
Dalam langkah ini sobat harus tahu id dari elemen navigasi, untun di remote dengan koding css nantinya. Contoh kita membuat menu navigasi dengan id elemen navigasi
Langkah #2 : Penentuan isi menu navigasi
Isi navigasi dapatk ita tentukan tentunya sesuia dengan tema blog kita,. Dalam kasus ini saya memberikan contoh menu navigasi home, artikel,kontak
Membuat Koding Ke BLog
<div id=”navigasi”>
<ul>
<li>
<a href=”URL BLOG ANDA”>Home</a>
</li>
<li>
<a href=”URL Menu Artikel”>Artikel</a>
</li>
<li>
<a href=”URL Kontak”>Kontak</a>
</li>
</ul>
</div>
Langkah #2 : Koding CSS
#navigasi {width:100%;height:30px;position:fixed;z-index:-9999;overflow:hidden;background:#09f ;top:0;left:0}
#navigasi ul{padding:5px;}
#navigasi ul li {display:block;padding:5px;text-decoration:none;}
#navigasu ul li a {color:#fafafa; text-decoration:none}
Penerapan Menu Navigasi Pada Blog
- Langsung ke Template Blog
-
HTML
-
Langkah #1 : Pertama, copy terlebih dahulu koding diatas, mulai dari html
Langkah #3 : Pastekan Tepat dibawah <body> ataupun diatas wrapper teratas anda.
-
- CSS
Langkah #1 : Copy Kode css diatas untuk membaut menu navigasi melayang.
- Melalui Widget HTML/JavaScript
Langkah #1 : Pertama, masuk ke template -> edit HTML cari section teratas pada blog anda, atau anda bisa membaut nya secara manual dengan kode berikut cipy-paste tepat dibawah kode <body> dan simpan temlate
Sekian dan Terima kasih
