Membuat Kotak Pencarian (Search Box) yang Simple

Hampir di semua website kita dapat menemukan kotak pencarian atau search box yang sangat bermanfaat bagi pengunjung untuk mencari yang mereka inginkan dan bermanfaat pula untuk pemilik website sehingga pengunjung dapat berkunjung lebih lama.

Sebagai pemilik website mungkin anda pernah mengalami kebosanan dengan bentuk search box yang ada dan ingin memberikan beberapa sentuhan agar lebih simple, komunikatif dan tentu saja lebih menarik lagi bagi para pengunjung untuk memanfaatkannya.

Untuk membuatnya, kita hanya cukup mengutak-atik sedikit halaman searchform.php. Default yang diberikan oleh WordPress adalah sbb:

<form method=”get” id=”searchform” action=”<?php bloginfo(‘url’); ?>/”>
<div><input type=”text” value=”<?php the_search_query(); ?>” name=”s” id=”s” />
<input type=”submit” id=”searchsubmit” value=”Search” />
</div>
</form>

Tampilannya sebagai berikut
Sebagai contoh kita akan merubahnya menjadi :

1. Tanpa tombol Search dan digantikan dengan teks "Cari disini" di dalam box.
2. Informasi "Ketik yang anda cari lalu tekan enter" pada saat kursor mendekat ke dalam box

Maka form tersebut akan kita edit dan menjadi :

<form method="get" id="searchform" action="<?php bloginfo('url'); ?>/"> <div><input type="text" value="<?php if(is_search()) {the_search_query(); } else {echo 'Cari disini';}?>" name="s" id="s" title="Ketik yang anda cari lalu tekan enter" onfocus="if(this.value=='Cari disini')this.value='<?php the_search_query(); ?>';" onblur="if(this.value=='')this.value='Cari disini';" /> </div> </form>

Tampilannya menjadi sebagai berikut:

Kata pencarian:

membuat pencarian dengan php, membuat kotak pencarian, membuat search box, membuat search di web, membuat search box dalam website, membuat search di website, membuat kotak search, membuat kolom search di web , kolom searching dengan css, membuat search pada web, membuat pencarian dan link di php, membuat search website, menambah kotak search pada web, cara membuat script search pencarian, buat kolom search dengan javascript, perintah cari pada php, membuat searching dengan css, pencarian dengan kategori dengan php, mendesain kotak pencarian wordpress, membuat html pencarian web, menaruh pencarian di website html, menampilkan tulisan saat kursor mendekat php, buat simple search dengan php, membuat kolom search pada website, membuat pencarian pada web, membuat pencarian di web, membuat kotak search di website, membuat search untuk website, membuat search tanpa database, script kotak pencarian, membuat div cari, membuat search form di website, membuat search dengan css, cara membuat kotak pencarian beserta kotak kategori, cara membuat kotak pencarian di web dengan php, membuat kotak pencarian dengan php mysql, membuat search box tanpa database, membuat searching pada web html, membuat search web dengan php mysql, menambah kolom input php, membuat serching di website, search website php, membuat searh di web, membuat searcing di web, teks box di php, tutorial membuat search engine dengan php, tutorial membuat search engine dengan php pdf, tutorial search di web php, membuat search pencarian web php, membuat search pencarian php

Artikel terkait:

1. Membuat Search Box Dengan Image
2. Pencarian dengan 2 Search Engine
3. Membuat Copyright yang Dinamis
4. Apa itu RSS (Really Simple Syndication)?
5. Membuat Konfirmasi Box
6. Membuat Link yang Otomatis Terbuka
7. Tips Menggunakan Gmail Kotak Prioritas

Operator pada Javascript

Cara Mengetahui Apakah Gmail Kita di Hack