Kebanyakan Menu navigasi responsive menggunakan JavaScript untuk memfungsikan onclick animasinya. JavaScript tentu saja memberatkan loading. Setelah melakukan beberapa percobaan saya menemukan beberapa trik membuat menu navigasi dan menghindar dari JS. Diantaranya adalah Menu Dropdown yang akan saya jelaskan dibawah ini, perhatikan gambar:
Gambar.1 diatas adalah template Contempo yang headernya telah saya modifikasi terlebih dahulu (tidak ada hubungannya dengan karena saya mau meletakan menu navigasi).
Perhatikan Tombol warna biru kiri atas header adalah tombol menu portable dengan posisi "Fixed" akan selalu muncul walau konten blog sobat scroll baik keatas maupun kebawah.
Dan ketika tombol warna biru di klik baik dengan sentuhan jari maupun menggunakan mouse, akan memunculkan menu dropdown (turun kebawah) yang berguna untuk menampilkan atau menavigasi konten konten pilihan sobat.
Cara penerapannya mudah sekali hanya memerlukan dua langkah didalam editor HTML blog sobat:
1. Tambahkan CSS
- Masuk kepangaturan blogspot
- Pilih tema atau theme
- Pilih Edit HTML
Pada halaman editor HTML blogspot cari kode </head> dan letakan kode berikut diatasnya:
<style>.dropbtn { background-color: transparent; color: blue; padding: 16px; font-size: 16px; border: solid; border-radius:20px; position: fixed; z-index:150;height: 100px;}.dropdown { position: fixed; display: inline-block;z-index: 150;}.dropdown-content { display: none; position: fixed; background-color: gold; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 150;}.dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block;}.dropdown-content a:hover {background-color: #ddd;}.dropdown:hover .dropdown-content {display: block;}.dropdown:hover .dropbtn {background-color: #3e8e41;}</style>
SAVE template
2. Tambahkan HTML
- Masuk kepangaturan blogspot
- Pilih tema atau theme
- Pilih Edit HTML
Pada halaman editor HTML blogspot cari kode </head> dan letakan kode berikut dibawahnya:
<div class='dropdown'> <button class='dropbtn'>▼</button> <div class='dropdown-content'> <a href='/'>Beranda</a> <a href='#'>Perihal</a> <a href='#'>Kontak</a> <a href='#'>daftar isi</a> <a href='#'>kebijakan privasi</a> </div></div>
Silahkan ganti tanda pagar ('#') dengan link artikel sobat berdasarkan label.
SAVE template. SELESAI
LIHAT DEMOhttps://www.editblogtema.net