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

Setelah kita mengetahui persiapan awal yang akan kita buat selanjutnya kita koding, dimulai dari koding html, dan koding cssnya,
Langkah #1 : Koding HTML

<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

Setelah kita melakukan langkah langkah diatas selanjutnya kita melakukan penerapannya pada blog kita, ada banyak cara untuk melakukan langkah ini, berikut beberapa diantaranya.

  • Langsung ke Template Blog
    • HTML

Langkah #1 : Pertama, copy terlebih dahulu koding diatas, mulai dari html

Langkah #2 : Masuk Ke Template -> Edit HTML
Langkah #3 : Pastekan Tepat dibawah <body> ataupun diatas wrapper teratas anda.
    •  CSS

Langkah #1 : Copy Kode css diatas untuk membaut menu navigasi melayang.

Langkah #2 : Pastekan tepat diatas kode ]]></b:skin> atau </style>
Langkah #3 : Simpan Template. Dan lihat Hasilnya.
  • 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

Langkah #2 : Masuk ke menu Tata Letak, jika koding diatas berhasil tentu akan muncul section baru tepat pada bagian paling atas dari editor tata letak anda.
Langkah #3 : Tambahkan Widget -> Pilih HTML/JavaScript
Langkah #4 : Pastekan kode html tadi ke laman kosong widget
Langkah #5 : Lakukan langkah #1 – #3 pada penerapan css metode sebelumnya.
Langkah #6 : Simpan Template dan liaht hasilnya.
Sekarang menu navigasi anda sudah melayang bukan? Oke, cukup sekian pembahasan kali ini tentang Membuat Navigasi Melayang Pada Blog. Semoga bermanfaat bagi anda. Jika anda masih belum faham atau ada kesalahan silahkan komen diabahah kami pasti melakuakn respon dan perbaikan.

Sekian dan Terima kasih

Azhari Sikumbang

Tulis dan bicarakan, agar lebih berguna. (Github | Linked in)
~ azhari@coretanit.com