Category : Labels: Blog Stuff, Blog Tutorial, Desain, Template, Tips Trik, Widget
Anda pasti pernah melihat bahkan sering kotak pencarian suatu blog. Bermacam - macam bentuk dan gaya dari mesin pencari yang menarik di mata dan akhirnya membujuk diri kita untuk melakukan pencarian walaupun awalnya hanya ingin mencoba efek yang muncul dari kotak pencarian bila melakukan pencarian. Seperti contohnya kotak pencarian milik Google (Google Custom Search), Lijit yang mempunyai efek menarik saat melakukan pencarian. Tentu ini akan menambah kesempatan bagi blog kita untuk di eksplore lebih jauh lagi. Lowh kok bisa ? bisa saja maksud penulis begini :
Kotak Pencarian dengan gaya/model/style depan menarik ► efek proses pencarian yang menarik ► Judul artikel - artikel anda menarik untuk dibaca ► Pengunjung membaca artikel dari hasil pencarian.
Memang dalam hal ini judul artikel ikut ambil bagian dalam menarik minat pengunjung untuk membaca, tapi hal itu tidak akan terjadi kan bila tidak dilakukan pencarian terebih dahulu (hehe, bisa kan ? ).
Kali ini penulis tidak akan membahas mengenai cara desain dan membuat efek proses searching kotak pencarian menjadi lebih menarik, kita akan membahas langkah awal dalam desain kotak pencarian yang tentunya sedikit menambah gaya dari kotak pencarian yang masih kaku.
Kita akan menambahkan teks kedalam kotak pencarian kita. Eits, bukan sembarang teks penunjuk kotak pencarian. Teks ini akan menghilang bila kita klik bagian dalam (arena) kotak pencarian, dan muncul lagi bila kita klik di luar area kotak pencarian. Ya, memang sudah umum tapi perlu diketahui juga, kotak pencarian jenis ini akan memudahkan pengunjung dalam pencarian sekaligus menambah sedikit gaya dalam kotak pencarian. Contohnya :
Misal ada kotak pencarian, tapi tidak ada apapun (tampilan standar, biasa saja) = Kemungkinan melakukan pencarian lebih sedikit dari yang bergaya.
- Kotak pencarian dengan teks penunjuk di dalam area pencariannya, tapi teks tidak menghilang bila kita klik kotak pencarian = Membuat sedikit malas, karena kita harus menghapus dulu teks tersebut secara manual.
- Kotak pencarian dengan teks auto hide (di klik di dalam hilang, di klik di luar muncul lagi) = Membuat nyaman karena kita tidak perlu menghapus teks secara manual, dan kita tahu bahwa itu kotak pencarian yang sebenarnya, bukan banner affiliasi atau iklan yang sengaja dibuat seperti kotak pencarian yang akhirnya membuat kita kesasar bila kita search di situ. Seperti banner affiliasi domain gratis Co.CC contohnya.
- Kotak pencarian dengan efek - efek yang menyenangkan dan membantu = akan membuat kita nyaman dan senang.
Nah, kini kita tidak akan membahas bagaimana membuat kotak pencarian bergaya sangat dinamis, kita akan membuat yang cukup membuat nyaman saja seperti kotak pencarian pada point kedua. Dan kotak pencarian inilah yang paling umum.
Nah, bagaimana cara membuatnya. ayo kita kita mulai.
Copy -Paste saja kode di bawah ini kedalam HTML widget, bila belum mempunyai kotak pencarian.
<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>
Atau bila sudah mempunyai tapi tidak seperti pada point kedua silahkan tambahkan kode dibawah ini di dalam kode kotak pencarian. Seperti berikut ini misalnya kotak pencarian polos.
<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>
Ganti kode yang berwarna hijau dengan kode dibawah ini untuk membuat auto hide teks. Ganti teks berwarna merah dibawah ini dengan teks yang anda kehendaki.
<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'/>
Setelah itu Save Template.
Selesai. Jenis kotak pencarian lain, bisa di lihat di blognya Kang Albri.
Wah kreatif nih, nice tips yaw