MEMBUAT MENU VERTIKAL

Beberapa saat yang lalu saya pernah memosting artikel untuk membuat menu horizontal, kali ini saya akan memosting topik yang sama namun berbeda, yakni membuat menu vertikal.

Caranya cukup Mudah, Seperti biasa persiapkan dahulu beberapa itemnya.



1. Situs hosting gambar. Hal ini dibutuhkan untuk menempatkan gambar yang nantinya akan kita link. Misal geocities di yahoo.
2. Notepad atau yang lain untuk backup template sobat serta editing place.
3. Berdo'a agar hasilnya memuaskan

Pertama, saya jelaskan design yang akan kita buat kali ini dinamakan urban grey menu. Style ini diadopsi dari website penyedia jasa CSS programing dynamicdrive.com namun jika sobat ingin membuat menu vertikal dengan tampilan lain, silahkan cari pilihan sobat di sini.

Caranya bagaimana??? Mudah saja... yuk kita bahas bersama...

*Pertama, pergi dulu ke halaman
urban grey menu. Kemudian download dulu gambar yang sobat inginkan. pilih salah satu aja. Setelah itu, upload ke geocities.. Jangan Lupa...!!!

* Selanjutnya copy paste code CSS (yang atas) yang ada ke notepad sobat.

* Hilangkan perintah style yang ada di paling atas dan paling bawah kode tersebut.

* cari kode width: 190px; ganti kode tersebut dengan width: 100%; agar tampilan menu vertikal menyesuaikan template sobat.

* Ganti url: (media/arrowstop.gif) dengan alamat url sobat di geocities. Misal url(http://www.geocities.com/seikatsukai/downgreen.gif)

* Kalau mau mengganti warnanya, sobat tinggal nyari aja kode warna yang ada di CSS programnya. Kode tersebut misal untuk warna latar belakang objek.
background: #606060;
background: #E9E9E9;
background: black;

atau warna tulisan
color: white;
color: black;
color: black;
color: white;

untuk menggantinya sobat tinggal mengganti warna yang disebutkan (baik dengan kode ataupun tulisan) misalnya white diganti green. Untuk mengganti dalam bentuk tulisan bisa dicoba beberapa kata berikut; red, green, blue, orange, grey, black, white, yellow, lime, ... Namun untuk kode warna html bisa di lihat diposting saya yang ini.

* Selanjutnya pasangkan kode CSS yang telah sobat edit tadi ke template. Caranya:

  1. Buka blogger -> tata letak -> edit html
  2. Cari kode ]]>skin
  3. Copy paste kode CSS sobat di atas kode tersebut.
  4. jangan lupa beri nama.. caranya /* nama kode sobat */ contoh /*===== Vertikal Menu =====*/
  5. Simpan Templatenya

*Buka kembali urban grey menu. copy paste kode tersebut ke notepad kemudian ganti konfigurasinya sesuai blog sobat.

keterangan program:
h3 ==> adalah judul yang akan tampil pada halaman sobat.
class=urbangreymenu ==> adalah deklarasi dari CSS language tadi. Jika perintah ini tidak ada, maka kode CSS sobat tidak akan berjalan.

*Save as kode tadi ke elemen halaman baru. dan lihat hasinya.

Ada pertanyaan, Kesulitan atau butuh bantuan??? Atau punya komentardan tanggapan ??? Silahkan tinggalkan di kolom komentar di bawah ini.

18 comments:

  1. boleh juga tuk dipraktekkan...tapi mau cari posisi dulu biar blog q gak terlihat makin rame...trims...

    nb..
    tukeran link yuk...saya pasang dulu, nanti cek di http://gocengblog.blogspot.com/ trims

    ReplyDelete
  2. Q dah nyoba... silahkan lihat hasilnya di sini... http://poet3q.blogspot.com...
    Lihat di widget arsip blog ya

    ReplyDelete
  3. Menarik utk dipraktekkan..! Nice post !

    ReplyDelete
  4. ok nanti sy pelajari ...
    thanks

    ReplyDelete
  5. wah boleh nih tipsnya..akan saya coba..thx for sharing sob

    ReplyDelete
  6. wah boleh neh triknya..saya coba ya..thanks for sharing friend.

    ReplyDelete
  7. makin ajib aja inponya nih... keren sob.. lanjutkan... :)

    ReplyDelete
  8. mmm...patut dicoba niy,,hoho"..

    sob tuker link yuk..

    ReplyDelete
  9. info yang bagus sob...
    patut dicoba nih...

    ReplyDelete
  10. mantab gaan infonya blok walking

    ReplyDelete
  11. salam kenal...aku mau tanya...gmana cara membuat link di menu dropdownya...aku masih nyubi.....tak tunggu ya?mksh...plis kunjungi blog aku

    ReplyDelete