Header Ads Widget

Ebook GRATIS Bisnis Online dari Nol - Banner Post Ads Uka Fahrurosid

Latest

6/recent/ticker-posts

Tips Mempercantik Widget Pencarian di Blog Anda

Cara mudah mempercantik tampilan widget pencarian agar cocok dengan desain blog Anda.

Ilustrasi tampilan kotak pencarian blog yang modern dan menarik

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.

Semoga Bermanfaat!

Miliki ebook GRATIS yang akan bantu kamu cuan dari dunia digital.

Dapatkan di Sini!

Follow @ukafahrurosid

Posting Komentar

32 Komentar

  1. Makasih banyak untuk infonya. Sesuai dengan yg saya cari-cari nih

    BalasHapus
  2. Sangat bermanfaat sekali mas. Sukses saya pasang.
    Slam hangat dari blogger newbie

    BalasHapus
  3. mantap sob. Thanks tipsnya.

    BalasHapus
  4. mantap sob infonya..
    izin nyedot sooob...

    BalasHapus
  5. makasih ilmu nya.
    jika tak keberatan mampir lah di http://jalanbersamalimare.blogspot.com

    BalasHapus
  6. lengkap banget mas...

    jadi banyak referensi nih untuk membuat kotak pencarian di blognya.

    makasih mas dh share :D

    BalasHapus
  7. makasih sob tutornya
    sudah ane pasang di blog ane...

    BalasHapus
  8. kalo cuman buat hovernya saja gimana caranya?

    BalasHapus
  9. Makasih mas!!! udh dicari kemana2 akhirnya ktmu, thanks ya!

    BalasHapus
  10. Langsung dicoba...dan berhasil...
    Maturnuwun gan....
    Salam...

    BalasHapus
  11. Mantap nih....

    terimakasih :-D

    BalasHapus
  12. berhasil... mantap!!!!!!

    BalasHapus
  13. bro... coba liat blog saya. liat di menunya!

    trus yang kutanyain nih mas bro. bikin kotak searchnya di ujung menu itu gimana bro?
    mumpung masih pemula
    http://mhdteguhs.blogspot.com

    BalasHapus
  14. thank's....berhasil, sangat bermanfaat

    BalasHapus
  15. berhasil egha terapin di blog egha.. terimakasih kaka :)

    BalasHapus
  16. infonya sangat bermanfaat bangat ni gan, jangan lupa juga jalan2 ke blog aku y gan

    http://badry7.blogspot.com

    BalasHapus
  17. Mantab Gan(Thx Infonya),
    Kalo Mampir Blog Saya Slalu Terbuka :
    7-wins-share.blogspot.com

    BalasHapus
  18. ini bisa jalan di wordpress gak mas

    BalasHapus
  19. ijin praktek dulu Om...

    BalasHapus
  20. wah, lengkap sekali tutorialnya
    makasih sudah share

    BalasHapus
  21. makasih pak, tapi itu bisa jalan ngga di wordpress ? kalau bisa apanya yang di modifikasi ? makasih sebelumnya

    BalasHapus
  22. TERIMA KASIH GAN SUDAH BISA!1


    mampir ke Blog saya :


    http://wins-xp.blogspot.com/,
    http://loadata.blogspot.com/

    BalasHapus
  23. iya Gan... untuk wordpress gimana? bagi tips nya dong. suwun

    mampir ke www.umrohalhabsyi.com Gan

    BalasHapus
  24. Makasih tutorialnya sob, langsung dicoba ya......

    BalasHapus
  25. wah, lengkap sekali tutorialnya
    makasih sudah share

    BalasHapus
  26. Anonim2:46 PM

    itu mah cuma kotaknya doang bro, mana bisa cari,pasti pas di klik serching ga bisa.kode panggilnya aja ga ada. cepek dehhhhhhh

    BalasHapus
  27. Sangat membantu gan infonya buat saya pribadi. terimakasih sebelumnya ya gan sudah share artikel ini.

    BalasHapus
  28. Kunbal ya gan
    http://ghaptech.blogspot.com/

    BalasHapus
  29. Makasih tips nya sudah diformat diblog saya

    BalasHapus

Banner Ads 728x90