Save Our Planet!!: Membuat Drop Down Menu

Kalo ditanya apa..waduh..saya juga bingung jawabnya.
Drop = jatuh, Down = bawah, Menu = menu..
jadi, Drop Down Menu itu . . .he2x..
yah..pokoknya yang seperti ini lah:wkwkwk

di sini saya menggunakan drop down menu nya untuk arsip blog ini, namun anda juga dapat menggunakannya untuk hal lain, untuk blog sahabat misalnya, atau mungkin untuk daftar isi blog anda, dsb.
Dari pada kelamaan BT dengan susunan kata2 saya yang sama sekali tidak bagus, lebih baik kita langsung ke Langkah-langkahnya saja y..
Oia, di dalam pembuatannya terdapat tiga javascript yang dapat anda copy lalu upload ke hosting. tetapi, jika anda tidak mau juga tidak apa2..toh tidak dosa..he2x
nih langkah-langkahnya:

1. log in ke blog anda
2. klik tab layout (tata letak), lalu pilih edit html. (centang pada expand template widget)
3. Copy kode di bawah ini dan letakkan tepat di bawah kode <head>. gunakan ctrl+f untuk mempermudah pencarian.

itulah file-file java script yang saya maksud, anda dapat mengcopy nya ke hosting anda sendiri.
4. Selanjutnya, copy lah kode berikut ini lalu letakan diantara tag head. biar ngga' ribet lebih baik diletakkan setelah yang seperti ini:

-----------------------------------------------
Blogger Template Style
Name: Minima Blue
Designer: Douglas Bowman
URL: www.stopdesign.com
Date: 26 Feb 2004
Updated by: Blogger Team
----------------------------------------------- */

Nih kodenya:

.alert { background: #DDE4FF;
text-align: left;
padding: 10px 10px 10px 10px;
border-top: 1px dotted #223344;border-bottom: 1px dotted #223344;border-left: 1px dotted #223344;border-right: 1px dotted #223344;}
.arrowlistmenu{
width: 180px; /*ukuran lebar dari menu*/
}
.arrowlistmenu .menuheader{ /*CSS class for menu headers in general (expanding or not!)*/
font: bold 14px Arial;
color: white;
background: black url(http://i287.photobucket.com/albums/ll147/rum_marewa/titlebar.png) repeat-x center left;
margin-bottom: 10px; /*bottom spacing between header and rest of content*/
text-transform: uppercase;
padding: 4px 0 4px 10px; /*header text is indented 10px*/
cursor: hand;
cursor: pointer;
}
.arrowlistmenu .openheader{ /*CSS class to apply to expandable header when it's expanded*/
background-image: url(http://i287.photobucket.com/albums/ll147/rum_marewa/titlebar-active.png);
}
.arrowlistmenu ul{ /*CSS for UL of each sub menu*/
list-style-type: none;
margin: 0;
padding: 0;
margin-bottom: 8px; /*bottom spacing between each UL and rest of content*/
}
.arrowlistmenu ul li{
padding-bottom: 2px; /*bottom spacing between menu items*/
}
.arrowlistmenu ul li a{
color: #A70303;
background: url(http://i287.photobucket.com/albums/ll147/rum_marewa/arrowbullet.png) no-repeat center left; /*custom bullet list image*/
display: block;
padding: 2px 0;
padding-left: 19px; /*link text is indented 19px*/
text-decoration: none;
font-weight: bold;
border-bottom: 1px solid #dadada;
font-size: 90%;
}
.arrowlistmenu ul li a:visited{
color: #A70303;
}
.arrowlistmenu ul li a:hover{ /*hover state CSS*/
color: #A70303;
background-color: #F3F3F3;
}

Jika sudah, simpanlah template anda. Sabar ya boss, ternyata belum selesai..he2x
5. masuk ke dalam elemen halaman(page element), masih di tab tata letak. klik tambah gadget di tempat yang anda inginkan. klik HTML/JavaScript, lalu masukkan kode berikut:

<div class="arrowlistmenu">
<h3 class="menuheader expandable">Judul Menu</h3>
<ul class="categoryitems">
<li><a href="http://www.....">Isi Menu 1</a></li>
<li><a href="http://www.....">Isi Menu 2</a></li>

<h3 class="menuheader expandable">Judul Menu2</h3>
<ul class="categoryitems">
<li><a href="http://www.....">Isi Menu 1</a></li>
<li><a href="http://www.....">Isi Menu 2</a></li>
</ul>

Untuk menambah menu nya anda hanya perlu menambahkan kode yang <h3 class="menuheader expandable">Judul Menu</h3>
<ul class="categoryitems">, dan untuk yang isi menunya, masukkan yang <li><a href="http://www.....">Isi Menu</a></li>.
selesai deh..
kalo ada yang kurang jelas comment aja y..thx

Save Our Planet!!

Sabtu, 15 Agustus 2009

Membuat Drop Down Menu

Tidak ada komentar:

Posting Komentar