Cara Membuat Menu Dropdown di HTML untuk Blogspot

Menu dropdown adalah fiktur yang wajib ada di setiap template blogspot, sebab dengan adanya fiktur menu drodown ini, akan memberikan kemudahan untuk visitor yang ingin mencari informasi sesuai label menu blog yang sudah kita tentukan.
Baca juga — Pelajari tentang membuat artikel valid AMP untuk blogspot. Mungkin untuk kamu yang ingin membuat template sendiri di blogger sangat cocok untuk mempelajari cara membuat menudropdown ini, Tapi jika kamu hanya ingin menggunakan template yang sudah ada menu dropdown, ada baiknya kamu langsung download template yang sudah ada fiktur menu dropdown nya.

Dalam langkah ini, kita akan mempelajari bersama bagaimana membuat menu dropdown di blogspot. Jadi sebelum mengikuti langkah ini kamu harus sudah paham sedikit tentang bagian kode HTML dan CSS.

Memasang Menu Dropdown di HTML Blogspot

Salin kode HTML dibawah ini yang berformat kode <ul><li> - </li></ul>

<!-- menu start -->
<ul>
  <li><a href='/'>PS4</a></li>
  <li><a href='#'>Games</a>
  <ul>
	<li><a href='#'>Download</a></li>
	<li><a href='#'>Streaming</a></li>
  </ul>
  </li>
  <li><a href='#'>Drodown</a>
  <ul>
	<li><a href='#'>SubMenu1</a></li>
	<li><a href='#'>SubMenu2</a></li>
	<li><a href='#'>SubMenu3</a></li>
	<li><a href='#'>SubMenu4</a></li>
  </ul>
  </li>
</ul>
<!-- menu end -->

Pasang kode HTML diatas dibagian kode HTML <nav id='badan-menu'> Contohnya <nav id='cssmenu'>

Keterangan :

• #badan-menu adalah suatu area menu yang dijadikan sebagai CSS, kamu bisa ubah namanya sesuai dengan kata-kata kamu. Seperti contoh milik saya #cssmenu.

Catatan — Apabila menggunakan < id=' maka kode CSS diawali dengan #, contohnya #cssmenu Jika menggunakan < class=' maka kode CSS diawali dengan tanda ( . ) contohnya .cssmenu. Maka kode HTML lengkapnya akan seperti contoh dibawah ini.

<nav id='cssmenu'>
<!-- menu start -->
<ul>
  <li><a href='/'>PS4</a></li>
  <li><a href='#'>VR</a></li>
  <li><a href='#'>Store</a></li>
  <li><a href='#'>Games</a>
  <ul>
	<li><a href='#'>Download</a></li>
	<li><a href='#'>Streaming</a></li>
  </ul>
  </li>
  <li><a href='#'>Dropdown</a>
  <ul>
	<li><a href='#'>SubMenu1</a></li>
	<li><a href='#'>SubMenu2</a></li>
	<li><a href='#'>SubMenu3</a></li>
	<li><a href='#'>SubMenu4</a></li>
  </ul>
  </li>
</ul>
<!-- menu end -->
</nav>

Perhatikan tanda merah yang saya berikan, itu adalah wadah untuk kode menu drodown <ul><li>

Jika masih belum paham, bisa kamu tanyakan nanti lewat kolom komentar.

Menambahkan CSS Menu Dropdown di Blogspot

Kerangka susunan menu sudah kita buat, maka untuk membuat tampilannya rapi dan keren, kita perlu menambahkan kode CSS.

Contoh kode CSS menu dropdown

/* NAV MENU */
#cssmenu {
background: -webkit-linear-gradient(top, #0072CE, #003087); - WARNA BACKGROUND MENU
}
#cssmenu, #cssmenu ul, #cssmenu ul li, #cssmenu ul li a {
border: 0; - GARIS TIDAK ADA
list-style: none; - ICON STANDAR HTML TIDAK ADA
line-height: 1; - TINGGI RENDAH LINK
}
#cssmenu, #cssmenu ul li a {
position: relative; - POSISI LINK DAN MENU TETAP TIDAK TERGESER
text-align: left; - POSISI TULISAN ARAH KIRI
}
#cssmenu ul {
margin: 0; - POSISI MENU TIDAK MELEBAR
display: block; - BERFUNGSI MENGATUR TINGGI DAN LEBAR
height: 60px; - TINGGI UKURAN AREA MENU DROPDOWN
}
#cssmenu > ul > li {
float: left; - POSISI DI SAMPING KIRI
margin: 0;
}
#cssmenu > ul > li > a {
padding: 0 17px;
font: 700 12px Roboto, Arial, sans-serif; - JENIS DAN UKURAN HURUF MENU
line-height: 60px; - TINGGI TULISAN
text-decoration: none; - MEMATIKAN GARIS BAWAH DI TULISAN
text-transform: uppercase; - HURUF KAPITAL JIKA INGIN MEMATIKAN UBAH JADI none
color: #fff; - WARNA HURUF
text-shadow: 0 -1px 1px rgba(0,0,0,0.3); - BAYANGAN HURUF
}
#cssmenu > ul > li:hover > a, #cssmenu ul li.active a {
color: #ffffff; - WARNA HURUF SAAT DI PILIH
}
#cssmenu ul ul {
height: auto; - OTOMATIS MENYESUAIKAN TINGGI MENU
position: absolute; - POSISI MELAYANG TIDAK TETAP
left: -9999px; - MENGARAHKAN POSISI KE KIRI
z-index: 1; - MEMPERJELAS MENU
-webkit-box-shadow: 0 2px 8px 0 rgba(0,0,0,0.15);
box-shadow: 0 2px 8px 0 rgba(0,0,0,0.15); - BAYANGAN KOTAK
opacity: 0; - MEMATIKAN WARNA
}
#cssmenu ul ul li {
background: #f9f9f9; - WARNA BACKGROUND MENU DROPDOWN
margin: 0;
}
#cssmenu ul ul li:hover {
color: #111111;
}
#cssmenu ul ul ul{
margin-left: 100%;
top: 0
}
#cssmenu ul ul li a {
font: 400 12px Roboto, Arial, sans-serif; - HURUF MENU DROPDOWN DAN UKURAN
border-bottom: 1px solid rgba(150,150,150,0.15); - GARIS BAWAH TULISAN
padding: 0 17px;
line-height: 42px; - TINGGI TULISAN
max-width: 100%; - LEBAR PENUH
text-decoration: none;
color: #777777; - WARNA HURUF
}

Garis merah yang saya jadikan tanda diatas, adalah pengertian sedikit fungsi CSS untuk kode HMTL menu dropdown.

Letakan kode CSS tersebut dibagian kode bawah </style> atau ]]></b:skin>

Contoh Halaman

Memasang Script Menu Dropdown di Blogspot

Sebenarnya dengan melakukan cara diatas juga sudah berhasil membuat menu dropdown, hanya saja dengan menambahkan script dibawah ini akan memberikan hasil yang lebih baik daripada sebelumnya.

<script>
//<![CDATA[
// nav menu
!function(s){s.fn.menumaker=function(n){var e=s(this),o=s.extend({format:"dropdown",sticky:!1},n);return this.each(function(){s(this).find(".button").on("click",function(){s(this).toggleClass("menu-opened");var n=s(this).next("ul");n.hasClass("open")?n.slideToggle(150).removeClass("open"):(n.slideToggle(150).addClass("open"),"dropdown"===o.format&&n.find("ul").show())}),e.find("li ul").parent().addClass("has-sub"),multiTg=function(){e.find(".has-sub").prepend('<span class="submenu-button"></span>'),e.find(".submenu-button").on("click",function(){s(this).toggleClass("submenu-opened"),s(this).siblings("ul").hasClass("open")?s(this).siblings("ul").removeClass("open").slideToggle(150):s(this).siblings("ul").addClass("open").slideToggle(150)})},"multitoggle"===o.format?multiTg():e.addClass("dropdown"),!0===o.sticky&&e.css("position","fixed")})}}(jQuery),function(s){s(document).ready(function(){s("#cssmenu").menumaker({format:"multitoggle"})})}(jQuery);
//]]>
</script>

Letakan kode script diatas, dibagian atas kode </body> atau bisa juga di bagian kode </head>

Membuat Menu Dropdown Resfonsive

Agar bisa mendapatkan tampilan yang Resfonsive, maka kamu harus menambahkan kode dibawah ini, dibagian kode bawah <head>

<meta content='width=device-width, initial-scale=1' name='viewport'/>

Lalu tambahkan juga kode CSS Resfonsive sesuai ukuran layar, contohnya kodenya @media screen and (max-width:ukuran layar) seperti dibawah ini.

@media screen and (min-width:801px){
#cssmenu ul {
display: block !important;
}
}
@media screen and (max-width:800px){
#cssmenu {
float: none;
}
#cssmenu ul {
background: #f8f8f8;
width: 100%;
display: none;
height: auto;
-webkit-box-shadow: 0 2px 8px 0 rgba(0,0,0,0.15);
box-shadow: 0 2px 8px 0 rgba(0,0,0,0.15);
}

Kamu bisa atur kode ukuran layar sesuai keinginan, (max-width:1200px) misalnya

Kesimpulan

Langkah diatas hanya sebagai bahan contoh saja, kamu bisa buat sendiri alur tampilan dengan menggunakan ilmu CSS yang kamu ketahui.

Demikian informasi yang dapat kami sampaikan tentang membuat menu dropdown di blogspot, Jika ada pertanyaan jangan ragu untuk menulisnya di kolom komentar, Selamat belajar!

Berbagi :