Kustomasi Menu Pulldown

Posted by Unknown on Wednesday, November 19, 2008

Postingan tentang Kustomasi Menu Pulldown ini masih berhubungan dengan Cara Pembuatan Menu Pulldown dan Menentukan Lebar Menu Pulldown yang dapat dilihat pada blog Tips Trik Blog ini. Kustomasi kali ini akan menambah efek warna pada font dan background sehingga menjadikan tampilan menu pulldown ini akan menjadi lebih menarik dan atraktif.

Format default menu pulldown adalah seperti telah diposting pada Cara Pembuatan Menu Pulldown, yaitu seperti di bawah ini.

<form><select name="menu" onchange="window.open(this.options[this.selectedIndex].value,'_blank')"
size=”1”>

<option>Nama/Judul Menu </option>

<option value=”http://alamat_link_1/”>Nama_link_1</option>
<option value=”http://alamat_link_2/”>Nama_link_2</option>
<option value=”http://alamat_link_dst/”>Nama_link_dst</option>

</select>
</form>

Untuk memberikan efek warna pada font dan background adalah dengan menambahkan atau menyisipkan kode seperti di bawah ini.

style="color:kode_warna_font; background:kode_warna background"

kode_warna_font >> diganti dengan kode html warna untuk font sesuka kita

kode_warna_background >> diganti dengan kode html warna untuk background sesuka kita juga.

Misalkan kita menginginkan warna font merah dengan background orange maka kodenya menjadi seperti di bawah ini.

style="color:#B40404; background:#FF8000"

Untuk kode-kode html warna dapat dilihat di sini.

Sekarang kita sisipkan kode tersebut ke dalam form menu pulldown sehingga selengkapnya menjadi seperti di bawah ini.

<form><select name="menu" onchange="window.open(this.options[this.selectedIndex].value,'_blank')"
size=”1” style="color:#B40404;background:#FF8000">

<option>Nama/Judul Menu </option>

<option value=”http://alamat_link_1/”>Nama_link_1</option>
<option value=”http://alamat_link_2/”>Nama_link_2</option>
<option value=”http://alamat_link_dst/”>Nama_link_dst</option>

</select>
</form>

Contoh hasilnya seperti di bawah ini.


Kita dapat memberikan efek warna yang berbeda untuk setiap isi menu dengan menyisipkan kode tersebut, contohnya seperti di bawah ini.

<form><select name="menu" onchange="window.open(this.options[this.selectedIndex].value,'_blank')"
size=”1” style="color:#B40404;background:#FF8000">

<option>Nama/Judul Menu </option>

<option value=”http://alamat_link_1/"style="color:#B40404;background:#088A08">Nama_link_1</option>
<option value=”http://alamat_link_2/"style="color:#B40404;background:#0B0B61">Nama_link_2</option>
<option value=”http://alamat_link_dst/"style="color:#B40404;background:#610B38">Nama_link_dst</option>

</select>
</form>

Anda dapat berkreasi dengan warna yang lain sesuka hati.

Contoh hasilnya seperti di bawah ini. Anda dapat mencoba untuk berkreasi sendiri sehingga dihasilkan kombinasi warna yang lebih baik dari pada yang saya contohkan (maklum saya kan bukan seniman).

Selamat Mencoba bagi yang ingin mencoba!!

(sumber : Blogging Tutorial, Free Template, & Site Info)

Baca juga yang ini.

  1. Cara Pembuatan Menu Pulldown
  2. Menentukan Lebar Menu Pulldown
  3. Mendulang Dollar dari Buyblogreviews.com
  4. Mendulang Dollar dari Blogsvertise.com
  5. Mendulang Rupiah dari Kumpulblogger.com
  6. Rename Recycle Bin
  7. Tips Membuat Readmore

Description: Kustomasi Menu Pulldown Rating: 4.5 Reviewer: Unknown - ItemReviewed: Kustomasi Menu Pulldown

{ 0 comments... read them below or add one }

Post a Comment