Membuat Menu pada situsblog sangatlah perlu bagi seorang blogger kenapa demikian? karena menu yang ada dalam halaman sebuah situsblog itu mempunyai manfaat dengan tujuan untuk memudahkan pembaca dan pengunjung situsblog saat berkunjung ke situsblog tersebut dan sekaligus menjadikan situsblog blogger agar terlihat lebih keren dan juga profesional.
Struktur atau bentuk dari menu situsblog mempunyai bentuk gaya yang bermacam-macam jenisnya ada yang berbentuk horizontal dan vertikal atau drop down. Menu situsblog horizontal gayanya menyamping dari sebelah kanan ke sebalh kiri. Dan menu situsblog vertikal gayanya dari atas ke bawah.
Cara untuk membuat menu untuk situsblog bisa dilakukan dengan sangat mudah dan caranya diantaranya bisa anda langsung mengedit HTML pada template situsblog atau dengan menambahkan gadget ke template melalui tata letak pada halaman dasbor situsblog blogger milik anda.
Jika diantara pengguna baru blogger belum memahami cara membuat menu horizontal drop down pada situsblog maka simak dan terapkan cara dibawah ke situsblog nya berikut ini;
Berikut adalah Cara Membuat Menu Drop Down Horizontal;
1. Masuk ke akun Blogger Pilih menu Tema
2. Lalu Klik Edit HTML
3. Cari kode ]]></b:skin>
4. untuk memudahkan nya tekan CTRL F Bersamaan
5. Lalu salin dan tempelkan kode HTML dibawah tepat diatas kode ]]></b:skin>
#Menu { background:
#0573ce;
width: 880px; height: 35px; font-size: 12px; font-family: Arial, Tahoma, Verdana; color:
#0573ce; font-weight: bold; margin-bottom: 30px; padding: 2px; } #box { width: 875px; float: left; margin: 0; padding: 0; } #punch { margin: 0; padding: 0; } #punch ul { float: left; list-style: none; margin: 0; padding: 0; } #punch li { list-style: none; margin: 0; padding: 0; } #punch li a, #punch li a:link, #punch li a:visited { color:
#0573ce; display: block; font-size: 16px; font-family: Georgia, Times New Roman; font-weight: normal; text-transform: lowercase; margin: 0; padding: 9px 15px 8px; } #punch li a:hover, #punch li a:active { background:
#0573ce; color: warna1; margin: 0; padding: 9px 15px 8px; text-decoration: none; } #punch li li a, #punch li li a:link, #punch li li a:visited { background:
#0573ce; width: 150px; color: warna2; font-size: 14px; font-family: Georgia, Times New Roman; font-weight: normal; text-transform: lowercase; float: none; margin: 0; padding: 7px 10px; border-bottom: 1px solid #FFF; border-left: 1px solid #FFF; border-right: 1px solid #FFF; } #punch li li a:hover, #punch li li a:active { background:
#0573ce; color:
#0573ce; padding: 7px 10px; } #punch li { float: left; padding: 0; } #punch li ul { z-index: 9999; position: absolute; left: -999em; height: auto; width: 170px; margin: 0; padding: 0; } #punch li ul a { width: 140px; } #punch li ul ul { margin: -32px 0 0 171px; } #punch li:hover ul ul, #punch li:hover ul ul ul, #punch li.sfhover ul ul, #punch li.sfhover ul ul ul { left: -999em; } #punch li:hover ul, #punch li li:hover ul, #punch li li li:hover ul, #punch li.sfhover ul, #punch li li.sfhover ul, #punch li li li.sfhover ul { left: auto; } #punch li:hover, #punch li.sfhover { position: static; }Contoh penerapan kode HTML nya dalam template seperti gambar berikut;
Pilih Menu Tema
Dan Berikut juga langkah selanjutnya seperti gambar dibawah ini;
Kemudian Klik Edit HTML
Lalu Cari Kode ]]></b:skin>
Tempelkan Kode Menu
Silahkan anda ganti kode warna yang sudah admin beri tanda warna merah pada kode HTML nya atau ganti dengan kode warna favorit yang anda sukai ,untuk kode warna anda bisa lakukan searching google banyak kode untuk warna-warna yang lebih keren.
6. Simpan Template dan agar keren lagi tampilan menu drop down horizontal nya pada situsblog blogger Anda, maka langkah selanjutnya adalah pergi ke "Tata Letak " halaman blog Anda lalu "tambahkan gadget " pada bagian sidebar atau yang lain di mana Anda ingin munculkan menu drop down horizontal
7. Pilih "HTMLJavaScript " pada menu widget
8. Dan salin lalu tempelkan kode di bawah ini ke dalam "HTMLJavaScript " widgetnya dan biarkan Kolom Nama Judul nya di kosongkan
<div id="Menu">
<div id="box">
<ul id="punch">
<li><a href="xxxx">Home</a></li>
<li>
<a href="xxxx">Menu</a>
<ul>
<li>
<a href="xxxx">Sub Menu</a>
<ul>
<li><a href="xxxx">Sub Menu1</a></li>
<li><a href="xxxx">Sub Menu2</a></li>
<li><a href="xxxx">Sub Menu3</a></li>
</ul>
</li>
<li><a href="xxxx">Sub Menu4</a></li>
<li><a href="xxxx">Sub Menu5</a></li>
<li><a href="xxxx">Sub Menu6</a></li>
<li><a href="xxxx">Sub Menu7</a></li>
</ul>
</li>
<li><a href=" style="color: red;">xxxx">Menu1</a></li>
<li><a href=" style="color: red;">xxxx">Menu2</a></li>
</ul>
</div>
</div>
9. Selanjutnya ganti nama menu sesuai keperluan atau keinginan anda. dan ganti tanda xxxx yang sudah diberi tanda warna merah dengan alamat URL menu situsblog yang anda inginkan lalu Klik SIMPAN
Jika posisi gadget menu drop down horizontal ini tersimpan pada sidebar maka geser atau pindahkan di tempat gadget halaman menu yang anda inginkan lalu langkah terakhir klik tombol SIMPAN SETELAN di bagian kanan atas dasbor blogger anda.
Nah, Jika sudah anda melakukan cara di atas dengan betul dan benar anda berhasil membuat menu drop down horizontal di situsblog milik anda dan apabila cara ini tidak berfungsi maka silahkan kritik dan saran di kolom komentar di bawah postingan artikel ini, terimakasih salam blogger.