Post Game: dropdown

Showing posts with label dropdown. Show all posts

Saturday, November 26, 2016

Cara Membuat Navigasi Label Dropdown Menu

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 seleraanda.

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/AVvXsEh0my3s0jwslnTktiA_MPOm60pCYiBE7lPjKQZExkTXXQXjK0O2Qxo4l2AgXKfPxnge89V2F6qkts0_3jXwya1CAoEYnx-8_wCufFAzhGDQM0aOr-0E_QufdsZtiMVVXHHFAhmR3P3J-g/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>

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>

<li><a href="http://www.frewaremini.com">Halaman depan</a></li>

<li onmouseout=petakumpet("submenu1") onmouseover=umpetpetak("submenu1")><a href=#>JUDUL MENU 1</a>

<ul>