Tulisan ini adalah lanjutan dari membuat Apple Menu gaya Accordion sebelumnya. Jika belum baca tulisan yang pertama, klik disini. 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. Sedangkan, kami berusaha membuat sejelas-jelasnya dan bukan bertele-tele dan Berteler-teler....heheheh wekekek....hahahahah.....

Hasilnya, nanti, akan muncul Apple Menu dengan ukuran "lebar" dan "tinggi" yang berbeda di dalam Blog.

Plis, lihat sidebar kami di samping, di bawah. Ada apple menu dengan ukuran yang berbeda...

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 lah kode CSS diatas itu di notepad atau editing software yang lainnya
3. rubah 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 berjaga-jaga saja. :)....wekekekek...
Awas, jangan sampai simbol "px" hilang lho yaa...:). 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-mu



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

1. lihat 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.analisis-fiqih.blogspot.com"> Coba Menu 05 </a>
</div>
<div class="submenu">
Disini 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 yaa........ :).



Bagaimana...??? udah benar semua...... atau masih morat-marit ......:) wekekekek.....


8 comments:

  1. Syamsul Alam  

    25 Desember 2008 19.09

    Hehehehe....... pertamax!!! Wow! Ternyata ada blog tutorial juga di sini. Keren Euy! Tapi, aku kok ga mudeng yah?

  2. Cahaya Biru  

    25 Desember 2008 20.54

    @Syamsul A.; heheheh.... bahasa-nya sulit yaa... Maaf lho. Btw, Saya terima masukannya. Kucoba review bahasa sajiannya agar lebih gampang nantinya. :)

  3. Cebong Ipiet  

    26 Desember 2008 00.41

    oooo brati editing nya di kotak html sidebar yak wekekkekekeke... kiraaaaain langsung tumplek jadi satu, pantesan...g jadi huehuehue
    tanya lagi ah biar jadi bahan posting lgi wkekekekke
    kalo diisi ama html, tulisan kan tinggal di ketik, copast aja
    trus kalo munculin archive, label gmn?
    makaciii
    ^_^v

  4. Cahaya Biru  

    26 Desember 2008 00.58

    @Cipiet; wah...wah... permintaan mbak bong ini adalah EDIT cara khusus. Contoh demonya udah kuhapus, karena menampilkan widget archive itu berat.

    Btw, tapi, aku nanti jawab ms. Cipiet. Sabar yaa... Aku nang dukun pijat sek... nang Baghdad..heheheh........bercanda kok...

    Pingin pijat, soale gegerku pegel kabeh iki... :) wekekekek......

  5. Cebong Ipiet  

    26 Desember 2008 01.03

    wkekekekkeke gegerku kang sing pegel ra karuan mlungker ndek sepur, yoi ditunggu pokoknya
    semuga ndak ngrepoti

  6. project  

    27 Desember 2008 17.13

    emang beda ya klo mo letakin di sidebar soalnya saya juga pasang di sidebar kayaknya gak banyak yang di ubah.

  7. Cahaya Biru  

    27 Desember 2008 17.21

    iyaa, ga banyak yang beda kok.

    :)

  8. Sumafone  

    18 November 2009 10.36

    Bingung boz

Posting Komentar

Template Copyright 2009 and Designed By Cahaya Biru