Accordion Menu Kedua

Tulisan ini adalah lanjutan dari membuat Apple Menu gaya Accordion sebelumnya. Jika belum baca tulisan yang pertama, klik di sini. Tulisan ini hadir karena permintaan mbak Cebong Ipiet. Di komentar yang lalu, Mbak Cipiet meminta cara bagaimana menaruh kode HTML Apple Menu di sidebar.

Tapi, kelihatannya, jika pembahasan langsung menuju modifikasi HTML-nya, tanpa menunjukkan perubahan CSS-nya, itu nanti akan terasa kurang gamblang bagi pembaca lain. Padahal, kita berusaha membuat sejelas-jelasnya. Hasilnya, nanti, akan muncul Apple Menu dengan ukuran "lebar" dan "tinggi" yang berbeda di dalam Blog.


Selanjutnya, ini adalah langkah-langkah memodifikasi CSS beserta kode HTML dan memasang di Blogger.

BABAK KETIGA: Mengedit CSS MENU

1. Lihat Kode CSS berikut ini:

/*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"*/
}

2. Copy kode CSS di atas di notepad atau editing software yang lainnya
3. Ubah simbol .applemenu dengan --> .applemenu02
(gampangnya, cari semua kata applemenu itu. Kemudian, ganti dengan applemenu02)
4. Ganti ukuran lebar dan tingginya, sesukamu. Lebih sempit/lebar atau lebih tinggi/pendek.

(Misalnya: jika ukuran lebar sidebar = 350px, maka saran kami lebar menu ke-1 lebih sedikit = 340px)
(Misalnya: jika sub ukuran sub sidebar = 160px, maka saran kami lebar menu ke-2 lebih sedikit = 150px). Ini dilakukan untuk antisipasi saja. Yang penting, keduanya ada beda ukuran lebar.

5. Setelah modifikasi dilakukan, itu harus di-copy semuanya
6. Kemudian, taruhlah kode CSS baru, yang udah dimodifikasi itu, di atasnya ]]></b:skin>
Jadi, ada dua CSS accordion. "Applemenu" dan "Applemenu02"
7. Save Template

BABAK KEEMPAT: Memodifikasi HTML untuk Apple Menu Ke-2:

1. Perhatiin kode HTML berikut ini:

<div class="applemenu02"> <!--- Pembuka applemenu02--->

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

<div class="silverheader">
<a href="http://www.blogumulus.blogspot.com"> Coba Menu 05 </a>
</div>
<div class="submenu">
Di sini ISI TULISAN MU / KODE HMTL / JAVASRIPT
(Some random content here)<br />
</div>

</div> <!-- Penutup applemenu02 -->

Keterangan:

0. Yang kedap-kedip, udah dijelaskan di seri pertama
1. Selanjutnya, apa bedanya kode HTML ini dengan kode yang pertama lalu? Inilah bedanya

<div class="applemenu">

<div class="applemenu02">

Tulisan Warna Merah adalah kode HTML pembuka dari Menu ke-1. Sedangkan, Tulisan Warna Coklat adalah kode HTML pembuka dari Menu ke-2.
Kode HTML dari menu yang kedua menggunakan class="applemenu02" sesuai dengan modifikasi CSS-nya. Ya, itulah bedanya, tambahan simbol "02". :)

BABAK KELIMA: Memasang kode HTML di BLOGGER (CARA UMUM)
1. sign in ke BLogger yaa... :)
2. pilih ke TATA LETAK / LAYOUT
3. Pilih Add Gadget
4. Pilih Edit HTML
5. Taruh kode HTML Menu pertama yang sesuai ukuran sidebar di kotak. Terus, Save...
6. Pilih add gadget lagi
6. Begitu pula, taruh Kode HTML Menu kedua, yang telah diedit, di kotak. Terus, save.
7. Save lalu lihat hasilnya
Keterangan:

Jika morat-marit, itu karena ukurannya tidak sesuai. Pindah dengan cara "drag and drop" sesuai sidebar di Page Element

Print this post
Sincerely,
Padhang Bulan