Membuat tampilan form search / submit lebih menarik

Jika anda belum tau apa yang dimaksud dengan form search, ini dia bentuknya : Jika boleh dijelaskan dikit, form tersebut terdiri dari 2 bagian. 1. textinput 2. button submit. Biasanya, form ini biasa dipakai untuk mencari suatu artikel di blog (mesin pencari) dan form berlangganan email feedburner. Nah...pada tutorial blogspot kali ini, saya akan sedikit bahas bagaimana cara merubah tampilan form tersebut sehingga bisa lebih menarik. Dan untuk merubah tampilan dari form tersebut, tentunya kita harus tahu dulu kode html-nya. Berikut kode html dari form tersebut : Kode untuk text input :
<input size="20" name="textinput" type="text"/>
Kode untuk button submit :
<input value="Daftar" type="submit"/>
Biasanya, kode diatas tidak selalu sama. Sesuai dengan fungsinya sendiri. Jadi untuk mengetahui kode tersebut, fokuskan saja pada text yang berwarna merah (seperti diatas). Sekarang kita coba untuk merubah tampilan form tersebut dengan sedikit menambahkan kode html pada kode standar form tersebut. Merubah tampilan textinput Misalnya saya akan mengubah tampilan textinput menjadi seperti ini Maka hal yang perlu dilakukan adalah dengan menambahkan kode html untuk merubah tampilan background dan bordernya saja. Sehingga kode-nya seperti ini :
<input style="background:#ebebeb; border:1px solid #000;" name="textinput" type="text" size="20"/>
Silahkan rubah text yang berwarna merah, sesuai dengan selera anda untuk mengganti warna background dan bordernya. Merubah tampilan button submit Untuk merubah tampilan button submit ini, pada dasarnya sama saja seperti merubah tampilan textinput. Caranya anda tinggal menambahkan kode html untuk mengganti background dan border. Seperti button submit dibawah ini : Kodenya :
<input style="background:#e0e0e0; border:1px solid #ebebeb;" value="Daftar" type="submit"/>
Silahkan rubah text yang berwarna merah, sesuai dengan selera anda untuk mengganti warna background dan bordernya. Sehingga tampilan baru dari form tersebut manjadi seperti ini : Silahkan bandingkan tampilannya dengan form standar. Lebih enak dipandangkan..?! hehehehe....Selamat mencoba...

11 komentar:

  1. Pertamaxxxxx nech....
    Meskipun premium sudah turun dan pertamax tetap... tapi selalu cari pertamax....

    Sip dech artikelnya... siap untuk diterapkan

    BalasHapus
  2. Mas, gmana cara meletakkan kode search sejajar dengan tab horizontal seperti mas punya..?, ty ya mas...

    BalasHapus
  3. ooo diganti yap tombol Daftarnya..wah keren juga lho om :D

    BalasHapus
  4. informasi yang sangat bermanfaat…
    thanks banget ya….

    BalasHapus
  5. tolong mas...kasih petunjuk aku baru bkn blog, cara buat tampilan yg menarik gmna? kirimkan ke email ku az ....thanx atas bantuannya.

    BalasHapus
  6. mas blogrolls yok?
    http://tinyurl.com/4ndreas

    BalasHapus
  7. Waduh thanks bgt om, kebetulan lagi lagi edit template nih biar lebih sure gitu

    BalasHapus
  8. beribu2 terima kasih dech... saya siap mengaplikasikanya.... maklum masih gaptek..

    BalasHapus
  9. tutorial yang bermanfaat, sudah saya coba dan berhasil di blog saya...terima kasih banyak sobat blogger.
    top lyrics | song lyrics |music lyrics

    BalasHapus
  10. Ini yang ku cari..., makasih mas

    sekedar info bagi anda yang ingin mendapatkan domain premium seperti .com,.net,.org dengan gratis caranya mudah hanya cari referal. Silahkan daftar di http://www.FreePremiumDomain.com/?r=487776

    BalasHapus

blogger