Tuesday, April 29, 2008

Cara Mengedit Tampilan dari Submit Text-Box

Submit Text Box, atau yang nantinya saya singkat saja menjadi text box, adalah sebuah elemen HTML sebuah halaman blog yang biasanya digunakan untuk men-submit (mengirim) data ke pihak ketiga yang menyediakan layanan tertentu untuk blog kita. Biasanya text box ini digunakan untuk form "berlangganan lewat email" Feedburner (atau FeedBlitz) dan juga Google Search. Tampilan default dari sebuah text box adalah sebagai berikut:






Dapat dilihat bahwa tampilan default text-box yang putih bersih tersebut seringkali kurang menarik bagi beberapa manusia tertentu =) Lalu, bagaimana untuk mengubah style text-box submit tersebut agar lebih menarik?


Pertama-tama, kita harus melihat properties dari HTML code untuk text-box tersebut, yakni biasanya seperti ini:

<input maxlength="120" value="" name="EMAIL" size="20" type="text">

Nah, untuk mengubahnya kita bisa menggunakan style. Caranya, adalah dengan menambahkannya pada tag <input> yang bersangkutan. Beberapa properties yang bisa ditambahkan contohnya:

background-color: untuk mengubah warna dasar dari text-box
color: untuk mengubah warna huruf pada text-box
border:untuk mengubah ukuran border (bingkai) text-box
border-color:untuk mengubah warna border

Untuk percobaan, silakan mengubah text box form email-subscription by Feedburner Anda menjadi:

<input maxlength="120" style="background-color:#C3D9FF;border:4;border-color:#0066CC;" value="" name="EMAIL" size="20" type="text"/>

Lalu, tambahkan pada elemen halaman Anda seperti biasa. Jika berhasil, maka text-box Anda akan berwarna ungu muda, ber-border 4 px, dan mempunyai border berwarna biru gelap, seperti ini:





Selamat mencoba,


Matthew Long

2 comments:

Mr. Yoh said...

nice post! terus blogging ya!

Matthew Long said...

#jstrike
okey-dokey.. silakan menikmati eDorado sepuas Anda...

Related Posts: