Minggu, 06 Desember 2009

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.

cara membuat mesin pencari auto value.


Kemudian pilih HTML/Javascript.

membuat form search engine show hide.


Setelah itu letakkan code berikut:

<center><form action='pelajaran-blog.blogspot.com/search' id='searchform' method='get'>
<input class="searchinput" id="searchbox" name="q" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Cari artikel disini..&quot;;}" onfocus="if (this.value == &quot;Cari artikel disini..&quot;) {this.value = &quot;&quot;;}" type="text" value="Cari artikel disini.." />
<input class="submitbutton" type="submit" value="Search" />
</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://pelajaran-blog.blogspot.com,gantilah sesuai alamat blog anda.
Semoga berhasil dan mudah-mudahan bermanfaat.. Amin! Kawin! lha koq??

Baca Juga Yang Ini..

Tidak ada komentar:

Posting Komentar