Cara Membuat Menu Dropdown di Blog Tanpa Edit HTML Untuk Pemula

Cara Membuat Menu Dropdown di Blog Tanpa Edit HTML

masnasih.com - Kali ini saya ingin berbagi tentang cara membuat menu dropdown tanpa edit html, 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 Blog Tanpa Edit HTML Untuk Pemula

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?)

<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>

<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 Tanpa Edit HTML Untuk Pemula yang bisa saya sampaikan. Semoga Bermanfaat.
Bisnis Online Menjanjikan
Lowongan Kerja Sampingan


Previous
« Prev Post

Tidak ada komentar:

Posting Komentar