MEMBUAT TAG MENU HORIZONTAL

Kali ini saya ingin berbagi tentang bagaimana cara membuat menu horizontal yang interaktif seperti milik saya. Tidak perlu mahir pemrograman CSS, tidak perlu mahir pemrograman html, tinggal copy paste saja sudah jadi. hehehehe.... Yaqin 100 persen mudah dan murah.

Ini yang harus dipersiapkan terlebih dahulu sebelum membuat menu horizontal;
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.
3. Berdo'a agar hasilnya memuaskan




* Design menu horizontal yang akan kita buat kali ini adalah Glossy menu. Kalau sobat mau membuat Glossy menu silahkan ikuti pembahasannya... atau kalau mau yang lain silahkan kunjungi website dynamicdrive.com dan pilih salah satu design menu horizontal yang sobat inginkan... dan lakukan seperti artikel ini.

* Silahkan buka situsnya DI SINI

* Download ke tiga gambar yang disediakan; gambar tersebut yakni


1. 2. 3.

* Sign in ke geocities.. menggunakan yahoo id anda di sini.

* Pilih menu manage kemudian easy upload

* Pilih browse untuk memilih file gambar yang Anda tadi download. kemudian pilih upload file.

* Setelah itu klik file manager dan lihat apakah gambar yang sobat upload tadi berhasil terupload. ..... BaiklahKita tinggalkan sejenak untuk hal ini, Jangan Ditutup loh.

* Sekarang kita menuju ke dinamicdrive.com. dan copy-paste code THE CSS ke notepad.

* cari kode-kode berikut;

- background: url(media/menur_bg.gif) repeat-x; /*tab background image path*/
- background: url(media/menur_hover_left.gif) no-repeat; /*left tab image path*/
- background: url(media/menur_hover_right.gif) no-repeat; /*left tab image path*/

* Setelah itu ganti kode yang berwarna merah dengan url gambar anda di geocities tadi, Misalnya kode tersebut akan menjadi seperti ini.

- background: url(http://www.geocities.com/seikatsukai/menuo_bg.gif) repeat-x; /*tab background image path*/
- background: url(http://www.geocities.com/seikatsukai/menuo_hover_left.gif) no-repeat; /*left tab image path*/
- background: url(http://www.geocities.com/seikatsukai/menuo_hover_right.gif) no-repeat; /*left tab image path*/

Caranya kembali ke file manager geocities dan cari gambar yang tadi sobat upload. Klik kanan pada pilihan view kemudian pilih COPY LINK LOCATION kemudian paste-kan pada lokasi di atas.

* Simpan dulu konfigurasi di atas ke komputer sobat. Namun jangan tutup dulu notepadnya.

* Sign in ke blogger.com . Pilih tata letak, kemudian edit html. Tandai tulisan Expand Template Widget

* Cari kode ]]>skin kemudian copy code CSS tadi tepat di atas kode tersebut.

* Simpan dan tunggu hasilnya.

* Sekarang tinggalkan edit html, dan kita menuju elemen halaman.

* Pilih tambah elemen halaman kemudian tambah html/javascript code.

* Buka kembali dinamicdrive.com tadi, kemudian lihat kode html yang tertera di bawahnya kode CSS. Copy code tersebut dan paste ke elemen baru blogger Sobat.

* Ganti link yang ada dengan link sobat.

* hapus code class="current" kemudian simpan.

* lihat hasilnya

* Tinggalkan Komentar ya

Selamat mencoba