Cara membuat Dropdown Button di Halaman Blogger

Cara membuat Dropdown Button di Halaman Blogger

Menu Dropdown ini untuk 

Pertama yang harus di lakukan ialah Login Terlebih dahulu ke Akun Blog 

Kemudian bagian Tema, terus pilih edit HTML,

(ads2)

Letakan Code CSS di bawah ini, Letakan di bagian pembungkus CSS tepatnya di atas kode "]]></b:skin>"

no kutip, Copy Paste Kode CSS di bawah ini tepat di atasnya.

/*-- Dropdown Button --*/ .dropbtn{ background-color: #ac42f4; color: white; padding: 10px; font-size: 14px; border: none; cursor: pointer; border-radius: 5px; } .dropbtn:hover, .dropbtn:focus{ background-color: #1a1be8a8; } .dropdown{ position: relative; display: inline-block; } .dropdown-content{ display: none; position: relative; background-color: rgb(0 0 0 / 5%); min-width: 160px; overflow: auto; box-shadow: 2px rgba(0,0,0,0.1.2); z-index: 1; } .dropdown-content a{ font-family: var(--text-font); color: var(--text-font-color); padding: 5px 10px; text-decoration: none; display: block; } .dropdown a:hover {background-color: #aaa;} .show{display: block;}

Kemudian Letakan Kode JavaScript di bawah ini, tepat nya di ada "</body>" no kutip, 

(ads1)

<!-- Dropdown Button --> <script type='text/javascript'>//<![CDATA[ function myFunction(){document.getElementById("myDropdown").classList.toggle("show");}window.onclick=function(event){if(!event.target.matches('.dropbtn')){var dropdowns = document.getElementsByClassName("dropdown-content");var i;for(i = 0; i<dropdowns.length; i++){var openDropdown=dropdowns[i];if(openDropdown.classList.contains('show')){openDropdown.classList.remove('show');}}}}//]]> </script>

Setelah semua itu sudah di lakukan, sekarang tinggal di coba, 

masuk ke bagian page "Halaman" pilih halaman baru, kemidan letakan kode di bawah ini sebagai contoh 

<div class="dropdown"> <button class="dropbtn">Dropdown</button> <div class="dropdown-content"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div>

Dijelaskan sebuah contoh
Bisa menggunakan elemen apa saja untuk membuka menu tarik-turun, mis. elemen <button>, <a> atau <p>.
Gunakan elemen penampung (seperti <div>) untuk membuat menu tarik-turun dan tambahkan tautan tarik-turun di dalamnya.

Bungkus elemen <div> di sekitar tombol dan <div> untuk memposisikan menu tarik-turun dengan benar dengan CSS.

Sekarang tinggal cek lihat hasilnya.