Membuat Navigasi Melayang Pada Blog
Bersama Bang Kumbang - 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 :D
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">Langkah #2 : Koding CSS
<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>
#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 #2 : Masuk Ke Template -> Edit HTML
Langkah #3 : Pastekan Tepat dibawah <body> ataupun diatas wrapper teratas anda.
Langkah #3 : Pastekan Tepat dibawah <body> ataupun diatas wrapper teratas anda.
- CSS
Langkah #2 : Pastekan tepat diatas kode ]]></b:skin> atau </style>
Langkah #3 : Simpan Template. Dan lihat Hasilnya.
- Melalui Widget HTML/JavaScript
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
Sekian dan Terima kasih
Labels: Blog, Tips And Trick
1 Comments:
Boleh di coba gan
Post a Comment
Subscribe to Post Comments [Atom]
<< Home