Cara Membuat Form Pencarian Expert

Form pencarian expert? wow! apaan tuh? saya sendiri sebenarnya bingung mau saya beri judul apa, akhirnya yang diketik jari ya tadi itu, "cara membuat form pencarian expert". Tapi ngomong-ngomong expert disini bukannya cerdas sekali atau ahli melainkan bagus dan keren, duh gak juga sih.

Begini saja form pencarian yang diletakkan di sebuah blog sangat membantu pengunjung mencari apa yang dia inginkan, untuk memasang fasilitas ini kita biasanya bisa mengambil dari fasilitas blogger, dari bawaan template, dari google adsense untuk pencarian dsb. Biasanya kita memasang form pencarian dari google adsense untuk menambah kemungkinan mendapat penghasilan tambahan dari internet. Tapi tidak ada salahnya kita tetap memasang form pencarian sendiri, apalagi kalau sudah bawaan template biasanya sudah diatur sesuai tampilannya dengan template tersebut, sehingga kalau dibuang akan mengurangi keindahan dari tampilan blog kita.

Artikel saya kali ini membahas bagaimana mambuat form pencarian menjadi lebih menarik karena jika kotak form dalam kondisi normal akan memiliki keterangan, tapi saat diklik di kotak pencarian tulisan akan langsung hilang. Agar tidak bingung silahkan bandingkan 3 form pencarian dibawah ini: (sebagai contoh modelnya memakai model form pencarian milik blog ini)

Form pencarian tanpa tombol

Form 1

Form 2

Form 3

Form pencarian dengan tombol

Form 1

Form 2

Form 3

Coba anda klik di masing-masing form pencarian diatas, form pertama kosong dan ketika di klik tentu tidak ada efek apa-apa, form ini adalah yang paling umum, dan menurut saya kurang menarik. Form pencarian kedua ada keterangan dan cukup menarik serta sudah informatif, sayang sekali ketika di klik tulisan tetap ada, sehingga pengunjung yang ingin mencari sesuatu harus menghapus terlebih dahulu text keterangan tersebut, selain merepotkan juga kurang sip!. Form pencarian yang ketigalah yang paling baik menurut saya keterangan akan menghilang seketika di klik (onfocus) dan akan muncul kembali jika tidak di klik lagi.
Jika form pencarian di blog anda selama ini masih seperti form pencarian 1 dan 2 maka jika anda tertarik untuk mengubahnya agar seperti form pencarian ke-3, tinggal dimodifikasi sedikit saja. Saya tidak akan memberikan penjelasan rinci bagaimana mengubah form anda tadi karena setiap form pencarian memiliki kode yang mungkin berbeda, hanya saja pasti ada unsur yang pasti sama pada tiap kode form pencarian. Nah saya hanya akan menampilkan kode dari ketiga form diatas, dan perbedaan yang ada itulah yang menyebabkan ketiganya tidak sama. Terapkan kode yang ada di form ketiga pada kode form pencarian anda saat ini.
Dibawah ini adalah kode dari masing-masing form pencarian diatas, silahkan dicontek saja.

Form pencarian tanpa tombol Form 1
<FORM action='/search' id='searchform' method='get' style=' text-align:center;'>
<INPUT class='inpsearch' id='s' name='q' type='text' value=''/>
<INPUT id='searchsubmit' type='hidden' value='Search'/>
</FORM>
Form 2
<FORM action='/search' id='searchform' method='get' style=' text-align:center;'>
<INPUT class='inpsearch' id='s' name='q' type='text' value='Ketik kata kunci dan tekan Enter'/>
<INPUT id='searchsubmit' type='hidden' value='Search'/>
</FORM>
Form 3
<FORM action='/search' id='searchform' method='get' style=' text-align:center;'>
<INPUT class='inpsearch' id='s' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Ketik kata kunci dan tekan Enter&quot;;}' onfocus='if (this.value == &quot;Ketik kata kunci dan tekan Enter&quot;) {this.value = &quot;&quot;;}' type='text' value='Ketik kata kunci dan tekan Enter'/>
<INPUT id='searchsubmit' type='hidden' value='Search'/>
</FORM>

Form pencarian dengan tombol Form 1
<FORM action='/search' id='searchform' method='get' style=' text-align:center;'>
<INPUT class='inpsearch' id='s' name='q' type='text' value=''/>
<INPUT id='searchsubmit' type='submit' value='Search'/>
</FORM>
Form 2
<FORM action='/search' id='searchform' method='get' style=' text-align:center;'>
<INPUT class='inpsearch' id='s' name='q' type='text' value='Ketik kata kunci dan tekan Enter'/>
<INPUT id='searchsubmit' type='submit' value='Search'/>
</FORM>
Form 3
<FORM action='/search' id='searchform' method='get' style=' text-align:center;'>
<INPUT class='inpsearch' id='s' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Ketik kata kunci dan tekan Enter&quot;;}' onfocus='if (this.value == &quot;Ketik kata kunci dan tekan Enter&quot;) {this.value = &quot;&quot;;}' type='text' value='Ketik kata kunci dan tekan Enter'/>
<INPUT id='searchsubmit' type='submit' value='Search'/>
</FORM>

Kode yang saya beri warna hijau adalah kode yang perlu diperhatikan, karena yang lain bisa berlainan tiap form pencarian. Nah silahkan mencoba.