Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / blogger / tips

3 Cara Menciptakan Hidangan Drobdown Di Blog


Cara menciptakan hidangan drobdown di blog - Menu yang berfungsi untuk menavigasi blog ini berkhasiat untuk mempermudah pengunjung blog mencari dan menentukan konten apa saja yang terdapat di blog dalam tersebut.

Ada banyak sekali macam hidangan yang sanggup di tambahkan di dashboard blog sobat, salah satunya ialah hidangan drobdown atau hidangan menurun ke bawah. Menu ini biasanya di gunakan sebagai pemisah atau pengurai sebuah sub hidangan utama dan tentunya saya juga memakai hidangan dorbdown sebagai navigasi blog saya sendiri.

Banyak template/tema blog yang intinya sudah menyediakan atau menambahkan fitur hidangan menurun ini, tapi jikalau template kalian belum memilikinya dan kalian ingin menambahkanya, saya akan memberi 3 cara menambahkan hidangan dorbdown dengan style yang berbeda.

1. Menu Drobdown Dasar

Menu ini memakai posisi relatif, yang di gunakan saat kalian ingin konten selanjutnya berada di bawah hidangan utama, intinya hidangan ibarat ini akan muncul jikalau kursor sempurna berada di hidangan utama tanya mengkliknya dan akan muncul hidangan lagi di bawahnya.

Untuk cara membuatnya dan menambahkannya ke dalam blog kalian, silahkan ikuti langkah-langkah di bawah ini.

- Login ke akun blogger kalian.
- Di hidangan dashboar blogger pilih tema/theme lalu pilih Edit HTML.
- Gunakan Ctrl + f untuk memudahkan pencarian kode, ketikan menu pada kotak pencarian.
- Jika sudah tekan enter dan cari arahan hidangan kurang lebih ibarat pada gambar di bawah ini.
- Setiap template blog niscaya sudah mempunyai satu hidangan dan biasanya bertuliskan Home, Copy dan paste arahan di bawah ini sempurna di bwah hidangan Home.
<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>
</div>

- Copy dan pastekan arahan di bawah ini sebelum kode ]]></b:skin> atau </style>.
.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}
.dropdown {
  position: relative;
  display: inline-block;
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
  display: block;
}
.dropdown:hover .dropbtn {
  background-color: #3e8e41;
}

- Simpan tema dan lihat hasilnya.

2. Drobdown Menu di Navbar 

Menu ini mempunyai konsep yang sama ibarat hidangan sebelumnya, namun ini sanggup menjadi pilihan jikalau di dalam template blog kalian belum mempunyai sebuah hidangan sama skali.
langkah awal membuatnya juga sama, namun yang membedakan ialah letak arahan yang akan kalian copas di bawah ini.
- copy dan paste arahan ini di bawah div header template kalian.
<div class="navbar">
  <a href="#">Home</a>
  <a href="#">News</a>
  <div class="dropdown">
    <button class="dropbtn">Dropdown
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </div>
</div>
- Tambah kan arahan CSS ini sebelum kode  ]]></b:skin> atau </style>.
.navbar {
  overflow: hidden;
  background-color: #333;
  font-family: Arial, Helvetica, sans-serif;
}
.navbar a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
.dropdown {
  float: left;
  overflow: hidden;
}
.dropdown .dropbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}
.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: red;
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}
.dropdown-content a:hover {
  background-color: #ddd;
}
.dropdown:hover .dropdown-content {
  display: block;
}

3. Menu Drobdown Search

 Saya beri nama hidangan ini drobdown search karna di bawah hidangan utama terdapat kotak pencarian dan juga menu-menu lain di bawahnya. eksklusif saja cara membuatnya.
- Copy dan paste arahan ini.
<div class="dropdown">
  <button onclick="myFunction()" class="dropbtn">Dropdown</button>
  <div id="myDropdown" class="dropdown-content">
    <input type="text" placeholder="Search.." id="myInput" onkeyup="filterFunction()">
    <a href="#">About</a>
    <a href="#">Base</a>
    <a href="#">Blog</a>
    <a href="#">Contact</a>
    <a href="#">Custom</a>
    <a href="#">Support</a>
    <a href="#">Tools</a>
  </div>
</div>

-Kode CSS
.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
  background-color: #3e8e41;
}
#myInput {
  border-box: box-sizing;
  background-image: url('searchicon.png');
  background-position: 14px 12px;
  background-repeat: no-repeat;
  font-size: 16px;
  padding: 14px 20px 12px 45px;
  border: none;
  border-bottom: 1px solid #ddd;
}
#myInput:focus {outline: 3px solid #ddd;}
.dropdown {
  position: relative;
  display: inline-block;
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f6f6f6;
  min-width: 230px;
  overflow: auto;
  border: 1px solid #ddd;
  z-index: 1;
}
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
.dropdown a:hover {background-color: #ddd;}
.show {display: block;} 

Copy arahan JavaScript di bawah ini dan paste sebelum arahan </body>.
<script>
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}
function filterFunction() {
  var input, filter, ul, li, a, i;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  div = document.getElementById("myDropdown");
  a = div.getElementsByTagName("a");
  for (i = 0; i < a.length; i++) {
    if (a[i].innerHTML.toUpperCase().indexOf(filter) > -1) {
      a[i].style.display = "";
    } else {
      a[i].style.display = "none";
    }
  }
}
</script>

Keterangan : 

  • Silahkan ubah warna dan juga nama hidangan sesuai impian kalian.
  • Setiap tanda # di bab a href silahkan ganti dengan URL tujuan kemana hidangan kalian.
  • Menu ini tentunya sudah responsive dan akan menyesuaikan template kalian.
Sebenarnya masih banyak sekali tipe atau jenis-jenis hidangan yang sanggup kalian gunakan, namun saya hanya memberi 3 cara untuk menciptakan hidangan drobdown, jikalau kalian mempunyai cara lain atau ingin menciptakan tipe hidangan drobdown lain silahkan kalian cari di www.w3schools.com.