Menu drop down ini sangat praktis dan membuat blog semakin rapi. Untuk demonya kalau nggak error seperti menu diatas.Fungsi Menu drop down salah satunya adalah bisa menghemat Latar blog anda .Contohnya seperti gambar diatas dan buktinya seperti pada blog ini. Bagaimana Mantap bukan..?
Langsung aja dolor kita ikuti Langkah - langkahnya ;
KODE CSS dan HTML
Langsung aja dolor kita ikuti Langkah - langkahnya ;
- Login ke akun Blog anda
- Klik rancangan Elemen Laman
- Klik Add Gadget HTML/Javascript
- Perhatikan kode dibawah ini , copy paste kedalam GADGET tadi
KODE CSS dan HTML
<style type="text/css">
/*MENU*/
#cueros ul li a {position: relative;float: bottom;display: block;width: auto;height: 15px;padding: 5px 0 0 0;margin-right: 5px;text-align: center;font-size: 15px;text-decoration: none;color:transparant;font-weight: bold;outline: none;}#cueros li .current{color: transparant;}#cueros li a:hover, #cueros li a:active {background:#585858;background: -webkit-gradient(linear, left top, left bottom, from(#4B0082), to(#FF0000)); background: -moz-linear-gradient(top,#4B0082, #FF0000); background: -o-linear-gradient(top,#4B0082, #FF0000); display: inline-block;zoom: 1; *display: inline;border: outset 2px #B45F04;padding: 3px 5px;-webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; -webkit-box-shadow: 0 1px 0px rgba(1,0,0,.1); -moz-box-shadow: 0 1px 0px rgba(0,0,0,.1); box-shadow: 0 1px 0px rgba(0,0,0,.1); -webkit-transition:all 0.5s ease-in-out; -moz-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out; -webkit-transform:rotate(5deg);-moz-transform:rotate(5deg);-o-transform:rotate(5deg);}color: #ffffff;margin: 0;font-size:18px;padding: 9px 15px 8px;text-decoration: none;}#cueros {width: auto;float: left;}#cueros ul {float: left;}#cueros li a, #cueros li a:link, #cueros li a:visited {color: #B45F04;display: block;text-transform: capitalize;margin: 0;padding: 6px 12px 8px;font: bold 12px Segoe Script;}#cueros li a:hover, #cueros li a:active {color: #FFFFFF;margin: 0;font-size:13px;padding: 9px 15px 8px;text-decoration: none;font-family:Verdana;}#cueros li li a, #cueros li li a:link, #cueros li li a:visited {background:#585858;background: -webkit-gradient(linear, left top, left bottom, from(#CD1007), to(#000000)); background: -moz-linear-gradient(top,#CD1007, #000000);background: -o-linear-gradient(top,#CD1007, #000000); width: 250px;color: #E6E6FA;-webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; border-style: outset; font: bold 18px Bradley Hand ITC;color: #B45F04;}#cueros li li a:hover, #cueros li li a:active {background:#585858;background: -webkit-gradient(linear, left top, left bottom, from(#FF0000), to(#D9FE00)); background: -moz-linear-gradient(top,#FF0000, #D9FE00);background: -o-linear-gradient(top,#FF0000, #D9FE00); color: #FFFFFF;font-size:18px;font-family:Verdana;text-align: center;padding: 7px 10px;}#cueros li {float: left;padding: 0;}#cueros li ul {z-index: 9999;position: absolute;left: -999em;height: 20px;width: 170px;}#cueros li ul a {width: 140px;}#cueros li ul ul {margin: -32px 0 0 171px;}#cueros li:hover ul ul, #cueros li:hover ul ul ul, #cuerosa li.sfhover ul ul, #cueros li.sfhover ul ul ul {left: -999em;}#cueros li:hover ul, #cueros li li:hover ul, #cueros li li li:hover ul, #cueros li.sfhover ul, #cueros li li.sfhover ul, #cueros li li li.sfhover ul {left: auto;}#cueros li:hover, #cueros li.sfhover {position: static;}#footer-column-divide {clear:both;}#cueros{background:#000;height:30px;border:2px outset #FF0000;padding:2px 0;z-index:999;top:5px;left:5px;right:5px;position:fixed;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;}
</style>
<ul id="cueros">
<li><a href="http://cuerosbhelatos.blogspot.com/">Home</a></li>
<li><a href="http://cuerosbhelatos.blogspot.com/" target="_blank">Menu</a>
<ul class="children">
<li><a href="http://cuerosbhelatos.blogspot.com/p/aplikasi-komputer.html" target="_blank">software PC</a></li>
<li><a href="http://cuerosbhelatos.blogspot.com/search/label/Game%20Action" target="_blank">action game</a></li>
<li><a href="http://cuerosbhelatos.blogspot.com/search/label/Game%20Sexx" target="_blank">adult game</a></li>
<li><a href="http://cuerosbhelatos.blogspot.com/search/label/HD%20Android%20Game" target="_blank">android game</a></li>
<li><a href="http://cuerosbhelatos.blogspot.com/search/label/Game%20Car%20Racing" target="_blank">car game</a></li>
<li><a href="http://cuerosbhelatos.blogspot.com/search/label/Game%20Motorace" target="_blank">motor game</a></li>
<li><a href="http://cuerosbhelatos.blogspot.com/search/label/Game%20House" target="_blank">house game</a></li>
<li><a href="http://cuerosbhelatos.blogspot.com/search/label/Game%20Sport" target="_blank">sport game</a></li>
<li><a href="http://cuerosbhelatos.blogspot.com/search/label/Game%20Rip" target="_blank">rip game</a></li>
<li><a href="http://cuerosbhelatos.blogspot.com/search/label/HoLLy%20Movie%27s" target="_blank">holly movie</a></li>
<li><a href="http://cuerosbhelatos.blogspot.com/search/label/MoVies%20X" target="_blank">adult movie</a></li>
<li><a href="http://cuerosbhelatos.blogspot.com/p/musik.html" target="_blank">musik</a></li>
<li><a href="http://cuerosbhelatos.blogspot.com/p/wallpaper.html" target="_blank">wallpaper</a></li>
<li><a href="http://cuerosbhelatos.blogspot.com/p/chat-hot.html" target="_blank">chat hot</a></li>
<li><a href="http://cuerosbhelatos.blogspot.com/search/label/Tips%20and%20Trik" target="_blank">tips N triks</a></li>
</ul>
</li>
<li><a href="http://cuerosbhelatos.blogspot.com/" target="_blank">Game Pc</a>
<ul class="children">
<li><a href="http://cuerosbhelatos.blogspot.com/p/game-rip.html" target="_blank">indeks game pc</a></li>
<li><a href="http://cuerosbhelatos.blogspot.com/search/label/Game%20Action" target="_blank">action game</a></li>
<li><a href="http://cuerosbhelatos.blogspot.com/search/label/Game%20Car%20Racing" target="_blank">car game</a></li>
<li><a href="http://cuerosbhelatos.blogspot.com/search/label/Game%20Motorace" target="_blank">motor game</a></li>
<li><a href="http://cuerosbhelatos.blogspot.com/search/label/Game%20Sport" target="_blank">sport game</a></li>
<li><a href="http://cuerosbhelatos.blogspot.com/search/label/Game%20Sexx" target="_blank">adult game</a></li>
<li><a href="http://cuerosbhelatos.blogspot.com/search/label/Game%20Rip" target="_blank">game rip</a></li>
</ul>
</li>
<li><a href="http://cuerosbhelatos.blogspot.com/search/label/Game%20House" target="_blank">Game House</a>
<ul class="children">
<li><a href="http://cuerosbhelatos.blogspot.com/search/label/Game%20House" target="_blank">indeks game house</a></li>
<li><a href="http://cuerosbhelatos.blogspot.com/2011/07/game-house-1.html" target="_blank">game house 1</a></li>
<li><a href="http://cuerosbhelatos.blogspot.com/2011/07/game-house-2.html" target="_blank">game house 2</a></li>
<li><a href="http://cuerosbhelatos.blogspot.com/2011/07/game-house-3.html" target="_blank">game house 3</a></li>
<li><a href="http://cuerosbhelatos.blogspot.com/2011/07/game-house-4.html" target="_blank">game house 4</a></li>
<li><a href="http://cuerosbhelatos.blogspot.com/2011/07/game-house-5.html" target="_blank">game house 5</a></li>
</ul>
</li>
<li><a href="http://cuerosbhelatos.blogspot.com/p/aplikasi-komputer.html" target="_blank">Software</a>
<ul class="children">
<li><a href="http://cuerosbhelatos.blogspot.com/p/aplikasi-komputer.html" target="_blank">indeks software</a></li>
<li><a href="http://cuerosbhelatos.blogspot.com/search/label/Aplikasi" target="_blank">software 1</a></li>
<li><a href="http://cuerosbhelatos.blogspot.com/search/label/Software%20PC" target="_blank">software 2</a></li>
</ul>
</li>
<li><a href="http://cuerosbhelatos.blogspot.com/p/tips-blogger.html">Tip n Trik</a>
<ul class="children" target="_blank">
<li><a href="http://cuerosbhelatos.blogspot.com/p/tips-blogger.html" target="_blank">indeks tips blogger</a></li>
<li><a href="http://cuerosbhelatos.blogspot.com/search/label/Tips%20and%20Trik" target="_blank">tips blogger</a></li>
<li><a href="http://cuerosbhelatos.blogspot.com/search/label/Template%20Blog" target="_blank">template blog</a></li>
<li><a href="http://cuerosbhelatos.blogspot.com/p/tips-komputer.html" target="_blank">tips komputer</a></li>
</ul>
</li>
<li><a href="http://cuerosbhelatos.blogspot.com/search/label/Software%20PC" target="_blank">Other</a>
<ul class="children">
<li><a href="http://cuerosbhelatos.blogspot.com/search/label/HD%20Android%20Game" target="_blank">android game</a></li>
<li><a href="http://cuerosbhelatos.blogspot.com/p/chat-hot.html" target="_blank">chat hot</a></li>
<li><a href="http://cuerosbhelatos.blogspot.com/p/musik.html" target="_blank">Musik</a></li>
<li><a href="http://cuerosbhelatos.blogspot.com/p/wallpaper.html" target="_blank">Wallpaper</a></li>
</ul>
</li>
<li><a href="http://cuerosbhelatos.blogspot.com/p/virtual-girl.html" target="_blank">Movie</a>
<ul class="children">
<li><a href="http://cuerosbhelatos.blogspot.com/p/virtual-girl.html" target="_blank">indeks movie</a></li>
<li><a href="http://cuerosbhelatos.blogspot.com/search/label/MoVies%20X" target="_blank">adult movie</a></li>
<li><a href="http://cuerosbhelatos.blogspot.com/search/label/HoLLy%20Movie%27s" target="_blank">holly movie</a></li>
</ul>
</li>
<li><a href="http://cuerosbhelatos.blogspot.com/2011/10/link-exchange.html" target="_blank">Blog Exchange</a><ul class="children">
<li><a href="http://cuerosbhelatos.blogspot.com/2011/10/link-exchange.html" target="_blank">Banner Exchange</a></li>
<li><a href="http://cuerosbhelatos.blogspot.com/2011/10/link-sahabat.html" target="_blank">Link Exchange</a></li>
</ul>
</li>
<li><a href="http://cuerosbhelatos.blogspot.com/p/buku-tamu-sahabat.html"title="tinggalkan pesan Sobat disini" target="_blank"><blink>Buku Tamu</blink></a></li>
<li><a href="http://www.facebook.com/binkbenk.djoel"title="connect with me" target="_blank">Facebook</a></li>
<li><a href="http://www.blogger.com/" title="login" target="_blank">Login</a></li></ul>
- Edit kode alamat URL menu blog sobat dan ganti nama menu-menunya.
- Untuk mendapatkan efek warna yang berbeda , pada kode CSS diatas silahkan ganti kode warnannya
- Lalu Simpan dan Taruh Gadget dibagian bawah Blog/footer
Posted On : 10 Agustus 2011 Time : 13.37