Tulisan ini menjelaskan cara membuat Apple Menu dengan gaya Accordion di Blogger. Kami mendapatkan ScriptJava-nya dan CSS-nya dari DynamicDrive. Maklum yaa, Karena saya belum pandai buat ScriptJava. Kemudian, saya berusaha menyesuaikan pemakaiannya di Blogger.

Apple Menu itu seperti gambar dibawah ini.



Seterusnya, kata Apple Menu, aku singkat jadi Menu aja yaa...:). Kalo ngomong Menu, aku jadi pingin makan nih. Heh..Heh.. aku mau martabak telor, soto, rawon, rujak cingur, BiG MaC, wes...wes...wes... jadi nglantur. Ayo kembali lagi.., sampai mana tadi yaa...wekekek

Tambahan, Menu ini juga "Mouse Over". Maksudnya, Kalo mouse anda diarahkan di atas judul background abu-abu, maka Menu itu akan membuka isinya. Terus, jika satu menu terbuka, maka menu sebelumnya akan nutup sendiri secara otomatis.
Karena itu, Menu ini berfungsi melipat dan memberi fokus pada isi yang ditampilkan.

Contoh/Demonya di bawah ini:
Coba Arahkan mouse kamu ke atasnya...



Selanjutnya, berikut ini adalah langkah-langkah membuat AppleMenu dengan gaya Accordion Style di Blogger.

Babak Pertama. Tentang menaruh kode Java dan CSS

1. Sign in ke Blogger
2. Pilih Tab layout / Tata letak
3. Pilih Edit HTML

4. Centang kotak kecil yang disebelahnya ada tulisan Expand Widget Template

5. kemudian, cari kode ini:


<head>



tempatnya, kira-kira di atas...
Kalo bingung, pencet aja Ctrl+F, copy dan masukkan kode itu, terus tekan ENTER

6. Taruh Script Java ini, dibawahya <head>:



<script src='http://mendandaniblog.googlepages.com/jquery-1.2.6.pack.js' type='text/javascript'/>
<script src='http://mendandaniblog.googlepages.com/ddaccordion.js' type='text/javascript'/>
<script src='http://mendandaniblog.googlepages.com/initapplemenu.js' type='text/javascript'/>




Keterangan:


Tenang saja. Meski script itu kelihatan banyak, tapi ringan kok.



7. Setelah itu, cari kode berikut ini:


]]></b:skin>



8. Kemudian, taruhlah kode CSS berikut ini di atasnya ]]></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.

Kamu bisa menyesuaikan ukurannya, sesukamu.
Tapi, jangan lupa, dibelakangnya harus ada simbol "px" yaa... :).
Misalnya: 100px, 200px, atau 330px, 173px dan sebagainya.



Udah...!!! udah selesai di taruh semuanya..??!! Ya udah kalo begitu, BABAK PERTAMA telah usai. Mari kita berlanjut ke BABAK KEDUA. Monggo....

BABAK KEDUA. Tentang Cara Masang di Blogger (cara umum).

1. Masuk ke Tab Add Page Element
2. Pilih Add Gadget
3. Pilik Edit HTML/JavaScript

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


<div class="applemenu">

<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 02</a>
</div>
<div class="submenu">
ISI TULISAN MU / KODE HMTL / JAVASRIPT Disini
(Some random content here)<br />
</div>

<div class="silverheader">
<a href="http://www.analisis-fiqih.blogspot.com">
Coba Menu 03</a>
</div>
<div class="submenu">
ISI TULISAN MU / KODE HMTL / JAVASRIPT Disini
(Some random content here)<br />
</div>

<div class="silverheader">
<a href="http://analisis-fiqih.blogspot.com">
Coba Menu 04</a></div>
<div class="submenu">
ISI TULISAN MU / KODE HMTL / JAVASRIPT Disini
(Some random content here)<br />
<img src="http://i27.tinypic.com/sy7295.gif" />
</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>



Keterangan


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

Tulisan warna Ungu (kedap-kedip) = Link. Kamu boleh biarkan saja, atau rubah 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 yaa...:)
Pembuka -->> <div class="applemenu">

Disini adalah Area di mana Menaruh Menu Tambahan

Penutup -->> </div>

C. Jika ingin menambah Menu, copy dan paste seluruh kode yang berwarna biru itu. Taruh, di area dalam kode HTML yang merah. Terus, gantilah semua tulisan yang kedap-kedip itu.



5. Lalu Save/Simpan

Sekarang coba lihat hasilnya. Udah bisa...!!! Atau tambah Ancur........!!! heh heh


21 comments:

  1. project  

    23 Desember 2008 11.22

    thx ni tutorialnya, dicoba dulu ntar klo tambah ancur awas ya ay...hehe...

  2. Cahaya Biru  

    23 Desember 2008 15.03

    @Mabak Ject; Iya mbak ject, monggo dicoba... saya berani Tanggung Jawab kok. hehhe

  3. yitnoku  

    23 Desember 2008 20.53

    Ane coba dulu .... lau sip boleh :D u/ dipakai...

  4. Project  

    24 Desember 2008 08.24

    aya......tanggung jawab.......... kok mouse over nya gak berfungsi, gimana tuh

  5. Cebong Ipiet  

    24 Desember 2008 11.05

    kalo buat di sidebar?

  6. Cebong Ipiet  

    24 Desember 2008 11.06

    apa tinggal mindahin nama widget ajah?

  7. Cahaya Biru  

    24 Desember 2008 12.36

    @Mbak Ject; Iya saya sudah tanggung jawab. Saya udah kirim jawaban di kotak komentar Mbak Ject.
    Kalo masih ga bisa.., khusus mbak Ject, kirim xml template-nya ke saya aja. :)

    @Mbak C.Ipiet; kalo ingin buat di sidebar, CSSnya sesuaikan dengan ukuran sidebar.

    kalo ingin buat 2 atau 3 menu itu dengan ukuran yang berbeda..., tambah aja css-nya lagi. plis, Sesuaikan, jangan sampai id dan class-nya sama dengan ukuran menu ke-1. Kemudian, di HTML nya, sesuaikan id dan class-nya juga. Yah....

  8. project  

    24 Desember 2008 14.33

    dah beres deh ay, bukan setelah aya tanggung jawab, soalnya waktu saya copy kode yang di kotak komen hasilnya sama tetap gak bisa. Tapi setelah saya sambangi DynamicDrive, baru saya ngerti maksud aya bilang kesalahannya karena script tsb blom di-convert, yup betul, harusnya yang tertulis adalah tanda kutip, bukan &quot, ya kan...
    tapi thx bgt deh ay, saya jadi byk belajar dari kesalahan.
    oh ya klu mo gampang copy paste script ke postingan artikel pake Windows Live aja, kita gak perlu pusing convert2 lagi.

  9. Cebong Ipiet  

    24 Desember 2008 16.03

    wehhehe duduls sekali sayah
    kasih contoh dung yg di sidebar buat postingan selanjutnya ^_^
    di css si ngerti di html nya ituh yg duduls sayah
    error tadi soalnya hikz T_T

  10. Cahaya Biru  

    24 Desember 2008 17.01

    @Mbak Ject; Iya terima kasih. Saya juga yang salah. saya udah rubah Script Java itu. Btw, terima kasih, untuk postingan selanjutnya, saya akan berusaha lebih teliti lagi, 0% kesalahan... :) wekekekek

    @Mbak Bong; udah baca kritikan dari Mbak Ject tadi. Mohon diulangi copy script java nya di atas.

    Untuk Sidebar,
    kode HTML pembuka ini yang harus dirubah --- >> <div class="applemenu">.
    Plis, rubahlah sesuai CSS-nya itu.
    Jika CSS-nya .applemenu02, maka
    hasilnya --->> <div class="applemenu02">.

    Plis, lihat, perbedaannya di simbol 02. Yang pertama, gak ada. Yang kedua, ada 02.

    Sedangkan, kode HTML, Class "silverheader" dan "submenu" yang ada dibawahnya, jangan dirubah yaa
    . Itu tetap. Karena ada kaitannya dengan Script Java nya diatas. ...:)

    Btw, Jika tetap aja bingung, saya akan nulis di posting selanjutnya, aja .:)...
    Judulnya babak ketga...wekekekek....

  11. Benlahmen  

    25 Desember 2008 08.38

    Kok saya ndak bisa ya

  12. Cahaya Biru  

    25 Desember 2008 10.20

    @benlahmen; heheheheh.... itu k800!-nya sedang ngambek....:)

  13. Syamsul Alam  

    25 Desember 2008 19.24

    hihihihi,,,,, saya ketinggalan informasi nih...... ini tutorial bagus! Aku pernah pasang yang seperti ini, tapi blogku jadi berat bgt..... Akhirnya, ku pecat deh...... hueheuheuheue.........

  14. QIMPOL08  

    25 Desember 2008 19.55

    gIMANA JAWABAN MOUSE OVERNYA NDAK BERFUNGSI NIHC

  15. Cahaya Biru  

    25 Desember 2008 23.43

    @QIMPOLO8;
    mahon maaf, yaa, jika sudah tidak nyaman.

    Mohon ulangi copy-paste script-nya; di Babak 1, langkah ke-enam.

    Kami udah sederhanakan lagi. Semoga ini bisa.

    :)...

  16. qimpol08  

    26 Desember 2008 00.11

    Thanks yaoo. uda tak cobain ni

  17. ireng_ajah  

    21 Februari 2009 10.27

    Thanks mas tutorialnya..nti aku coba. Aku sendiri pernah coba buat menu gaya accordion dari dinamicdrive.com tapi yang "Bullet List Accordion Menu". Berhasil sih berhasil tapi kadang mati sendiri alias gak bisa muncul and hilang otomatis ketika link menu di klik. Karena sering mati sendiri,aku hilangin jadinya..padahal pas buat lama..apa lagi gak paham kode css ato apalah itu.

    Apa hal tersebut terjadi karena pengaruh dari koneksi internet?? (cepet ato lambat)

    Mungkin aku akan coba tutorial mas yang ini biar menu link bisa lebih pendek..

  18. hendra  

    12 Maret 2009 20.13

    wah!!!
    patut di coba nee!!!
    thanks-tahnks!!

  19. Nur Layla  

    11 Mei 2009 20.32

    Bagaimnaa supaya script yg dimasukkan di textarea agar utuh, tidak menumpuk dan memunculkan kode baru seperti: <br/> mohon penjelsan. Terima kasih..

  20. :-: Nanang  

    23 Mei 2009 12.31

    wah, ini yang saya cari.. di test dulu ya...
    thanks..

  21. Administrator  

    6 Juni 2010 00.19

    ini dia yang dicari.. makasih yah atas tutor nya

    www.lagibelajarkomputer.blogspot.com

Posting Komentar

Template Copyright 2009 and Designed By Cahaya Biru