 |
| Ilustrasi menu dropdown. (Jurnal Naim) |
Menu navigasi merupakan bagian yang sangat krusial bagi sebuah blog. Sangat penting dan wajib punya deh pokoknya. Sebab menu tersebut bisa membantu pengunjung untuk mencari konten yang sesuai dengan kebutuhan mereka. Dan tentunya hal itu bisa membuat blog kita semakin populer dengan banyaknya kunjungan.
Menu dalam website atau blog sendiri ada berbagai macam jenis, salah satunya menu dropdown. Menu dropdown biasa digunakan karena memiliki banyak slot dan sangat efektif untuk menempatkan pengelompokan kategori yang jumlahnya banyak.
Misalkan Anda memiliki menu Blogger, maka jika menu tersebut disorot oleh mouse akan ada efek turun kebawah dengan berbagai macam sub-kategori seperti Trik Blogging, Template Blogger, dan yang lainnya.
Membuat Menu Dropdown
Catatan: Artikel ini diterbitkan kali pertama pada 2010 lalu dan kode yang ada mungkin sudah kurang up-to-date.
Pertama, masuk ke halaman Theme dan ada baiknya untuk melakukan Backup terlebih dahulu sebagai antisipasi apabila mengalami error saat melakukan modifikasi. Namun ini bersifat opsional, Anda bisa langsung menuju Edit HTML jika tidak ingin melakukan Backup.
 |
| Opsi Backup pada halaman Theme. |
Carilah kode dibawah ini. Anda bisa menggunakan Ctrl + F untuk mempercepat pencarian.
]]></b:skin>
Copy kode CSS berikut, dan paste diatas kode tersebut.
<style media="screen" type="text/css">
body{ behavior:url("csshover2.htc"); }
.pd_menu_01 {float:left; padding:0; margin:0;color: #FFFFFF;background: #0000A0;width:100%; border:solid 1px #004080;clear:both;} /*Color navigation bar normal mode*/
.pd_menu_01 a, .pd_menu_01 a:visited {
font-family:Arial, Helvetica, sans-serif;
font-style:normal;
font-weight:bold;
font-size:12px;
color: #FFFFFF;
background-color: #0000A0;
text-decoration: none;
}
.pd_menu_01 ul {list-style-type:none;padding:0; margin:0;}
.pd_menu_01 ul li {float:left; position:relative; z-index:auto !important ; z-index:1000 ; border-right:solid 1px #004080; border-left:solid 1px #004080;}
.pd_menu_01 ul li a {color: #FFFFFF;background: #0000A0;float:none !important ; float:left ; display:block; height:30px; line-height:30px; padding:0 10px 0 10px; text-decoration:none; }
.pd_menu_01 ul li ul {display:none; border:none;color: #FFFFFF;background: #0000A0; width:1px}
.pd_menu_01 ul li:hover a {background-color:#008000; text-decoration:none; color:#FFFF00;} /*Color main cells hovering mode*/
.pd_menu_01 ul li:hover ul {display:block; position:absolute; z-index:999; top:29px; margin-top:1px; left:0;}
.pd_menu_01 ul li:hover ul li a {display:block; width:12em; height:auto; line-height:1.3em; margin-left:-1px; padding:5px 10px 5px 10px; border-left:solid 1px #004080; border-bottom: solid 1px #004080; background-color:#0000FF; color:#FFFFFF;} /*Color subcells normal mode*/
.pd_menu_01 ul li:hover ul li a:hover {background-color:#CA0000; text-decoration:none;color:#FFFF00;} /*Color subcells hovering mode*/
.pd_menu_01 ul li a:hover {background-color:#008000; text-decoration:none;color:#FFFF00;} /*Color main cells hovering mode*/
.pd_menu_01 ul li a:hover ul {display:block; width:12em; position:absolute; z-index:999; top:29px; left:0; }
.pd_menu_01 ul li ul li a:visited { background-color:#0000FF; color:#FFFFFF;} /*Color subcells normal mode*/
.pd_menu_01 ul li a:hover ul li a {display:block; width:12em; height:1px; line-height:1.3em; padding:4px 16px 4px 16px; border-left:solid 1px #004080; border-bottom: solid 1px #004080; background-color:#0000FF; color:#FFFFFF;}
.pd_menu_01 ul li a:hover ul li a:hover {background-color:#CA0000; text-decoration:none;color:#FFFF00;} /*Color subcells hovering mode*/Klik Simpan.
Selanjutnya, Anda perlu menambahkan widget pada halaman Layout atau Tata Letak. Cari posisi yang efektif untuk menu, biasanya dibawah header. Klik Tambahkan Gadget, kemudian pilih HTML/JavaScript.
Tidak perlu mengisi judul widget. Kemudian paste kode berikut ke bagian konten HTML/JavaScript tersebut.
<div class='widget-content'>
<div class="pd_menu_01 ">
<ul>
<li>
<a href="#">BLOGGER</a>
<ul>
<li><a href="https://urlblogkamu.blogspot.com" class="lastone">TRIK BLOGGER</a></li>
<li><a href="https://urlblogkamu.blogspot.com" class="lastone">TEMPLATE BLOGGER</a></li>
</ul>
</li>
</ul>
<ul>
<li>
<a href="#">WORDPRESS</a>
<ul>
<li><a href="https://urlblogkamu.blogspot.com" class="lastone">TRIK WORDPRESS</a></li>
<li><a href="https://urlblogkamu.blogspot.com" class="lastone">WORDPRESS TEMPLATE</a></li>
</ul>
</li>
</ul>
<ul>
<li>
<a href="#">DOWNLOAD</a>
<ul>
<li><a href="https://urlblogkamu.blogspot.com">SOFTWARE</a></li>
<li><a href="https://urlblogkamu.blogspot.com">GAME FLASH</a></li>
<li><a href="https://urlblogkamu.blogspot.com">ANTI VIRUS</a></li>
</ul>
</li>
</ul>
<ul>
<li>
<a href="#">KOMPUTER</a>
<ul>
<li><a href="https://urlblogkamu.blogspot.com" class="lastone">TRIK KOMPUTER</a></li>
</ul>
</li>
</ul>
<ul>
<li>
<a href="#">SEPAK BOLA</a>
<ul>
<li><a href="https://urlblogkamu.blogspot.com">LIGA INGGRIS</a></li>
<li><a href="https://urlblogkamu.blogspot.com">LIGA ITALIA</a></li>
<li><a href="https://urlblogkamu.blogspot.com">LIGA JERMAN</a></li>
<li><a href="https://urlblogkamu.blogspot.com">LIGA PERANCIS</a></li>
<li><a href="https://urlblogkamu.blogspot.com">LIGA SPANYOL</a></li>
<li><a href="https://urlblogkamu.blogspot.com">LIGA BELANDA</a></li>
</ul>
</li>
</ul>
<ul>
<li>
<a href="#">BOLA DUNIA</a>
<ul>
<li><a href="https://urlblogkamu.blogspot.com" class="lastone">PIALA DUNIA 2010</a></li>
<li><a href="https://urlblogkamu.blogspot.com" class="lastone">LIGA CHAMPIONS</a></li>
</ul>
</li>
</ul>
<ul>
<li>
<a href="#">FACEBOOK</a>
<ul>
<li><a href="https://urlblogkamu.blogspot.com" class="lastone">TRIK FACEBOOK</a></li>
</ul>
</li>
</ul>
<ul>
<li>
<a href="#">PASANG IKLAN</a>
<ul>
<li><a href="https://urlblogkamu.blogspot.com">BANNER</a></li>
</ul>
</li>
</ul>
<ul>
<li>
<a href="#">ONLINE</a>
<ul>
<li><a href="https://urlblogkamu.blogspot.com">ONLINE</a></li>
</ul>
</li>
</ul>
</div>
</div>Klik Simpan. Silahkan cek halaman blog Anda untuk melihat hasil menu dropdown yang telah dibuat.
Semoga bermanfaat.