Blogumulus Journal: Apple Accordion Menu

Apple Accordion Menu

Sebenarnya, jika kita luangkan waktu pergi ke DynmicDrive.com, maka kita akan dapati 'hampir' segala accessories yang kita butuhkan untuk mendandani blog. Terutama bagi yang punya blog pesolek. Seperti apple menu ini. Semula, Lela kira script-nya asli bikinan Cahaya Biru. Ternyata berasal dari DynamicDrive.

Ne contoh-demonya, arahkan mouse kamu ke menu.. .

Padhang Bulan

Tidak seperti para blogger senior dengan segala keahliannya, Lela cuma "bloggirl" penggemar mereka.

Diary Lela

Sekarang ini, pemerintah sedang gencar menyosialisasikan pendidikan gratis, sampai-sampai Bambang Sudibjo selaku menteri pendidikan harus terjun langsung.

Blogumulus

Flickr Photostream, ternyata ga' begitu bersih tampilannya. Kayaknya, juga bikin berat loading blog. Tapi.., entahlah.

Blue Jeans

Some random content here

Coba Menu 05

Some random content here

Taruh Script Java ini di bawah: <head>

Keterangan:

Script itu memang agak banyak, jadi agak berat. Na.., setelah itu, cari kode:

]]></b:skin>

Kemudian, taruhlah kode CSS berikut ini di atas: ]]></b:skin>

/*ddaccordion Apple Menu Mouse Over
----------------------------------------------- */
.applemenu {
margin: 5px 0;
padding: 0;
width: 170px; /*width of menu*/
border: 1px solid #9A9A9A;
}

.applemenu div.silverheader a{
background: black url(http://koleksipicture.googlepages.com/silvergradient.gif) repeat-x center left;
font: normal 12px Tahoma, "Lucida Grande", "Trebuchet MS", Helvetica, sans-serif;
color: white;
display: block;
position: relative; /*To help in the anchoring of the ".statusicon" icon image*/
width: auto;
padding: 5px 0;
padding-left: 8px;
text-decoration: none;
}

.applemenu div.silverheader a:visited, .applemenu div.silverheader a:active{
color: white;
}

.applemenu div.selected a, .applemenu div.silverheader a:hover{
background-image: url(http://koleksipicture.googlepages.com/silvergradientover.gif);
color: white;
}

.applemenu div.submenu{ /*DIV that contains each sub menu*/
background: white;
padding: 5px;
height: 300px; /*Height that applies to all sub menu DIVs. A good idea when headers are toggled via "mouseover" instead of "click"*/
}

Keterangan:

1. Tulisan Warna Merah (kedap-kedip) = ukuran lebar .
2. Tulisan warna biru (kedap-kedip)= ukuran tinggi.
Kita bisa menyesuaikan ukurannya semau kita. Tapi, jangan lupa, di belakangnya harus ada simbol "px". Misalnya: 100px, 200px, atau 330px, 173px dst.

Masukkan kode HTML berikut ini kedalam gadget Edit HTML/javascript itu:

<div class="applemenu">

<div class="silverheader">
<a href="http://padhangbulan.blogspot.com">Coba Menu 01</a>
</div>
<div class="submenu">
Some random content here<br />
</div>

<div class="silverheader">
<a href="http://elbudur.blogspot.com/">
Coba Menu 02</a>
</div>
<div class="submenu">
Isi atau entry post / HMTL / JAVASRIPT di sini
(Some random content here)<br />
</div>

<div class="silverheader">
<a href="http://blogumulus.blogspot.com">
Coba Menu 03</a>
</div>
<div class="submenu">
Isi atau entry post / HMTL / JAVASRIPT di sini
(Some random content here)<br />
</div>

<div class="silverheader">
<a href="http://lailatul-budur.blogspot.com">
Coba Menu 04</a></div>
<div class="submenu">
Isi atau entry post / HMTL / JAVASRIPT di sini
(Some random content here)<br />
<img src="http://i27.tinypic.com/sy7295.gif" />
</div>

<div class="silverheader">
<a href="http://padhangbulan.blogspot.com"> Coba Menu 05 </a>
</div>
<div class="submenu">
Isi atau entry post / HMTL / JAVASRIPT di sini
(Some random content here)<br />
</div>

</div>

Keterangan

A. Please, lihat kode HTML yang berwarna biru dan tulisan kedap kedip tuh.

Tulisan warna ungu (kedap-kedip) = Link. Kamu boleh biarkan saja, atau ubah dengan link sesukamu

Tulisan warna coklat (kedap-kedip) = Judul yang tampil di halaman blog kita. Gantilah dengan nama judulmu sendiri, sesukamu

Tulisan warna hitam (kedap-kedip)= isi dari menu. Isilah dengan tulisan atau kode HTML/Javascript yang kamu inginkan. Itu bisa widget, kode adsense, dan sebagainya

B. Kode HTML yang berwarna merah adalah kode pembuka dan penutup menu. Awas, jangan sampai ilang ya..
Pembuka -->> <div class="applemenu">
Di sini adalah area menaruh menu tambahan
Penutup -->> </div>

C. Jika ingin menambah menu, copy dan paste seluruh kode yang berwarna biru itu. Taro' di area dalam kode HTML yang merah. Trus, ganti semua tulisan yang kedap-kedip tuh.

Save/simpan, selesai. Coba lihat hasilnya..
Cahaya Biru benar-benar kasih Lela pelajaran yang hebat. Cahaya Biru juga Lela import entry blog-nya secara utuh. Terima kasih, Cahaya Biru..

Print this post
Sincerely,
Padhang Bulan