Untuk Cara membuat Menu Drop Down Melayang di Blog, Silahkan sobat ikuti langkah-langkahnya sebagai berikut :
1. Silahkan >> "Login/Masuk"ke akun blog sobat.
2. Kemudian pilih >> " Tata Letak" >> Add Gadget " >> Pilih "HTML/JavaScript"
3. Silahkan Sobat Copy Paste Kode Script dibawah ini kedalam HTML/Javascript :
Klik Show untuk melihat
<style type="text/css">
#kucopas 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;}#kucopas li
.current{color: transparant;}#kucopas li a:hover, #kucopas li a:active
{background: #4B0082;background: -webkit-gradient(linear, left top, left
bottom, from(#4B0082), to(#FF0000)); background:
-moz-linear-gradient(top,#4B0082, #FF0000); filter:
progid:DXImageTransform.Microsoft.gradient(startColorstr='#4B0082',
endColorstr='#FF0000'); -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4B0082',
endColorstr='#FF0000'); display: inline-block;zoom: 1; *display: inline;border:
dotted 1px #555555;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(10deg);-moz-transform:rotate(10deg);-o-transform:rotate(10deg);}color:
#ffffff;margin: 0;font-size:18px;padding: 9px 15px 8px;text-decoration:
none;}#kucopas {width: auto;float: left;margin: 0;padding: 0;}#kucopas {margin:
0;padding: 0;}#kucopas ul {float: left;list-style: none;margin: 0;padding:
0;}#kucopas li {list-style: none;margin: 0;padding: 0;}#kucopas li a, #kucopas
li a:link, #kucopas li a:visited {color: #ffffff;display: block;text-transform:
capitalize;margin: 0;padding: 9px 15px 8px;font: Bold 15px Georgia,
Arial;}#kucopas li a:hover, #kucopas li a:active {background:transparant;color:
#ffffff;margin: 0;font-size:20px;padding: 9px 15px 8px;text-decoration:
none;}#kucopas li li a, #kucopas li li a:link, #kucopas li li a:visited
{background: #00FFFF;background: -webkit-gradient(linear, left top, left
bottom, from(#00FFFF), to(#000000)); background:
-moz-linear-gradient(top,#00FFFF, #000000); filter:
progid:DXImageTransform.Microsoft.gradient(startColorstr='#00FFFF',
endColorstr='#000000'); -ms-filter:
progid:DXImageTransform.Microsoft.gradient(startColorstr='#00FFFF',
endColorstr='#000000'); width: 250px;color: #E6E6FA;-webkit-border-radius:
30px; -moz-border-radius: 30px; border-radius: 30px; border-style:
outset;-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(10deg);-moz-transform:rotate(10deg);-o-transform:rotate(10deg);float:
none;margin: 0;padding: 7px 10px;border-bottom: transparant;border-left:
transparant;border-right: transparant;font: bold 14px kristen itc,
Arial;}#kucopas li li a:hover, #kucopas li li a:active {background:
#FF0000;background: -webkit-gradient(linear, left top, left bottom,
from(#FF0000), to(#00FF00)); background: -moz-linear-gradient(top,#FF0000,
#00FF00); filter:
progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF0000',
endColorstr='#00FF00'); -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF0000',
endColorstr='#00FF00'); color: #ffffff;font-size:20px;font-family:kristen
itc;text-align: center;padding: 7px 10px;}#kucopas li {float: left;padding:
0;}#kucopas li ul {z-index: 9999;position: absolute;left: -999em;height: 20px;width:
170px;margin: 0;padding: 0;}#kucopas li ul a {width: 140px;}#kucopas li ul ul
{margin: -32px 0 0 171px;}#kucopas li:hover ul ul, #kucopas li:hover ul ul ul,
#kucopas li.sfhover ul ul, #kucopas li.sfhover ul ul ul {left:
-999em;}#kucopas li:hover ul, #kucopas li li:hover ul,
#kucopas li li li:hover ul, #kucopas li.sfhover ul, #kucopas
li li.sfhover ul, #kucopas li li li.sfhover ul {left:
auto;}#kucopas li:hover, #kucopas li.sfhover {position:
static;}#footer-column-divide {clear:both;}#kucopas{font-family:Comic Sans
Ms;background:#000
url(http://4.bp.blogspot.com/_4HKUHirY_2U/Swul0XJNShI/AAAAAAAAAT8/0MPzqd2ineY/catmenu.jpg)repeat-x;(0,0,0,
0.80);border:1px solid #C0C0C0;padding:2px
0;z-index:999;top:0px;left:1px;right:1px;position:fixed;-moz-border-radius:10px;-webkit-border-radius:10px;}
</style>
<div id='kucopas'>
<ul id='kucopas'>
<li><a href='http://newbienb.blogspot.com/'>Home</a></li>
<li><a href='Ganti link
Tujuan' target='_blank'>Menu1</a></li>
<li><a href='Ganti link
Tujuan' target='_blank'>Menu2</a>
<ul class='children'>
<li><a href='Ganti link
Tujuan' target='_blank'>Menu#2.1</a></li>
<li><a href='Ganti link
Tujuan' target='_blank'>Menu#2.2</a></li>
<li><a href='Ganti link
Tujuan' target='_blank'>Menu#2.3</a></li>
</ul>
</li>
<li><a href='Ganti link
Tujuan' target='_blank'>Menu3</a>
<ul class='children'>
<li><a href='Ganti link
Tujuan' target='_blank'>Menu#3.1</a></li>
<li><a href='Ganti link
Tujuan' target='_blank'>Menu#3.2</a></li>
<li><a href='Ganti link
Tujuan' target='_blank'>Menu#3.3</a></li>
</ul>
</li>
<li><a href='Ganti link
Tujuan' target='_blank'>Menu4</a>
<ul class='children'>
<li><a href='Ganti link
Tujuan' target='_blank'>Menu#4.1</a></li>
<li><a href='Ganti link
Tujuan' target='_blank'>Menu#4.2</a></li>
<li><a href='Ganti link
Tujuan' target='_blank'>Menu#4.3</a></li>
</ul>
</div>
- Silahkan sobat ganti yang berwarna BIRU dengan URL tujuannya
- Warna MERAH adalah Menu yang akan di tampilkan, silahkan sobat ganti.
4. Silahkan sobat SIMPAN dan Lihat hasilnya.
Mudah bukan,.??
0 komentar:
Posting Komentar