Cara Membuat Navigasi Label Dropdown Menu
by : http://www.frewaremini.com/
tidaklah terlalu sulit, dimana keuntungan kita membuat Navigasi
Dropdownmenu ini kita bisa menaruh banyak link Label/tag atau kategori
postingan hingga berderet kebawah tergantung selera
anda.
Keuntungan lain dari widget Navigasi Dropdownmenu ini, terutama pada
blog yang sudah cukup lama usianya sehingga label/kategori/tag postingan
blog sudah demikian banyaknya, sehingga akan mengurangi estetika atau
keindahan blog jika Label blog kita tampilkan secara default, karena
akan memenuhi sidebar anda.
Dengan menggunakan Navigasi Dropdownmenu ini Label anda bisa mengurutkan
Label berdasarkan Kategori jenis postingan berderet kebawah yang hanya
muncul jika kita mengarahkan mouse tepat diatas judul Label, jadi akan
menghemat halaman blog anda. Sebelum memasang widget ini pastikan anda
telah merancang Judul Menu dan menentukan link-link url label anda
sebagai submenu secara berurutan sesuai dengan kategori Judul Menu
utamanya, hal ini untuk mengantisipasi agar dengan adanya Navigasi
Dropdownmenu pengunjung menjadi tidak kebingungan untuk mencari artikel
yang diinginkan pada blog anda.
Adapun cara Membuat Navigasi Kategori/Label/Tag Drop Downmenu ikuti langkah-langkah berikut ini :
1. Silahkan masuk ke akun Blogger anda.
2. Masuk ke Design, lanjutkan ke EDIT HTML, kemudian backup template anda dengan cara download full template.
3. Cari kode berikut
]]></b:skin>
4. setelah ketemu kode di atas silahkan letakkan kode di bawah ini tepat diatas kode
]]></b:skin>
/* Navigasi Dropdown Menu */
#navdropdownmenu{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGs7DfBu9AOLudbYT5jUwVDhqKcwniVagluqxY6eYvmJG1N_oVMQQYxWCwV1_L9uV771x0zxlRJZv1TWxYlkODZDQKvAwQokC4Ve33LkFza7hQPoYb8Mnm5WHayYlYZDZ5LVpSFYoh4w/s1600/navbg.png); /*Warna Latar Belakang */
width:100%;
height:auto;
margin:0;
padding:0;
}
#navdropdownmenu ul{
float:left;
list-style:none;
margin:0;
padding:0;
}
#navdropdownmenu li{
list-style:none;
float:left;
}
#navdropdownmenu li a, #navdropdownmenu li a:link, #navdropdownmenu li a:visited{
color:black; /* Warna Teks */
display:block;
padding:9px 10px 9px 10px;
font-size: 12px; /* Ukuran Teks */
font-family: verdana; /* Jenis font */
text-decoration:none;
}
#navdropdownmenu li a:hover{
background:pink; /* Warna latar saat kursor mouse berada di atasnya (hover) */
color:white; /* Warna teks saat kursor mouse berada di atasnya */
padding:9px 10px 9px 10px;
}
#navdropdownmenu li ul{
z-index:10;
position:absolute;
height:auto;
width:200px; /* Lebar submenu */
border-width:1px 0 0 0; /* Tebal garis pinggir submenu */
border-style:solid;
border-color:#ffff66; /* Warna garis pinggir submenu */
}
#navdropdownmenu li ul li a, #navdropdownmenu li ul li a:link, #navdropdownmenu li ul li a:visited{
float:none;
background:silver; /* Warna latar belakang submenu */
width:200px; /* Lebar submenu. Isi dengan nilai yang sama */
border-width:0 1px 1px 1px; /* Tebal garis pinggir submenu */
border-style:solid;
border-color:#ffff66; /* Warna garis pinggir submenu */
}
#navdropdownmenu li ul li a:hover{
background:royalblue; /* Latar belakang submenu ketika kursor mouse berada di atasnya */
color:white; /* Warna teks submenu ketika kursor mouse berada di atasnya */
}
#navdropdownmenu li:hover ul, #navdropdownmenu li a:hover ul#submenu, #navdropdownmenu li:hover a:hover
ul#submenu{
z-index:10;
position:absolute;
height:auto;
width:200px; /* Lebar submenu */
left:auto;
}
.ngumpet{
display:none;
}
.muncul{
display:block;
}
5. Jika sudah, lanjutkan cari kode berikut
</head>
6. Kemudian letakkan kode berikut diatas kode
</head>
<script>
var auahgelap = '';
function petakumpet(id)
{
var menu = document.getElementById(id);
var sangmantan = menu.className;
if (sangmantan == 'ngumpet') {
if (auahgelap != '') {
var terlalu = document.getElementById(auahgelap);
terlalu.className = 'ngumpet';
}
menu.className = 'muncul';
auahgelap = id;
} else {
menu.className = 'ngumpet';
}
}
function umpetpetak(id)
{
var menu = document.getElementById(id);
var sangmantan = menu.className;
if (sangmantan != 'ngumpet') {
if (auahgelap == '') {
var terlalu = document.getElementById(auahgelap);
terlalu.className = 'muncul';
}
menu.className = 'ngumpet';
auahgelap = id;
} else {
menu.className = 'muncul';
}
}
</script>
7. Langkah selanjutnya carilah kode sebagai berikut
<div id='header-wrapper'>
8. Letakkan kode di bawah ini, tepat di bawah kode
<div id='header-wrapper'>
<div id='navdropdownmenu'>
<ul id='navdropdownmenu'>
<li><a href="http://www.frewaremini.com">Halaman depan</a></li>
<li
onmouseout='petakumpet("submenu1")'
onmouseover='umpetpetak("submenu1")'><a href='#'>JUDUL MENU 1</a>
<div class='ngumpet' id='submenu1'>
<ul>
<li><a href='#'>Ganti Dengan Judulmu</a></li>
<li><a href='#'>Ganti Dengan Judulmu</a></li>
<li><a href='#'>Ganti Dengan Judulmu</a></li>
<li><a href='#'>Ganti Dengan Judulmu</a></li>
<li><a href='#'>Ganti Dengan Judulmu</a></li>
</ul>
</div>
</li>
<li
onmouseout='petakumpet("submenu2")'
onmouseover='umpetpetak("submenu2")'><a
href='#'>JUDUL MENU 2</a>
<div class='ngumpet' id='submenu2'>
<ul>
<li><a href='#'>Ganti Dengan Judulmu</a></li>
<li><a href='#'>Ganti Dengan Judulmu</a></li>
<li><a href='#'>Ganti Dengan Judulmu</a></li>
<li><a href='#'>Ganti Dengan Judulmu</a></li>
<li><a href='#'>Ganti Dengan Judulmu</a></li>
<li><a href='#'>Ganti Dengan Judulmu</a></li>
</ul>
</div>
</li>
<li
onmouseout='petakumpet("submenu3")'
onmouseover='umpetpetak("submenu3")'><a
href='#'>JUDUL MENU 3</a>
<div class='ngumpet' id='submenu3'>
<ul>
<li><a href='#'>Ganti Dengan Judulmu</a></li>
<li><a href='#'>Ganti Dengan Judulmu</a></li>
<li><a href='#'>Ganti Dengan Judulmu</a></li>
<li><a href='#'>Ganti Dengan Judulmu</a></li>
<li><a href='#'>Ganti Dengan Judulmu</a></li>
<li><a href='#'>Ganti Dengan Judulmu</a></li>
</ul>
</div>
</li>
<li
onmouseout='petakumpet("submenu4")'
onmouseover='umpetpetak("submenu4")'><a
href='#'>JUDUL MENU 4</a>
<div class='ngumpet' id='submenu4'>
<ul>
<li><a href='#'>Ganti Dengan Judulmu</a></li>
<li><a href='#'>Ganti Dengan Judulmu</a></li>
<li><a href='#'>Ganti Dengan Judulmu</a></li>
<li><a href='#'>Ganti Dengan Judulmu</a></li>
<li><a href='#'>Ganti Dengan Judulmu</a></li>
<li><a href='#'>Ganti Dengan Judulmu</a></li>
</ul>
</div>
</li>
<li
onmouseout='petakumpet("submenu5")'
onmouseover='umpetpetak("submenu5")'><a
href='#'>JUDUL MENU 5</a>
<div class='ngumpet' id='submenu5'>
<ul>
<li><a href='#'>Ganti Dengan Judulmu</a></li>
<li><a href='#'>Ganti Dengan Judulmu</a></li>
<li><a href='#'>Ganti Dengan Judulmu</a></li>
<li><a href='#'>Ganti Dengan Judulmu</a></li>
</ul>
</div>
</li>
<li
onmouseout='petakumpet("submenu6")'
onmouseover='umpetpetak("submenu6")'><a
href='#'>JUDUL MENU 6</a>
<div class='ngumpet' id='submenu6'>
<ul>
<li><a href='#'>Ganti Dengan Judulmu</a></li>
<li><a href='#'>Ganti Dengan Judulmu</a></li>
<li><a href='#'>Ganti Dengan Judulmu</a></li>
<li><a href='#'>Ganti Dengan Judulmu</a></li>
<li><a href='#'>Ganti Dengan Judulmu</a></li>
</ul>
</div>
</li>
</ul>
</div>
9. Ganti semua kode # pada submenu diatas dengan alamat URL label anda.
Kemudian isikan Judul label tersebut pada tulisan yang berwarana biru,
kecuali tanda # pada Menu 1 s.d Menu 6 jika tidak ingin diberikan link
biarkan saja seperti itu.
10. setelah selesai, silahkan simpan template anda. Jika anda kurang
sreg dengan hasilnya karena tidak matching dengan template anda silahkan
edit ukuran, tinggi, lebar, border,warna, maupun mengganti
backgroundnya pada kode di atas
]]></b:skin> tersebut.