? wow! apaan tuh? saya sendiri sebenarnya bingung mau saya beri judul apa, akhirnya yang diketik jari ya tadi itu, "
". Tapi ngomong-ngomong expert disini bukannya cerdas sekali atau ahli melainkan bagus dan keren, duh gak juga sih.
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
. Tapi tidak ada salahnya kita tetap memasang
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 pencarian dengan tombol
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 == "") {this.value = "Ketik kata kunci dan tekan Enter";}' onfocus='if (this.value == "Ketik kata kunci dan tekan Enter") {this.value = "";}' 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 == "") {this.value = "Ketik kata kunci dan tekan Enter";}' onfocus='if (this.value == "Ketik kata kunci dan tekan Enter") {this.value = "";}' 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.
