Pembangunan Blog 2020 : Cara Buat Drop Down Menu Di Header Menu Blog

Tutorial kali ini ialah bagi menghasilkan drop down menu di header menu di dalam blog seperti gambar di atas.

1. Dashboard > Theme > Edit HTML

2. Pada kod HTML, cari kod berikut ]]><b:skin>

3. Paste kan kod berikut di atas kod pada langkah 2 tadi

.tabs-inner .widget li ul {
  z-index: 100; position: absolute;
  left: -999em; height: auto; margin: 0; padding: 0;
  border: 1px solid #999999; 
}

.tabs-inner .widget li ul, .tabs-inner .widget li ul a,
.tabs-inner .widget li ul li:first-child a {
  -moz-border-radius: 0px; -webkit-border-radius: 0px;
  -goog-ms-border-radius: 0px; border-radius: 0px;
}

.tabs-inner .widget li:hover ul, .tabs-inner .widget li.sfhover ul {
  left: auto;
}

.tabs-inner .widget li li a:hover, .tabs-inner .widget li li a:active {
  color: #ffffff; background: rgb(51, 102, 153);
}

.tabs-inner .widget li ul a {
  display: block; padding-left: 1.25em; padding-right: 1.25em;
  margin-left: 0px; margin-right: 0px; border: none;
  color: #000000; background: rgb(243, 244, 246); } .tabs-inner .widget li ul, .tabs-inner .widget li ul a {
  width: 220px;
}

4. Cari kod <a expr:href='data:link.href><data.link.title/></a>

5. Letakkan kod berikut di bawah <b:/loop>

<li><a href='#'>Menu</a>
  <ul> <li><a href='URL'>Sub Menu 1</a></li>
    <li><a href='URL'>Sub Menu 2</a></li>
    <li><a href='URL'>Sub Menu 3</a></li>
  </ul>
</li>

6. Boleh tukar teks Menu dan Sub Menu ikut kesesuaian dan letakkan link di URL. Selamat mencuba :)