Top navigation bar adalah elemen antarmuka pengguna yang umumnya ditemukan di situs web, aplikasi web, dan antarmuka perangkat lunak lainnya. Fungsinya sebagai menu navigasi dalam mengakses berbagai bagian atau halaman situs web.
Top navigation bar merupakan elemen penting dalam desain situs web atau blog. Ini membantu pengguna agar lebih mudah menavigasi ke berbagai halaman dan bagian situs lainnya dengan cepat dan mudah.
Bagi Anda yang memiliki blog pada platform Blogspot (Blogger) pun demikian. Dengan menambahkan top navigation bar akan meningkatkan pengalaman pengguna dan membantu mengatur konten blog Anda dengan lebih baik lagi.
Oleh karenanya, dalam artikel kali ini akan dijelaskan tentang hal itu mulai tahap dasarnya. Dan template yang digunakan pun belum berisi banyak kode sehingga akan mempermudah fokus dalam pembahasan.
Cara Membuat "Top Navigation Bar" dengan HTML dan CSS
Top navigation bar disebut juga dengan "menu navigasi utama" atau "navbar". Menu ini merupakan elemen kunci dalam desain antarmuka web yang membantu pengguna dengan mudah menjelajahi halaman-halaman penting dalam situs Anda.
Dalam artikel ini, kami akan memandu Anda melalui langkah-langkah praktis untuk membuat top navigation bar yang sederhana. Namun dengan kesederhanaan itu terkadang bisa menjadi menarik dan sesuai dengan gaya desain situs seseorang.
Terutama bagi mereka yang lebih mementingkan kecepatan loading sebuah website ketika diakses oleh pengunjung blog. Dibandingkan dengan ramenya tampilan halaman web dengan beragam animasi.
Nah, apakah Anda seorang pemula yang ingin memahami dasar-dasar pembuatan top navigation bar? artikel ini akan membantu Anda mencapai tujuan tersebut.
Untuk itu, siapkan diri Anda untuk menambah pengetahuan tentang top navigation bar ini. Setelah itu mari kita mulai pelajaran kita hari ini agar bisa menciptakan menu navigasi pertama untuk pengunjung situs blogspot Anda!
Cara Menambahkan Top Navigation Bar pada Theme Blogger
Artikel kali ini akan membahas langkah-langkah praktis tentang cara membuat top navigation bar. Seperti biasa, bahan referensi yang digunakan yaitu w3schools.com yang diadaptasikan dengan platform blogspot. Selengkapnya, berikut ini tutorial cara membuat top navigation bar dengan HTML dan CSS untuk Blogspot.
Langkah 1: Masuk ke Dashboard Blogger
Langkah pertama adalah
masuk ke akun Blogger Anda. Buka browser web dan ketik "www.blogger.com"
di bilah alamat. Masukkan kredensial login Anda dan akses dashboard
Blogger.
Langkah 2: Pilih Blog yang Ingin Dimodifikasi
Jika Anda memiliki lebih dari satu blog di akun Blogger Anda, pilih blog yang ingin Anda tambahkan top navigation bar-nya. Di dasbor Blogger, Anda akan melihat daftar blog yang telah Anda buat. Untuk tujuan itu, klik blog yang sesuai.
Langkah 3: Akses Tema > Edit HTML
Setelah memilih blog, langkah selanjutnya adalah masuk ke bagian "Tema". Kemudian pilih tanda panah kecil di samping tulisan "SESUAIKAN". Setelah itu silahkan klik "Edit HTML".
Jika memungkinkan, kami sarankan untuk membuat tema yang dibuat sendiri dari nol. Template paling basicnya misalkan seperti ini agar fokus memahami kode:
Langkah 4: Tambahkan Kode HTML
Untuk membuat top navigation bar ada yang menggunakan gadget "Halaman" yang disediakan oleh Blogger. Namun pada pelajaran kali ini menggunakan kode HTML yang diletakan setelah tag <body>. Kode inilah yang bisa dikembangkan sendiri untuk menambah apa pun yang dibutuhkan.
Kode di atas akan menghasilkan halaman web sebagai berikut:
Langkah 5: Tambahkan Kode CSS
Setelah berhasil menampilkan tulisan menu navigasi, selanjutnya tambahkan kode CSS berikut di antara tag <b:skin><![CDATA[ dan tag ]]></b:skin>.
Dengan kode di atas, halaman web akan terlihat lebih menarik seperti ini. Silahkan eksplorasi lebih jauh dengan mengotak-atik kode di atas. Jangan takut salah ya! Kode di atas fungsinya untuk mempercantik tampilan sesuai style yang Anda inginkan. Jika kemudian ada yang error tinggal balik ke blog ini lagi dan copas dari awal. Jika capek sedikit tidak mengapa kan ya, namanya juga belajar..... hehe.
Langkah 6: Simpan pengaturan template
Sekarang top navigation bar sudah ditambahkan ke blog Anda. Untuk menyimpan perubahan pada theme blogger, silahkan klik icon "Save" di pojok kanan atas.
Kesimpulan
Anda dapat menggunakan gadget "Halaman"
yang disediakan oleh Blogger untuk membuat top navigation bar dengan
mudah. Selain itu, menu yang satu ini bisa dibuat secara langsung bersentuhan dengan kode HTML dan CSS.
Selain itu, Anda juga dapat menyesuaikan tampilan top navigation bar
agar sesuai dengan desain blog Anda jika sebelumnya sudah menyiapkan desain sendiri.
Akhir kata, dengan menambahkan top navigation bar ini akan meningkatkan pengalaman pengguna di blog dan membantu pengunjung menemukan konten dengan lebih mudah.
Selamat mencoba!
Tidak ada komentar:
Posting Komentar