Menu drop down ini sangat praktis dan membuat blog semakin rapi.
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 ;
- Login ke akun Blog anda
- Klik rancangan Elemen Laman
- Klik Add Gadget HTML/Javascript
- Perhatikan kode dibawah ini , copy paste kedalam GADGET tadi
<style type="text/css">
/* =====================================
Salam hangat & happy Blogging buat Sahabat semua
Don't Remove this Code
=======================================*/
#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; border:2px outset #FF0000;padding:2px 0;z-index:999;top:10px;left:100px;right:100px;position:fixed;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;}
</style>
<div id="cueros">
<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></div>
/* =====================================
Salam hangat & happy Blogging buat Sahabat semua
Don't Remove this Code
=======================================*/
#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; border:2px outset #FF0000;padding:2px 0;z-index:999;top:10px;left:100px;right:100px;position:fixed;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;}
</style>
<div id="cueros">
<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></div>
- Edit kode yang berwarna Biru dengan alamat URL menu blog sobat dan ganti nama menu-menunya.
- Untuk mendapatkan efek warna yang berbeda , pada kode CSS diatas silahkan ganti kode warnannya Disini
- Lalu Simpan dan Taruh Gadget dibagian bawah Blog/footer
- Selamat Mencoba.....
Narasumber ; www.mbahgoogle.com
0 comments:
Post a Comment