Cara Membuat Menu Navigasi Responsive dengan CSS di Blog
Jika Anda ingin membuat menu navigasi fungsional yang tampak hebat untuk situs Blogger Anda, pelajari caranya dalam panduan langkah demi langkah ini yang membahas lebih dalam tentang membuat menu navigasi responsive dengan CSS. Anda juga bisa membaca posting sebelumnya tentang Cara Membuat Footer Responsive dengan HTML dan CSS di Template Free agar bisa membuat tampilan website yang keren.
Pada postingan kali ini, kami akan membahas cara membuat menu navigasi dasar responsive dengan dropdown hanya menggunakan HTML dan CSS. Banyak menu navigasi (terutama yang responsive) dibuat menggunakan kombinasi HTML, CSS, dan Javascript. Metode menggunakan penempatan kode CSS sederhana ini akan menunjukkan bahwa Javascript tidak selalu diperlukan!
Kode yang akan kita buat hanya menyertakan CSS terpenting yang diperlukan untuk struktur dan gaya dasar. Ini membuatnya lebih mudah untuk mengikuti dan memahami tujuan dari setiap baris kode. Ini juga berarti bahwa produk akhir disiapkan dan siap untuk kustomisasi unik Anda. Untuk itu simak ulasan yang akan Admin jelaskan dibawah ini sampai selesai agar kalian bisa mengaplikasikannya dengan mudah di blog.
Cara Membuat Menu Navigasi Responsive dengan CSS
Perhatikan bahwa Anda harus memiliki menu default blogger yang dibuat untuk menggunakan widget Nav Menu, jadi pastikan untuk mengikuti tutorial ini secara lengkap meskipun Anda hanya ingin menggunakan Elementor. Jika Anda tidak memiliki template, Anda dapat mengunduh Template Blogger Oreo.
Berikut adalah langkah-langkah yang dapat Anda ikuti untuk membuat menu navigasi responsive dengan css di blog Anda. Perlu diperhatikan bahwa disini kami akan memberikan contoh penggunaan template Oreo untuk memodifikasi tampilan halaman menjadi lebih menarik dari sebelumnya.
1. Buka Edit HTML
Buka dashboar blogger pilih Tema > Edit HTML. Selanjutnya cari kode submenu seperti berikut ini pada contoh kode submenu template oreo dibawah ini.
<nav class='mini-list'>
<ul id='show-list'>
<li><a href='/'>HOME</a></li>
<li><a href='#'>BLOG</a></li>
<li class='dropdown-item'><span class='dropdown-label'>FILM <span class='dropdown-symbol'>⏬</span></span>
<ul class='menu-dropdown'>
<li><a href='#'>Korea</a></li>
<li><a href='#'>Jepang</a></li>
<li><a href='#'>Cina</a></li>
<li><a href='#'>Thailand</a></li>
</ul>
</li>
<li><a href='#'>DIY</a></li>
<li><a href='#'>INSPIRASI</a></li>
</ul>
</nav>Selanjutnya, hapus kode seperti di atas pada template oreo dari tag <nav class='mini-list'> sampai tag penutup </nav>. Disini kita akan menggantinya dengan kode yang sudah dibuat untuk membentuk menu navigasi. Jika Anda menggunakan template lain, Anda dapat menyesuaikan kode sendiri, yang penting, hapus kode submenu pada template blog yang Anda gunakan, kurang lebih kodenya seperti kode kode diatas.
Selain itu, Anda dapat menyesuaikan sendiri di mana Anda menempatkan kode menu navigasi responsive. Tidak perlu menghapus semua kode submenu, tergantung bagaimana Anda memodifikasi kode tersebut. Disini kami hanya memberikan contoh penggunaan template Oreo yang kami sarankan untuk anda gunakan jika anda belum memiliki template blog responsive.
2. Tambahkan Kode Menu Navigasi
Setelah kode navigasi dihilangkan, sekarang tambahkan kode navigasi yang baru pada posisi tepat di atas kode tag penutup </header>. Sebelum menempatkan kode dibawah ini pada template blog sebaiknya Anda parse terlebih dahulu kodenya disini.
Untuk nama submenu seperti About Me, Contact, Disclaimer, Privacy Policy, dan Sitemap bisa Anda ganti namanya sesuai yang ingin ditampilkan dihalaman menu navigasi seperti biasanya.
Kode fill='#fff adalah kode warna icon yang akan diklik yang bertujuan untuk memunculkan menu navigasi. Jika kode header yang Anda gunakan dalam template berwarna putih! Anda dapat mengganti kode warna #fff dengan kode warna lain sesuai kebutuhan. Jika Anda bingung menggantinya dengan kode warna yang diinginkan, Anda bisa menggunakan Tools Color Picker di blog ini.
3. Tambahkan Kode CSS
Sampai disini belum selesai, sekarang kita akan menambahkan kode css untuk membuat gaya dan membentuk tampilan menu navigasi yang responsive. Selanjutnya tambahkan kode CSS di bawah ini tepat di atas kode ]]></b:skin>.
Selesai...
Perlu diingat bahwa setiap template blog yang Anda gunakan memiliki kumpulan kode yang berbeda. Jadi jika anda menggunakan template lain selain oreo anda bisa memodifikasi sendiri kodenya. Karena pada posting ini kami memberikan contoh untuk penggunaan template oreo. Anda dapat mempelajari pengenalan dasar HTML dan CSS mungkin lebih dari cukup untuk mendesain halaman blog. Karena untuk membuat menu navigasi responsive menunjukkan kalau kode JavaScript tidak selalu diperlukan.
Selain itu, jika Anda hobi mengedit template blog, saya sarankan untuk tidak langsung menyimpannya pada saat mengedit template. Anda dapat "Pratinjau Tema" terlebih dahulu untuk membuatnya relevan. Kalau tampilan sudah sesuai dengan yang diharapkan baru Simpan.
Disini saya juga menghapus kode pencarian agar terlihat seperti yang saya harapkan. Karena menurut saya pengguna jarang menggunakan kolom 'search' dan lebih memilih menggunakan sitemap untuk mencari postingan di blog.
Jika Anda menginginkan tampilan yang serupa! Anda dapat menghapus kode dari <div id='box'> sampai tag penutup </div> pada template blog oreo yang Anda gunakan. Dan diluar template Oreo anda bisa memodifikasinya sendiri. Untuk itu Anda bisa menghapus kode seperti berikut ini.
<div id='box'>
<div class='search-wrapper' id='search-wrapper'>
<form action='/search' id='searchbox' method='get'>
<label id='gosearch'>
<input name='q' placeholder='Type here' size='15' type='text'/>
<input name='max-results' type='hidden' value='10'/>
<span class='search-icon'><svg enable-background='new 0 0 24 24' viewBox='0 0 24 24'><path d='M19.7 18.3l-3.1-3.1c.9-1.2 1.4-2.6 1.4-4.2 0-3.9-3.1-7-7-7s-7 3.1-7 7 3.1 7 7 7c1.6 0 3-.5 4.2-1.4l3.1 3.1c.2.2.5.3.7.3s.5-.1.7-.3c.4-.4.4-1 0-1.4zm-8.7-2.3c-2.8 0-5-2.2-5-5s2.2-5 5-5 5 2.2 5 5-2.2 5-5 5z'/></svg></span>
</label></form></div></div>Sekarang Anda dapat melihat hasil tampilan menu navigasi responsive di bawah ini.
Baca juga : Cara Membuat Sitemap di Blogger
Hasil Tampilan
Sekarang anda bisa melihat tampilan hasil dari pembuatan menu navigasi responsive dengan css di blog. Berikut adalah hasil Tampilan Menu Navigasi Responsive dengan CSS pada Blog :
Bagaimana menurut Anda hasil tampilan dari menu navigasi yang kita buat diatas? Jelas sekali perbandingannya sangat jauh berbeda dengan menu navigasi bawaan template Oreo sebelumnya. Membuat dan menyesuaikan menu adalah tugas yang sederhana, fleksibel, dan penuh potensi. Singkatnya, itu tidak hanya melakukan pekerjaan tetapi menyelesaikannya dengan sempurna.
Jika Anda ingin menggunakan template seperti tampilan blog di atas yang saya rancang, Anda dapat menghubungi saya melalui halaman kontak di blog ini.
Baca juga : Cara Membuat Fitur Mode Gelap Asli di Blogger
Kesimpulan
Ada beberapa cara untuk membuat menu navigasi kustom di WordPress atau Blogger. Seperti yang Anda lihat, pengaturan default platform melakukan tugasnya dan mudah digunakan.
Namun, jika Anda merasa menu Anda kehilangan sesuatu, atau tidak cukup fleksibel seperti yang Anda butuhkan, widget Elementor Nav Menu mungkin menjadi pilihan yang lebih baik untuk Anda.
Demikian posting kali tentang Cara Membuat Menu Navigasi Responsive dengan CSS di Blog. Semoga artikel ini bermanfaat dan dapat membantu Anda. Yuk share artikel ini untuk membantu teman-teman yang lain. Terima kasih!
samuelpasaribu.com
samuelpasaribu.com working in the Search Engine Optimization field since 2019. And worked on many successful projects since then. He shares the real-life experience of best SEO practices with his followers on samuelpasaribu.com. You also can learn Advance level SEO for WordPress, Blogger, or any other blogging platform. Stay tuned.
