Cara Membuat MENU DROP DOWN di Blog
Membuat menu navigasi bisa dilakukan dengan berbagai cara, bisa memasukkan kode css ke dalam template, ini permanen tentunya, dan cara yang kedua cukup menambahkan widget dengan memasukkan kode tertentu ke dalam widget/gadget tersebut. Pada tutorial ini saya akan membuat menu navigasi Drop Down dengan cara yang cukup mudah yang letaknya di bawah header. Sebagai contoh sobat bisa lihat di bagian atas blog saya ini, lebih kurang tampilannya seperti itu. Namun jika sobat berniat untuk menambah jumlah menu yang ingin ditampilkan juga bisa, dengan cara sedikit mengotak-atik code script di bawah ini.
Oke langsung saja bagaimana cara membuat menu navigasi Drop Down.
Masuk ke akun blogger> Dasbor > tata letak > Tambahkan gadget > pilih HTML/Javascript, kemudian masukkan kode berikut ini. (Jangan lupa saat menambahkan gadget, pilih gadget yang di bawah header.)
Copy Code Script di Bawah ini
<style>
#menunavigasihorisontal {
background: #848484;
width: 100%;
color: #FFF;
margin: 10px 0;
padding: 0;
position: relative;
border-top:0px solid #960100;
height:35px; }
#bb2nav {
margin: 0;
padding: 0;}
#bb2nav ul {
float: left;
list-style: none;
margin: 0;
padding: 0;}
#bb2navli {
list-style: none;
margin: 0;
padding: 0;}
#bb2nav li a, #bb2nav li a:link, #bb2nav li a:visited {
color: #FFF;
display: block;
font:bold 12px Helvetica, sans-serif;
margin: 0;
padding: 9px 12px 11px 12px;
text-decoration: none;
border-right:0px solid #627AAD;}
#bb2nav li a:hover, #bb2nav li a:active {
background: #2E9AFE;
color: #FFF;
display: block;
text-decoration: none;
margin: 0;
padding: 9px 12px 11px 12px;}
#bb2nav li {
float: left;
padding: 0;}
#bb2nav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 160px;
margin: 0;
padding: 0;}
#bb2nav li ul a {
width: 140px;}
#bb2nav li ul ul {
margin: -25px 0 0 161px;}
#bb2nav li:hover ul ul, #bb2nav li:hover ul ul ul, #bb2nav
li.sfhover ul ul, #bb2nav li.sfhover ul ul ul {
left: -999em;}
#bb2nav li:hover ul, #bb2nav li li:hover ul, #bb2nav li li
li:hover ul, #bb2nav li.sfhover ul, #bb2nav li li.sfhover ul, #bb2nav
li li li.sfhover ul {
left: auto;}
#bb2nav li:hover, #bb2nav li.sfhover {
position: static;}
#bb2nav li li a, #bb2nav li li a:link, #bb2nav li li a:visited {
background: #EDEFF4;
width: 120px;
color: #3B5998;
display: block;
font:normal 12px Helvetica, sans-serif;
margin: 1px 0 0 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
z-index:9999;
border:1px solid #ddd;
-moz-border-radius:4px;
-webkit-border-radius:4px;}
#bb2nav li li a:hover, #bb2nav li li a:active {
background: #627AAD;
color: #FFF;
display: block;}
#bb2nav li li li a, #bb2nav li li li a:link, #bb2nav li li li
a:visited {
background: #EDEFF4;
width: 120px;
color: #3B5998;
display: block;
font:normal 12px Helvetica, sans-serif;
padding: 9px 12px 10px 12px;
text-decoration: none;
z-index:9999;
border:1px solid #ddd;
margin: 1px 0 0 -14px;}
#bb2nav li li li a:hover, #bb2nav li li li a:active {
background: #627AAD;
color: #FFF;
display: block;}
</style>
<div id='menunavigasihorisontal'>
<ul id='bb2nav'>
<li>
<a href='URL SOBAT'>Daftar Isi</a>
</li>
<li>
<a href='URL SOBAT'>Tentang Saya</a>
</li>
<li>
<a href='#'>Menu ▼</a>
<ul>
<li>
<a href='URL SOBAT'>Sub Menu 1</a>
</li>
<li>
<a href='URL SOBAT'>Sub Menu 2</a>
</li>
<li>
<a href='URL SOBAT'>Sub Menu 3</a>
<li>
<a href='URL SOBAT'>Sub Menu 4</a>
</li>
<li>
<a href='URL SOBAT'>Sub Menu 5</a>
</li>
<li>
<a href='URL SOBAT'>Sub Menu 6</a>
</li>
</li>
</ul>
</li>
</ul>
</div>
Pengaturan dan modifikasi;
1. Silahkan ubah warna background menu sesuai selera ditandai dengan kode seperti #2E9AFE.
2. Untuk membuang Sub Menu (Menu Drop Down) yang tidak dibutuhkan, sobat bisa hapus salah satu kode (Lihat contoh kode di bawah)
1. Silahkan ubah warna background menu sesuai selera ditandai dengan kode seperti #2E9AFE.
2. Untuk membuang Sub Menu (Menu Drop Down) yang tidak dibutuhkan, sobat bisa hapus salah satu kode (Lihat contoh kode di bawah)
<li><a href='URL SOBAT'>Sub Menu 6</a></li>
Sedangkan, jika sobat ingin menambah Sub Menu (Menu Drop Down) sobat bisa tambah salah satu kode (Lihat contoh kode di atas)
3. Masukkan alamat halaman atau URL postingan blog yang dikehendaki pada kode berwarna merah. Tukar tulisan berwarna biru dengan judul yang sobat inginkan.
4. Perhatikan kode-kode yang sudah diberi warna saat menambah atau membuang item menu tertentu agar tidak error.
Oke saya kira sudah cukup jelas dan mudah, Selamat mencoba.
3. Masukkan alamat halaman atau URL postingan blog yang dikehendaki pada kode berwarna merah. Tukar tulisan berwarna biru dengan judul yang sobat inginkan.
4. Perhatikan kode-kode yang sudah diberi warna saat menambah atau membuang item menu tertentu agar tidak error.
Oke saya kira sudah cukup jelas dan mudah, Selamat mencoba.
