Cara Membuat Menu Dropdown di Blogger

masnasih.com - Kali ini saya ingin berbagi tentang cara membuat menu dropdown, karena saya rasa sebagai pemula dalam dunia blogging takut ketika harus edit html di blogger. Takut salah dan nantinya malah error. Oleh karena itu saya sajikan materi ini. 

Cara Membuat Menu Dropdown di Blogger

Baiklah sesuai dengan apa yang anda lihat di atas, maka untuk membuat menu dropdown kali ini Anda hanya membutuhkan 2 kode yaitu css dan html. Kode ini saya ambil dari w3schools.

Cara menggunakannya adalah copy paste kode di bawah ini ke widget blogger. (Sudah tau kan, cara menambah widget di blogger?)

Kode Style

<style>

ul {list-style-type: none;margin: 0;padding: 0;overflow: hidden;background-color: #333;} li {float: left;} li a, .dropbtn {display: inline-block;color: white;text-align: center;padding: 14px 16px;text-decoration: none;} li a:hover, .dropdown:hover .dropbtn {background-color: red;} li.dropdown {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;text-align: left;} .dropdown-content a:hover {background-color: #f1f1f1} .dropdown:hover .dropdown-content {display: block;}

</style>

Kode HTML

<ul>

  <li><a href="#home">Home</a></li>

  <li><a href="#news">News</a></li>

  <li class="dropdown">

    <a href="javascript:void(0)" class="dropbtn">Dropdown</a>

    <div class="dropdown-content">

      <a href="#">Link 1</a>

      <a href="#">Link 2</a>

      <a href="#">Link 3</a>

    </div>

  </li>

</ul>

<h3>Dropdown Menu inside a Navigation Bar</h3>

<p>Ketika mouse berada di tulisan dropdown, maka menu dropdown akan ditampilkan.</p>

Nah silakan copy kodenya dan masuk ke tata letak blogger, pilih html/javascript, paste kodenya, dan simpan.

Demikianlah artikel tentang Cara Membuat Menu Dropdown di Blog yang bisa saya sampaikan. Semoga Bermanfaat.

Baca Artikel Blogging Lainnya.