Cara Membuat Menu Drop Down

Mau buat menu kyak gini....hehhehe

langsung aja neh frend....!!

1. login ke Blog
2. masuk ke Tata Letak & truk Edit HTML....eiit jngan lupa Centang dulu "Expant Template Witget
3.cari Kode </head>
kalau udah jumpa pastekan kode di bawah ini tepat di atas kode </head>

<script src='http://nestoriko.googlepages.com/chrome.js' type='text/javascript'>
</script>

4. kalau udah sekarang cari kode yang ini ]]></b:skin>
kalau udah ketemu pastekan kode berikut tepat di atas kode ]]></b:skin>]
ni kodenya...!!

.chromestyle{
width: 100%;
font-weight: bold;
}

.chromestyle:after{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.chromestyle ul{
border: 1px solid #BBB;
width: 100%;
background: url(http://nestoriko.googlepages.com/chromebg2.gif) left left repeat-x;
padding: 4px 0;
margin: 0;
text-align: left;
}

.chromestyle ul li{
display: inline;
}

.chromestyle ul li a{
color: #494949;
padding: 4px 7px;
margin: 0;
text-decoration: none;
border-right: 1px solid #B5E2FE;
}

.chromestyle ul li a:hover, .chromestyle ul li a.selected{
background: url(http://nestoriko.googlepages.com/chromebg2-over.gif) center center repeat-x;
}

.dropmenudiv{
position:absolute;
top: 0;
border: 1px solid #B5E2FE;
border-bottom-width: 0;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
background-color: white;
width: 200px;
visibility: hidden;
filter: progid:DXImageTransform.Microsoft.Shadow(color=#CACACA
,direction=135,strength=4);
}

.dropmenudiv a{
width: 100%;
display: block;
text-indent: 3px;
border-bottom: 1px solid #B5E2FE;
padding: 2px 0;
text-decoration: none;
font-weight: bold;
color: black;
}

.dropmenudiv a:hover{
background-color: #EBF7FF;
}

5. hmmmm.....!!
nih frend ada kode yang harus di kopi paste lagi
ni sih agak rumit mencarinya apa lagi templat yang dari awal gak ada menunya
kalau gak pake menu dari awal atau yang memakai template dasar yang disediakan blogger
coba cari kode ini

</b:section>
</div>

Kalau memakai template dari situs maka cari aja menunya misalnya
HOME atau POS RSSS dll tinggal serch aja tekan CTRL + F (find) biasanya di atas HOME ada code </div> nah tinggal di ganti dengan code yang di bawah ini

<div class='chromestyle' id='chromemenu'>
<ul>
<li><a href='http://iseng2010.blogspot.com'>Halaman Depan</a></li>
<li><a href='#' rel='dropmenu1'>1</a></li>
<li><a href='#' rel='dropmenu2'>2</a></li>
</ul>
</div>


<div class='dropmenudiv' id='dropmenu1'>
<a href='URL Sub menu1'>Dalam negeri</a>
<a href='URL sub menu1'>1</a>
</div>


<div class='dropmenudiv' id='dropmenu2'>
<a href='URL sub menu1'>1</a>
<a href='URL sub menu2'>2</a>
</div>

<script type='text/javascript'>
cssdropdown.startchrome("chromemenu")
</script>

neh tips buat nambah menunya
tulisan yang berwarna merah dapat kamu tambah
contoh :
<li><a href='#' rel='dropmenu2'>3</a></li>
<li><a href='#' rel='dropmenu2'>4</a></li>
<li><a href='#' rel='dropmenu2'>5</a></li>

dan seterusnya...!!
kemudian kode yang biru kamu kopi sehingga menjadi seperti
ini....!!
tulisan warna merah juga diganti sesuai no urutnya


<div class='dropmenudiv' id='dropmenu3'>
<a href='URL sub menu1'>1</a>
<a href='URL sub menu2'>2</a>
</div>

dan yang terakhir tulisan yang berwarna hijau neh...!!
kamu perbanyak aja kemudian tinggal ganti deh namanya
contoh :


<div class='dropmenudiv' id='dropmenu2'>
<a href='URL sub menu1'>1</a>
<a href='URL sub menu2'>2</a>
<a href='URL sub menu2'>3</a>
<a href='URL sub menu2'>4</a>
<a href='URL sub menu2'>5</a>
</div>

oke yang ke....!
6. tinggal save aja...dan liat hasilnya....