Cara Membuat Menu Dropdown Di Blogspot

Cara Membuat Menu Dropdown Di Blogspot – Menu navigasi pada sebuah website atau blog sangatlah penting dan harus ada, hal ini bertujuan untuk memudahkan pengunjung website dalam melakukan navigasi ke website Anda.

Saya ingat ada suatu alasan ketika kemudian pendaftaran AdSense ditolak dengan alasan “Navigasi situs sulit”, hal itu menunjukkan bahwa membuat menu navigasi pada blog atau website harus jelas dan mudah dipahami.

Cara Membuat Menu Dropdown Di Blogspot

Cara Membuat Menu Dropdown Di Blogspot

Sebenarnya banyak sekali jenis navigasi yang bisa Anda gunakan, ada yang vertikal biasanya di sisi kiri, dan juga horizontal yang biasanya terletak di bagian atas atau atas blog atau website.

Membuat Menu Sederhana Dengan Css

Menu navigasinya memiliki fungsinya masing-masing, ada yang datar tanpa submenu, ada pula yang memiliki menu drop-down bahkan menu multi-drop-down.

Menu quick drop-down bertingkat ini menggunakan font berukuran besar, sehingga terlihat lebih keren dengan gambar atau ikon di samping teks.

Namun jika Anda tidak ingin menampilkan gambar atau icon di sebelah kiri teks, Anda bisa menghilangkan kode di bagian html atau tidak perlu menggunakan file CSS untuk mengatur font yang bagus.

Jika Anda ingin membuat menu dropdown multi-level yang responsif di blog Anda, ikuti langkah-langkah di bawah ini.

Membuat Menu Dropdown Blog

Supaya aman lebih baik backup dulu template blog anda, baca artikel cara backup template blog.

Jika anda mempunyai menu navigasi pada blog anda, alangkah baiknya kode cssnya dihindari terlebih dahulu tampilan menunya yang berantakan, karena kode css yang lama akan bentrok atau bentrok dengan kode css yang baru.

Kedua, masukkan kode HTML pada menu navigasi. Anda dapat mengatur sendiri lokasinya, biasanya di header, atau Anda dapat mencoba menyimpannya sebelum kode

Cara Membuat Menu Dropdown Di Blogspot

Keempat, jika ingin menggunakan font yang besar agar gambar atau icon muncul di samping teks menu navigasi, tambahkan kode paket CSS ini dan letakkan sebelum kode Hello Web Inventor, kali ini ngomong lagi sama guru desain, caranya “Penurunan seragam menggunakan HTML CSS dan JavaScript untuk pembuatannya

How To Create A Dropdown Menu In WordPress (beginners Guide)

Dalam dunia pengembangan web, kemampuan membuat elemen interaktif pada halaman web sangatlah penting. Elemen yang sering digunakan dalam desain web adalah menu dropdown. Namun kali ini kita akan membahas tentang cara membuat menu dropdown unik menggunakan HTML, CSS dan JavaScript.

Sebelum kita membahas hal teknis, mari kita bahas sedikit mengapa memilih untuk membuat menu dropdown yang unik adalah ide yang bagus. Menu drop-down tradisional biasanya hanya berisi daftar opsi yang muncul saat pengguna mengklik atau melihatnya. Namun dengan sedikit kreativitas dan penggunaan HTML, CSS dan JavaScript, Anda dapat membuat menu dropdown yang lebih menarik dan interaktif.

Langkah pertama dalam membuat menu drop-down unik adalah menyiapkan dokumen HTML yang akan menjadi dasar menu. Dokumen HTML adalah kerangka dasar yang akan digunakan untuk menambahkan item menu. Anda dapat membuat struktur HTML seperti ini:

Tambahkan CSS pada tag . Untuk membuat menu dropdown unik, gunakan CSS untuk menentukan tampilan dan animasi menu. Anda dapat mengatur gaya menu utama sebagai berikut:

Cara Membuat Menu Dropdown Sederhana Dan Menarik

Sekarang kita ingin berinteraksi dengan droplet menggunakan JavaScript, menambahkan javascript di atas badan akhir . Pada langkah ini, kita akan membuat menu dropdown interaktif. Berikut kode JavaScriptnya:

Pada artikel ini kita telah membahas cara membuat menu dropdown unik menggunakan HTML, CSS dan JavaScript. Semoga beruntung! Saya harap artikel ini membantu Anda. Jika Anda memiliki pertanyaan atau komentar, jangan ragu untuk menghubungi kami. Membuat menu navigasi atau custom navigasi bar di Blogger berguna sebagai alat navigasi bagi pengunjung dan juga berguna untuk optimasi mesin pencari. Jika kita ingin semuanya minimalis, ada trik yang bisa kita gunakan, yaitu tombol menu.

Seperti yang Anda ketahui, menu drop-down dapat ditata sebagai menu, yang ketika diketuk atau diklik, akan menampilkan menu yang tersembunyi di baliknya sebagai daftar drop-down. Klik atau ketuk tombol merah yang saya buat di bawah ini:

Cara Membuat Menu Dropdown Di Blogspot

Penggunaannya sama dengan saran saya sebelumnya. Bahan dan elemen dibuat menggunakan HTML, CSS dan Javascript. Karena Blogger adalah template HTML, sangat mudah digunakan.

Tips Membuat Blog Di Wix

Anda hanya perlu mengikuti langkah-langkah untuk menginstalnya dan membiasakan diri dengan kode HTML dan atributnya, semuanya akan membaik seiring berjalannya waktu dan akan lebih mudah bagi Anda jika ingin menggunakannya, meskipun secara otodidak.

Saya belajar coding 100% sendiri, namun saya ingin mempelajarinya di sela-sela kerja keras belajar di sekolah formal. Bagian mudahnya belajar coding adalah tidak perlu menghafal apapun, coding dan pemrograman itu logika, cukup belajar terus menerus.

.dropbtn { warna latar: #FF0000; warna putih; bantalan: 16 piksel; ukuran font: 16 piksel; perbatasan: tidak; penanda: penunjuk; } .dropbtn:hover, .dropbtn:fokus { warna latar: #00FFFF; }. drop { posisi: relatif; tampilan: blok garis; } .dropdown-content { tampilan: tidak ada; posisi: mutlak; warna latar belakang: #f1f1f1; lebar minimum: 200 piksel; topping: otomotif; bayangan kotak: 0px 8px 16px 0px rgba(0, 0, 0, 0,2); indeks-z: 1; } .dropdown-content a { warna: hitam; bantalan: 12 piksel kali 16 piksel; pemformatan teks: tidak; tampilan: blok; } .Dropdown a:di mana .show 2. HTML

Selanjutnya pada pengaturan halaman Blogger HTML Editor, pastekan HTML berikut di bawah tag :

Widget Bookmark Blogger

3.Javascript

Masih pada pengaturan halaman editor HTML, cari tag dan pastekan kode javascript berikut dibawahnya:

/* Ketika pengguna mengklik tombol merah, menu dropdown akan muncul */ myFunction() function document.getElementById(“myDropdown”). classList.toggle(“tampilkan”); } // Klik lagi tombol tersebut untuk menutup atau menyembunyikan menu dropdpwn // window.onclick = function (event) { if (!event.target.matches(‘.Dropbtn’)) { var dropdowns = document.getElementsByClassName(“drop isi “); dulu; for (i = 0; i < dropdowns.length; i++) { var openDropdown = dropdown[i]; if (openDropdown.classList.contains('show')) { openDropdown.classList.remove('show'); Av}}} Anda dapat dengan mudah mengenali kode Javascript yang dibuka dengan dan kemudian ditutup dengan </script

Cara Membuat Menu Dropdown Di Blogspot

Cara membuat artikel di blogspot, cara membuat seo di blogspot, cara membuat backlink di blogspot, cara membuat menu dropdown di blogger, cara membuat menu dropdown di wordpress, cara membuat blog di blogspot, membuat menu dropdown di blogspot, cara membuat web di blogspot, cara membuat dropdown di google sheet, cara membuat menu dropdown keren di blog, membuat menu dropdown blogspot, cara membuat dropdown list di google sheet

Leave a Comment