Cara Membuat Menu Dropdown/Menu Navigasi Masive Blue

Sabtu, 06 Juli 20132komentar

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 :

Share this article :

+ komentar + 2 komentar

14 Desember 2011 08.14

thx

27 November 2016 19.59

KISAH SUKSES
Assalamu alaikum wr wb,,senang sekali saya bisa menulis dan berbagi kepada teman2 melalui room ini, sebelumnya dulu saya adalah seorang Pengusaha Butik yg Sukses, kini saya gulung tikar akibat di tipu teman sendiri, ditengah tagihan utang yg menumpuk, Suami pun meninggalkan saya, dan ditengah himpitan ekonomi seperti ini, saya coba buka internet untuk cari lowongan kerja dan secara tdk sengaja sy liat situs pesugihan AKI SYEH MAULANA Di Website/situnya Saya pun langsug hubungi beliau dan Semua petunjuk AKI saya ikuti dan hanya 3 hari, Alhamdulilah benar benar terbukti dan, semua utang saya lunas dan sisanya buat modal usaha, kata kata beliau yang selalu sy ingat setiap manusia bisa menjadi kaya, hanya saja terkadang mereka tidak tahu atau salah jalan. Banyak orang menganggap bahwa miskin dan kaya merupakan bagian dari takdir Tuhan. Takdir macam apa? Tuhan tidak akan memberikan takdir yang buruk terhadap kita, semua cobaan yang Tuhan berikan merupakan pembuktian seberapa kuat Anda bertahan di dalamnya. Tuhan tidak akan merubah nasib Anda jika Anda tidak berusaha untuk merubahnya. Dan satu hal yang perlu Anda ingat, “Jika Anda terlahir miskin itu bukan salah siapapun, namun jika Anda mati miskin itu merupakan salah Anda, saya juga tidak lupa mengucap syukur kepada ALLAH karna melalui Ritual Penarikan Dana Hibah AKI ZYEH MAULANA saya Bisa sukses. Jadi kawan2 yg dalam kesusahan jg pernah putus asah, kalau sudah waktunya tuhan pasti kasi jalan asal anda mau berusaha, AKI ZYEH MAULANA Banyak Dikenal Oleh Kalangan Pengusaha Dan Artis Ternama Karna Beliau adalah guru spiritual terkenal di indonesia, jika anda ingin seperti saya silahkan Lihat No Tlp Aki Di website/internet ~>KLIK DISINI<~ Wassalam

Poskan Komentar

 
Support : Creating Website | Johny Template | Mas Template
Copyright © 2011. Prolingkungan - All Rights Reserved
Template Created by Creating Website Published by Mas Template
Proudly powered by Blogger