Singkatnya: Menu drop down di Blogger bisa dibuat tanpa JavaScript, hanya dengan HTML dan CSS. Tambahkan gadget HTML atau JavaScript lewat menu Tata Letak, tempel struktur menu dan kode CSS-nya, sesuaikan judul dan tautan, lalu simpan.
! Karena Blogger tidak menawarkan opsi untuk secara otomatis menambahkan menu tarik turun seperti WordPress , kami harus membuatnya sendiri. Ini membutuhkan sedikit pengetahuan CSS dan HTML, tapi saya akan memandu Anda sehingga tidak tampak membingungkan. Menu yang saya kumpulkan dibangun sepenuhnya dengan CSS3 dan HTML. Tidak ada Javascript untuk berurusan dengan di sini, jadi itu bagus dan ringan dan mudah dikonfigurasi. Anda dapat melihat demo di sini. Untuk memulai, Anda harus menuju ke halaman Layout di dashboard Blogger Anda dan menambahkan gadget HTML / Javascript di bagian atas / header:
Tambahkan kode berikut ke widget baru Anda, menyesuaikan judul dan tautan untuk mencocokkan blog kamu sendiri:
Struktur Menu (HTML)
Tempel struktur berikut di dalam gadget. Ganti tanda pagar dengan tautan halaman blog kamu, dan ganti tulisan Beranda, Kategori, Submenu, dan Tentang dengan judul yang kamu inginkan.
<ul class="menu-sobat"> <li><a href="#">Beranda</a></li> <li><a href="#">Kategori</a> <ul> <li><a href="#">Submenu 1</a></li> <li><a href="#">Submenu 2</a></li> </ul> </li> <li><a href="#">Tentang</a></li> </ul>
Kode Tampilannya (CSS)
Tempel kode berikut di bawah struktur menu. Kode ini mengatur menu berjajar ke samping, menyembunyikan submenu, dan menampilkannya saat kursor diarahkan ke menu induk. Karena hanya memakai CSS, menu tetap ringan dan tidak membutuhkan JavaScript.
<style>
.menu-sobat, .menu-sobat ul { list-style: none; margin: 0; padding: 0; }
.menu-sobat > li { display: inline-block; position: relative; }
.menu-sobat a { display: block; padding: 10px 15px; text-decoration: none; }
.menu-sobat ul { display: none; position: absolute; top: 100%; left: 0; }
.menu-sobat li:hover > ul { display: block; }
</style>
Langkah Memasang
Pertama, di dasbor Blogger, buka menu Tata Letak. Kedua, tambahkan gadget HTML atau JavaScript di bagian atas atau header. Ketiga, tempel struktur menu dan kode CSS di atas ke dalam gadget. Keempat, sesuaikan judul dan tautan dengan halaman blog kamu. Kelima, simpan gadget, lalu buka blog untuk memastikan submenu muncul saat kursor diarahkan ke menu induk.
Bila submenu tidak muncul, periksa kembali tanda kurung dan titik koma pada kode CSS, serta pastikan nama class pada struktur menu sama persis dengan nama class pada kode CSS.
