Mengapa Tampilan Widget Pencarian Itu Penting?
Anda pernah lihat blog yang tampilannya rapi dan modern, tapi tiba-tiba kotak pencariannya kayak belum move on dari tahun 2000-an? Padahal, widget pencarian itu sering jadi bagian pertama yang dilihat pengunjung saat mereka pengen cari sesuatu. Nah, di artikel ini, Anda akan belajar cara mempercantik tampilan widget pencarian biar lebih cocok sama gaya blog Anda, tanpa ribet, tanpa coding berat.
1. Permak Widget Pencarian Pakai CSS
Kalau Anda pakai Blogger, biasanya bentuk dasarnya kayak gini:
<form id="searchthis" action="/search" method="get">
<input id="search-box" name="q" size="25" type="text" />
<input id="search-btn" value="Search" type="submit" />
</form>
Supaya nggak polos gitu-gitu aja, Anda bisa kasih sentuhan warna. Misalnya, pengen nuansa biru muda dan border biru tua:
<input id="search-box" name="q" size="25" type="text"
style="background: #ccccff; border: 2px solid #000066" />
Untuk tombolnya, biar makin kelihatan klik-able:
<input id="search-btn" value="Search" type="submit"
style="background: #000066; border: 2px outset #ff0000; color: #ffffff; font-weight: bold;" />
Hasilnya? Widget pencarian Anda jadi lebih hidup dan matching sama blog.
2. Tambahin Teks Panduan di Kotaknya
Kadang, pengunjung bingung mau ngetik apa. Nah, Anda bisa tambahin teks kecil kayak “Cari di Blog Ini” di dalam kotak. Simpel tapi berguna:
<input id="search-box" name="q" size="25" type="text"
value="Cari di Blog Ini" />
Mau ubah tulisan tombolnya jadi “Go!”? Gampang banget:
<input id="search-btn" value="Go!" type="submit" />
3. Ganti Tombol dengan Gambar Keren
Supaya tampilannya makin playful atau modern, Anda bisa ganti tombol "Search" dengan ikon gambar. Misalnya, kayak gini:
<input id="search-btn" type="image"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTO1tDTieI_Xqau4zFtpSeRIGW7aQ-0ofNHHRT1wzLfk_8qfcyw_KP1TdG5MNIJzptmviooALxVpFZqZpfrsVfvQAIOJrgyfhqVvpNIh4bY9nrPU7fwGFEAulrEdRVdOZnIOEFyI_fz_Y/s320/search-small.jpg"
style="margin-left: 5px; margin: 3px 0 0 5px;" />
Pastikan gambarnya kecil dan proporsional ya, supaya nggak berat di-load dan tetap enak dilihat.
Tampilan Keren, Pengalaman Nyaman
Widget pencarian yang kece bukan cuma soal gaya, tapi juga soal kenyamanan pembaca. Dengan sentuhan kecil lewat CSS, teks panduan, atau bahkan ikon gambar, blog Anda bisa tampil lebih profesional dan friendly. Dan yang paling penting: pengunjung jadi betah, dan makin mudah cari konten yang mereka butuhkan.
Ayo Coba Sekarang!
Sudah tahu caranya, sekarang tinggal praktik. Kalau Anda punya trik lain buat mempercantik widget pencarian, atau pengen tanya sesuatu, yuk share di kolom komentar! Jangan lupa juga bagikan artikel ini ke teman blogger lainnya yang butuh inspirasi desain.
32 Komentar
thanks ya bagus bognya ...
BalasHapusMakasih banyak untuk infonya. Sesuai dengan yg saya cari-cari nih
BalasHapusSangat bermanfaat sekali mas. Sukses saya pasang.
BalasHapusSlam hangat dari blogger newbie
mantap sob. Thanks tipsnya.
BalasHapusmantap sob infonya..
BalasHapusizin nyedot sooob...
makasih ilmu nya.
BalasHapusjika tak keberatan mampir lah di http://jalanbersamalimare.blogspot.com
lengkap banget mas...
BalasHapusjadi banyak referensi nih untuk membuat kotak pencarian di blognya.
makasih mas dh share :D
makasih sob tutornya
BalasHapussudah ane pasang di blog ane...
kalo cuman buat hovernya saja gimana caranya?
BalasHapusMakasih mas!!! udh dicari kemana2 akhirnya ktmu, thanks ya!
BalasHapusthanks mas :)
BalasHapusLangsung dicoba...dan berhasil...
BalasHapusMaturnuwun gan....
Salam...
Mantap nih....
BalasHapusterimakasih :-D
berhasil... mantap!!!!!!
BalasHapusbro... coba liat blog saya. liat di menunya!
BalasHapustrus yang kutanyain nih mas bro. bikin kotak searchnya di ujung menu itu gimana bro?
mumpung masih pemula
http://mhdteguhs.blogspot.com
thank's....berhasil, sangat bermanfaat
BalasHapusberhasil egha terapin di blog egha.. terimakasih kaka :)
BalasHapusinfonya sangat bermanfaat bangat ni gan, jangan lupa juga jalan2 ke blog aku y gan
BalasHapushttp://badry7.blogspot.com
Mantab Gan(Thx Infonya),
BalasHapusKalo Mampir Blog Saya Slalu Terbuka :
7-wins-share.blogspot.com
ini bisa jalan di wordpress gak mas
BalasHapusijin praktek dulu Om...
BalasHapuswah, lengkap sekali tutorialnya
BalasHapusmakasih sudah share
makasih pak, tapi itu bisa jalan ngga di wordpress ? kalau bisa apanya yang di modifikasi ? makasih sebelumnya
BalasHapusTERIMA KASIH GAN SUDAH BISA!1
BalasHapusmampir ke Blog saya :
http://wins-xp.blogspot.com/,
http://loadata.blogspot.com/
iya Gan... untuk wordpress gimana? bagi tips nya dong. suwun
BalasHapusmampir ke www.umrohalhabsyi.com Gan
Makasih tutorialnya sob, langsung dicoba ya......
BalasHapuswah, lengkap sekali tutorialnya
BalasHapusmakasih sudah share
itu mah cuma kotaknya doang bro, mana bisa cari,pasti pas di klik serching ga bisa.kode panggilnya aja ga ada. cepek dehhhhhhh
BalasHapusSangat membantu gan infonya buat saya pribadi. terimakasih sebelumnya ya gan sudah share artikel ini.
BalasHapusKunbal ya gan
BalasHapushttp://ghaptech.blogspot.com/
thanks ilmunya
BalasHapusMakasih tips nya sudah diformat diblog saya
BalasHapus