Cara memasang multi/double 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 :D

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 berjaga- jaga bila terjadi kesalahan.
4.coba pratinjau dahulu sebelum di Save Template..

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

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

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

6. kemudian Save/Simpan dan lihat hasilnya,, selamat mencoba dan semoga berhasil :D

Penulis : Unknown ~ Sebuah blog yang menyediakan berbagai macam informasi

Artikel Cara memasang multi/double menu dropdown di blog ini dipublish oleh Unknown pada hari Senin, 10 September 2012. Semoga artikel ini dapat bermanfaat.Terimakasih atas kunjungan Anda silahkan tinggalkan komentar.sudah ada 2 komentar: di postingan Cara memasang multi/double menu dropdown di blog