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:
- Buka blogger -> tata letak -> edit html
- Cari kode ]]>skin
- Copy paste kode CSS sobat di atas kode tersebut.
- jangan lupa beri nama.. caranya /* nama kode sobat */ contoh /*===== Vertikal Menu =====*/
- 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.
Baca Lebih Lanjut...
