Membuat Form Kotak Pencarian Dengan Show Hide Value / Auto Value

Belajar Menghias Kotak Mesin Pencari / Kotak Pencari pada Blog

Jika beberapa waktu lalu saya sempat memposting tentang bagaimana cara membuat form search engine/mesin pencari pada blog,giliran kali ini kita belajar menghiasnya.

Untuk fungsi dan keuntungan dari kotak pencarian ini,saya kira teman-teman sudah pada tahu ya ^^

Menghias mesin pencari bisa bermacam-macam,dari mengubah background /menambahkan image kotak mesin pencari maupun memaksimalkan fitur kotak pencarian tersebut.

Salah satunya yang akan saya bagi-bagi saat ini,adalah membuat form kotak pencarian dengan fitur show-hide value atau auto value.
Maksudnya?
Gimana ya njelasinnya? bingung juga si,xixixi..

Maksudnya,saat form diklik value/tulisan yang ada pada form pencarian akan hilang,dan sebaliknya jika yang diklik di luat form,tulisan pada form akan mucul secara otomatis alias nongol kembali.

And bisa lihat kotak pencarian pada blog ini,saat anda klik pada form,tulisan 'Cari Artikel Disini..' akan hilang,sebaliknya saat anda mengklik di luar form,tulisan 'Cari Artikel Disini..' akan muncul kembali.

Gimana? maksud khan?

Langkah Cara Membuat Kotak Mesin Pencari Show Hide Values

Yo wis,jika anda berminat membuat kotak pencarian seperti itu,ikuti langkah -langkah di bawah ini:

Pilihlah Dashboard,kemudian pergilah ke Tata Letak blog anda,selanjutnya pilih Add New Widget/Tambah Gadget.



Kemudian pilih HTML/Javascript.



Setelah itu letakkan code berikut:

---

<center><form id="searchform" action="http://dot-blogspot76.blogspot.com/search" name="q" method="get"><input id="s" onfocus="if (this.value == 'Cari artikel disini..') {this.value = '';}" value="Cari artikel disini.." name="q" onblur="if (this.value == '') {this.value = 'Cari artikel disini..';}" type="text"/><input id="searchsubmit" value="Search" type="submit"/></form></center>

---

Lalu Simpan dan lihat hasilnya.

Untuk tulisan :

• Cari artikel disini..,gantilah sesuai keinginan anda misal;'Type your text here..' atau 'Cari Artikel..' dll,tapi ingat! dari tulisan ketiga-tiganya harus sama.
• Sedangkan tulisan http://dot-blogspot76.blogspot.com,gantilah sesuai alamat blog anda.

Semoga berhasil dan mudah-mudahan bermanfaat.. Amin! Kawin! lha koq??