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 HTML2. 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 :)
Artikel ini hanyalah simpanan cache dari url asal penulis yang berkebarangkalian sudah terlalu lama atau sudah dibuang :
http://www.lepak.com.my/2020/09/pembangunan-blog-2020-cara-buat-drop.html