Pages

▼

Sabtu, 06 Juli 2013

Cara Membuat Menu Dropdown/Menu Navigasi Masive Blue

Mengalami kesulitan untuk membuat menu dropdown?, sama seperti yang pernah saya alami, setelah sedikit ketelatenan mencari cara untuk membuat menu dropdown akhirnya ketemu juga bagaimana cara membuat menu dropdown sederhana yang dikenal dengan menu navigasi masive blue.

Perlu kehati-hatian dalam mepraktekannya, karena ada dua langkah pokok yang harus dilakukan plus menyesuaikan dengan link yang kita inginkan.

Langkah Pertama :
  1. Login ke Akun Blogger
  2. Klik Rancangan/Tata Letak
  3. Klik Edit HTML (Jangan lupa download Template lengkap atau Copy !)
  4. Cari Kode berikut :



 ]]></b:skin>

5. Masukan di atas kode tersebut, kode dibawah ini (copy paste) :



 menu{
border:none;
border:0px;
margin:0px;
padding:0px;
font: 100% "Arial", Arial;
font-size:11px;
font-weight:bold;

 }
.menu ul{
background:#333333;
height:35px;
list-style:none;
margin:0;
padding:0;
font-size:11px;
font-weight:bold;
}
.menu li{
float:left;
padding:0px;
}
.menu li a{
background:#333333 url("http://i47.tinypic.com/qp53sw.jpg") bottom right no-repeat;
color:#cccccc;
display:block;
font-weight:normal;
line-height:30px;
margin:0px;
padding:0px 30px;
text-align:center;
text-decoration:none;
}
.menu li a:hover, .menu ul li:hover a{
background: #2580a2 url("http://i49.tinypic.com/13zbc53.jpg") bottom center no-repeat;
color:#FFFFFF;
text-decoration:none;
}
.menu li ul{
background:#333333;
display:none;
height:auto;
padding:0px;
margin:0px;
border:0px;
position:absolute;
width:225px;
z-index:200;
/*top:1em;
/*left:0;*/
}
.menu li:hover ul{
display:block;

 }
.menu li li {
background:url('http://i45.tinypic.com/nvxxqg.jpg') bottom left no-repeat;
display:block;
float:none;
margin:0px;
padding:0px;
width:225px;
}
.menu li:hover li a{
background:none;

 }
.menu li ul a{
display:block;
height:30px;
font-size:11px;
font-style:normal;
margin:0px;
padding:0px 15px 0px 15px;
text-align:left;
}
.menu li ul a:hover, .menu li ul li:hover a{
background:#2580a2 url('http://i50.tinypic.com/66elwh.jpg') center left no-repeat;
border:0px;
color:#ffffff;
text-decoration:none;
}
.menu p{
clear:left;
}

6. Simpan, langkah pertama selesai......

Langkah Kedua
  1. Buka Elemen Laman
  2. Klik Tambah Gadget Pada Header (untuk Template yang memungkinkan tambah gadget pada header, jika tidak bisa, sebaiknya anda baca disini)
  3. Pada Gadget HTML/ Java skript, masukkan kode berikut (copy paste) :
<div class="menu">
<ul><li><a href="#">HOME</a></li><li><a href="#">PENGANTAR</a></li><li><a href="#">UTAMA</a><ul><li><a href="#">Undang-Undang Lingkungan Hidup</a></li><li><a href="#">Peraturan Pelaksanaan UU LH</a></li><li><a href="#">Undang-Undang Terkait</a>
</li></ul></li><li><a href="#">CATATAN</a><ul><li><a href="#">Amdal dan UKL-UPL</a></li><li><a href="#">Izin Lingkungan</a></li><li><a href="#">Tata Cara Pengaduan Masyarakat</a></li><li><a href="#">Baku Mutu Lingkungan Hidup</a></li><li><a href="#">Ketentuan Pidana Lingkungan Hidup</a></li></ul></li><li><a href="#">TEKNOLOGI</a>
<ul><li><a href="#">Bahan Bakar Alternatif</a></li><li><a href="#">Energi Terbarukan</a></li></ul></li><li><a href="#">BERITA</a>
</li><li><a href="http://prolingkungan.blogspot.com/">HUMOR</a>
<ul><li><a href="#">Humor</a></li></ul></li><li><a href="#">KONTAK</a></li><li><a href="http://prolingkungan.blogspot.com/2011/04/tukar-link.html">TUKAR LINK </a>
<ul><li><a href="#" >Cara Melakukan Tukar Link</a></li></ul></li></ul></div>

4. Selesai, jangan lupa Simpan

Selamat Mencoba

Catatan 1 :
  • Ganti Tanda # dengan href="#" link url target ( jika diatas terdapat tulisan target="blank " sebelum tanda > menandakan link tersebut membuka jendela baru)
  • Ganti Home, Utama dst dengan teks yang ditampilkan pada menu navigasi
  • Blog ini yang mempergunakan menu navigasi masive blue, contoh lainya dapat dilihat disini
  • Bagi Anda yang menginginkan menu dropdown yang lebih komplek dapat dilihat disini

Catatan 2 :

at

1 komentar: