Cara pasang Multi Menu Dropdown di blog

baiklah klo begitu setelah sekian banyak rumah blog yang ane kunjungi naik mobil google, akhirnya yang ane cari ketemu yaitu multi menu drop down,, walaupun gak semua work di blog/atau memang bila di pasang di template berbeda, dan itu pun ane coba satu persatu,,hmmm gapapa lah buat bagi2 hasil gentayangan ane sekalian mau sharing bagi blogger yang lagi cari2 menu yang seperti ini,, oke lah langsung aja :h:

Click DEMO untuk melihat menu dan hasilnya ada di menu paling bawah. Setelah kamu lihat ada beberapa menu drop down yang belum di post, silahkan kamu pilih dan nanti saya akan postkan sesuai request.



1.Otomatis harus login dulu ke blog
2.Pilih Design>Edit HTML dan copy paste code berikut sebelum atau di atas ]]></b:skin>.
3.Supaya mudah cari kode nya gunakan Ctrl + F dan jangan lupa contreng Expand Template Widget agar menampilkan code yang tersembunyi.

/* main and secondary top-level navigations */ #nav { float: left; font-family: 'Oswald', sans-serif; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; overflow: hidden; width: 100%; } #nav ul { margin:0; padding:0; list-style:none; } #nav ul li { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; float:left; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhe4dGdLawXmVn5kMeXllmUSJ-JbO4TNUy0-LbBChRzCNBiNJPoe4U2qNSwQ4T5gIsUhQTu9Z9sIhayDtZTQ5K6H5-VdVAx3EucZny_6aF-Lm1tb7neSi5Fdjv_XtczI-cmoRj1k_LOvnM/s320/menu-link-bg.png) bottom center no-repeat; } #nav ul li a { width: 100%; float: left; color:#fff; padding: 10px 19px; text-decoration:none; background:#3C4042; background: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(59,63,65)), color-stop(0.55, rgb(72,76,77)), color-stop(0.78, rgb(75,77,77)) ); background: -moz-linear-gradient( center bottom, rgb(59,63,65) 9%, rgb(72,76,77) 55%, rgb(75,77,77) 78% ); background: -o-linear-gradient( center bottom, rgb(59,63,65) 9%, rgb(72,76,77) 55%, rgb(75,77,77) 78% ); border-left: 1px solid rgba(255, 255, 255, 0.05); border-right: 1px solid rgba(0,0,0,0.2); text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.6); -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } #nav ul li a:hover, #nav ul li:hover > a { color: #fff; background:#3C4042; background: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(77,79,79)), color-stop(0.55, rgb(67,70,71)), color-stop(0.78, rgb(69,70,71)) ); background: -moz-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% ); background: -o-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% ); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2), 0 -1px #000; } #nav li ul a:hover, #nav ul li li:hover > a { color: #fff; background: #5C9ACD; background: -webkit-gradient( linear, left bottom, left top, color-stop(0.17, rgb(61,111,177)), color-stop(0.51, rgb(80,136,199)), color-stop(1, rgb(92,154,205)) ); background: -moz-linear-gradient( center bottom, rgb(61,111,177) 17%, rgb(80,136,199) 51%, rgb(92,154,205) 100% ); background: -o-linear-gradient( center bottom, rgb(61,111,177) 17%, rgb(80,136,199) 51%, rgb(92,154,205) 100% ); border-bottom: 1px solid rgba(0,0,0,0.6); border-top: 1px solid #7BAED9; text-shadow: 0 1px rgba(255, 255, 255, 0.3); } #nav li ul { background:#3C4042; background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(77,79,79)), color-stop(0.55, rgb(67,70,71)), color-stop(0.78, rgb(69,70,71)) ); background-image: -moz-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% ); background-image: -o-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% ); border-radius: 0 0 10px 10px; -moz-border-radius: 0 0 10px 10px; -webkit-border-radius: 0 0 10px 10px; left: -999em; margin: 35px 0 0; position: absolute; width: 160px; z-index: 9999; box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset; -moz-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset; -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset; border: 1px solid rgba(0, 0, 0, 0.5); } #nav li:hover ul { left: auto; } #nav li ul a { background: none; border: 0 none; margin-right: 0; width: 120px; box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; border-bottom: 1px solid transparent; border-top: 1px solid transparent; } #nav li li ul { margin: -1px 0 0 160px; -webkit-border-radius: 0 6px 6px 6px; -moz-border-radius: 0 6px 7px 6px; border-radius: 0 6px 6px 6px; visibility:hidden; } #nav li li:hover ul { visibility:visible; } #nav ul ul li:last-child > a { -moz-border-radius:0 0 6px 6px; -webkit-border-radius:0 0 6px 6px; border-radius:0 0 6px 6px; } #nav ul ul ul li:first-child > a { -moz-border-radius:0 6px 0 0; -webkit-border-radius:0 6px 0 0; border-radius:0 6px 0 0; }

5. Setelah di save masuk ke Tata Letak pilih bagian header atau bagian atas Copy paste Code berikut ;)

<div id="nav"> <ul> <li><a href="alamat blog anda">Judul</a></li> <li><a href="ALAMAT LINK">Judul</a> <ul> <li><a href="ALAMAT LINK">Judul</a></li> <li><a href="ALAMAT LINK">Judul</a> <ul> <li><a href="ALAMAT LINK">Judul</a></li> <li><a href="ALAMAT LINK">Judul</a></li> </ul> </li> <li><a href="ALAMAT LINK">Judul</a></li> <li><a href="ALAMAT LINK">Judul</a></li> <li><a href="ALAMAT LINK">Judul</a></li> <li><a href="ALAMAT LINK">Judul</a></li> </ul> </li> <li><a href="ALAMAT LINK">Judul</a> <ul> <li><a href="ALAMAT LINK">Judul</a> <ul> <li><a href="ALAMAT LINK">Judul</a></li> <li><a href="ALAMAT LINK">Judul</a></li> <li><a href="ALAMAT LINK">Judul</a></li> <li><a href="ALAMAT LINK">Judul</a></li> </ul> </li> <li><a href="#">By tag name</a> <ul> <li><a href="ALAMAT LINK">Judul</a></li> <li><a href="ALAMAT LINK">Judul</a></li> <li><a href="ALAMAT LINK">Judul</a></li> </ul> </li> </ul> </li> <li><a href="ALAMAT LINK">Judul</a></li> <li><a href="ALAMAT LINK">Judul</a> <ul> <li><a href="ALAMAT LINK">Judul</a></li> <li><a href="ALAMAT LINK">Judul</a></li> </ul> </li> <li><a href="ALAMAT LINK">Judul</a> <ul> <li><a href="ALAMAT LINK">Judul</a></li> <li><a href="ALAMAT LINK">Judul</a></li> <li><a href="ALAMAT LINK">Judul</a></li> <li><a href="ALAMAT LINK">Judul</a></li> <li><a href="ALAMAT LINK">Judul</a></li> <li><a href="ALAMAT LINK">Judul</a></li> </ul> </li> <li><a href="ALAMAT LINK">Judul</a></li> <li><a href="ALAMAT LINK">Contact</a></li> <li><a href="ALAMAT LINK">Judul</a></li> </ul> </div>

Pratinjau dahulu sebelum di Save Template..
6. kemudian Save/Simpan. NB: Ganti ALAMAT LINK dan Judul dengan alamat URL yang sesuai dengan judul :l: