Cara Membuat Dropdown Menu dengan Sub 3 Kolom Memiliki Gambar

loading...

Selamat datang di The Royal Moringa. Sebelumnya saya telah membuat artikel mengenai Cara Membuat Dropdown Menu dengan Sub Menu 3 Kolom. Artikel kali ini adalah penjabaran lebih lanjut dari artikel sebelumnya. Bilamana sebelumnya dijelaskan bagaimana cara membuat dropdown menu dengan sub menu 3 kolom yang masing-masing berisi hyperlink text, sekarang kolom-kolom tersebut menampilkan gambar dan teks. Nah, masing-masing kolom pada sub menu ini dapat anda manfaatkan untuk menaruh artikel/postingan yang populer atau banyak dicari oleh orang-orang. Kenapa demikian? Karena setiap kali anda memposting sebuah artikel, artikel sebelumnya pasti akan tergeser ke bawah pada featured post. Lama kelamaan artikel yang biasa dibutuhkan/dicari orang tergeser ke halaman berikutnya. Untuk tetap menampilkan atikel populer anda agar mudah dijangkau oleh pembaca, selain menggunakan popular widget post, anda bisa menggunakan sub menu yang dapat diisi thumbnail dan judul artikel anda. Dengan demikian postingan populer anda dapat dimunculkan di sub menu sesuai dengan kategorinya. Berikut contoh tampilan dari dropdown menu dengan sub menu 3 kolom masing-masing dilengkapi judul utama, gambar, teks penjelas, dan hyperlink text yang mengarahkan pembaca ke artikel yang dimaksud.

Jika anda tertarik ingin membuatnya, berikut langkah-langkahnya.

1. Log in ke akun blog anda > Pada dashboard pilih Theme > Edit HTML > kemudian cari ]]></b:skin> lalu copy dan paste kode script berikut di atasnya

                                      #menubar{ position:relative; background-color:#f5f5f5; height:35px; margin:0 auto; font-family:'Oswald',sans-serif; line-height:35px; } #menubar ul{ float:left; margin:0; list-style:none; } #menubar li{ float:left; position:relative; } #menubar ul li a{ float:left; width:180px; text-align:center; text-decoration:none; color:#333333; } #menubar li a:hover, #menubar li a:active, #menubar .current_page_item a { border-bottom:2px solid #c0c0c0; } #menubar ul li:hover ul { display:block !important; } #menubar ul li ul{ position:absolute; left:0; top:37px; z-index:100; background-color:#f5f5f5; } #menubar ul ul { width:600px; display:none; list-style:none; position:relative; background-color:#f5f5f5; padding-left:0; top:35px; } #menubar ul ul li a{ float:none; display:block !important; padding-left:30px; text-align:left; width:170px; } #menubar ul ul li a:hover{ border-bottom:none; color:#28ee28; } .left-col{ float: left; margin-left:0; width:200px; } .center-col{ float: left; width: 200px; margin-left: 0; } .right-col{ float: right; width: 200px; margin-left:0; } #menubar ul li ul h2{ border-bottom:2px solid #dddddd; margin:1px; padding:10px 0 6px 5px; color:#333333; font-size:16px; line-height:20px; font-family:'Oswald',sans-serif; font-weight:bold; text-decoration:none; } @media screen and (max-width: 768px) { #menubar{ display:none;} }

2. Selanjutnya silakan cari </header>. Copy dan pastekan kode script HTML berikut di bawahnya. Jika anda sebelumnya sudah mempunyai menubar maka anda tinggal mengganti seluruh kode yang ada dengan kode berikut tanpa perlu mengubah letak/posisi kode menubar anda miliki. Pada umumnya kode script menubar terletak sebelum kode postingan blog anda yang ditandai dengan <div id='main-wrapper'>.

                                      <div id='menubar'> <ul class='menubar'> <li><a href='xxx'>Home</a></li> <li><a href='#'>Menu 1</a> <ul class='sub-menu'> <div class="left-col"> <h2 class='title'> Judul 1</h2> <img src='gambarsaya.jpg' width='190px' height='100px' style="margin:3px"/> <p style="font-family:Times New Roman;font-size:10px;line-height:10px;margin-top:0"> Lorem ipsum dolor sit amet, duo ei mollis propriae, eu nam adolescens rationibus. An cum stet quaestio qualisque, esse diceret alienum pro cu, audire aliquip quo ei. </p> <li style="font-size:12px;margin-right:1px;text-decoration:none"><a href='xxx'>See More</a></li> </div> <div class="center-col"> <h2 class='title'> Judul 2</h2> <img src='gambarsaya.jpg' width='190px' height='100px' style="margin:3px"/> <p style="font-family:Times New Roman;font-size:10px;line-height:10px;margin-top:0"> Lorem ipsum dolor sit amet, duo ei mollis propriae, eu nam adolescens rationibus. An cum stet quaestio qualisque, esse diceret alienum pro cu, audire aliquip quo ei. </p> <li style="font-size:12px;margin-right:1px;text-decoration:none"><a href='xxx'>See More</a></li> </div> <div class="right-col"> <h2 class='title'> Judul 3</h2> <img src='gambarsaya.jpg' width='190px' height='100px' style="margin:3px"/> <p style="font-family:Times New Roman;font-size:10px;line-height:10px;margin-top:0"> Lorem ipsum dolor sit amet, duo ei mollis propriae, eu nam adolescens rationibus. An cum stet quaestio qualisque, esse diceret alienum pro cu, audire aliquip quo ei. </p> <li style="font-size:12px;margin-right:1px;text-decoration:none"><a href='xxx'>See More</a></li> </div> </ul> </li> <li><a href='#'>Menu 2</a> <ul class='sub-menu'> <div class="left-col"> <h2 class='title'> Judul 1</h2> <img src='gambarsaya.jpg' width='190px' height='100px' style="margin:3px"/> <p style="font-family:Times New Roman;font-size:10px;line-height:10px;margin-top:0"> Lorem ipsum dolor sit amet, duo ei mollis propriae, eu nam adolescens rationibus. An cum stet quaestio qualisque, esse diceret alienum pro cu, audire aliquip quo ei. </p> <li style="font-size:12px;margin-right:1px;text-decoration:none"><a href='xxx'>See More</a></li> </div> <div class="center-col"> <h2 class='title'> Judul 2</h2> <img src='gambarsaya.jpg' width='190px' height='100px' style="margin:3px"/> <p style="font-family:Times New Roman;font-size:10px;line-height:10px;margin-top:0"> Lorem ipsum dolor sit amet, duo ei mollis propriae, eu nam adolescens rationibus. An cum stet quaestio qualisque, esse diceret alienum pro cu, audire aliquip quo ei. </p> <li style="font-size:12px;margin-right:1px;text-decoration:none"><a href='xxx'>See More</a></li> </div> <div class="right-col"> <h2 class='title'> Judul 3</h2> <img src='gambarsaya.jpg' width='190px' height='100px' style="margin:3px"/> <p style="font-family:Times New Roman;font-size:10px;line-height:10px;margin-top:0"> Lorem ipsum dolor sit amet, duo ei mollis propriae, eu nam adolescens rationibus. An cum stet quaestio qualisque, esse diceret alienum pro cu, audire aliquip quo ei. </p> <li style="font-size:12px;margin-right:1px;text-decoration:none"><a href='xxx'>See More</a></li> </div> </ul> </li> <li><a href='xxx'>Menu 3</a></li> <li><a href='xxx'>Menu 4</a></li> <li><a href='xxx'>Menu 5</a></li> </ul> </div>

3. Silakan anda ganti xxx dengan url halaman yang dimaksud dan mengganti gambarsaya.jpg dengan url gambar anda. Jangan lupa mengisi kalimat penjelasan dari masing-masing gambar atau mengganti kalimat penjelas menjadi judul artikel dengan ukuran font diperbesar sesuai selera anda.

4. Save Theme dan lihat hasilnya

Anda bebas mengganti warna text, background, dan border pada kode CSS di atas sesuai dengan selera. Tutorial ini menggunakan kode script utama yang sama dengan artikel sebelumnya yaitu ada 2 Parent Menu yang masing-masing memiliki sub menu berkolom 3. Jika anda ingin menambah dropdown menu yang memiliki kolom pada menu selanjutnya yaitu menu 3,4, dan seterusnya, silakan anda copy saja kode Menu 1 dari <li><a href='#'>Menu 1</a>...</li> untuk menggantikan kode Menu yang dimaksud. Oke, sekiranya artikel ini dapat membantu anda dalam membuat dropdown menu yang memiliki sub menu bergambar. Terima kasih telah membaca!

loading...