Search box atau kotak pencarian merupakan salah satu fitur penting pada sebuah website maupun blog. Dengan adanya fitur pencarian, pengunjung dapat menemukan artikel, halaman, produk, atau informasi tertentu dengan lebih cepat dan mudah.
Saat ini hampir semua website profesional menggunakan search box karena sangat membantu pengalaman pengguna. Bahkan blog sederhana sekalipun biasanya tetap memiliki fitur pencarian agar pengunjung tidak kesulitan mencari konten yang diinginkan.
Pada tutorial ini kamu akan belajar secara lengkap bagaimana cara membuat search box menggunakan HTML tanpa CSS maupun JavaScript. Tutorial ini sangat cocok untuk pengguna Blogger, XtGem, website HTML biasa, maupun pemula yang baru belajar membuat website.
Search box adalah kolom pencarian yang memungkinkan pengunjung mengetik kata kunci tertentu untuk mencari konten di dalam website.
Biasanya search box terdiri dari:
Search box dapat digunakan untuk:
Banyak pemilik website menganggap search box hanya fitur tambahan. Padahal sebenarnya search box sangat penting untuk meningkatkan kenyamanan pengunjung.
Pengunjung tidak perlu membuka halaman satu per satu untuk mencari artikel tertentu.
Website yang memiliki fitur pencarian biasanya terlihat lebih modern dan profesional.
Jika pengunjung betah dan mudah menemukan konten, maka pengalaman pengguna menjadi lebih baik. Hal ini bagus untuk perkembangan website.
Semakin banyak artikel di website, semakin penting fitur pencarian.
Sebelum mulai membuat search box, ada beberapa hal yang perlu dipersiapkan.
Minimal kamu memahami tag dasar seperti:
Search box bisa dipasang di:
Kamu bisa memasang search box di:
Search box dasar biasanya terdiri dari form dan input pencarian.
Berikut contoh sederhana:
Penjelasan:
Berikut langkah-langkah membuat search box sederhana untuk website HTML.
Kini search box sederhana sudah berhasil dibuat.
Blogger sebenarnya sudah memiliki fitur pencarian bawaan. Namun banyak pengguna lebih suka membuat search box manual agar lebih fleksibel.
Kode di atas akan menggunakan fitur pencarian bawaan Blogger.
Jika menggunakan website HTML biasa, kamu dapat membuat search box sederhana seperti berikut:
Pada contoh di atas, hasil pencarian diarahkan ke halaman search.html.
Placeholder adalah tulisan samar di dalam kolom pencarian.
Contoh:
Tulisan placeholder membantu pengunjung memahami fungsi kolom pencarian.
Tombol search digunakan untuk mengirim kata pencarian.
Kamu juga bisa mengganti tulisan Search menjadi:
Selain pencarian internal website, kamu juga bisa membuat search box Google.
Kode tersebut akan langsung menggunakan mesin pencari Google.
Kamu juga dapat membuat pencarian khusus untuk domain sendiri menggunakan Google.
Ganti namadomain.com dengan domain website milikmu.
Pengguna XtGem juga dapat memasang search box dengan mudah.
Placeholder membantu pengunjung memahami fungsi search box.
Ukuran kolom yang terlalu kecil membuat pengunjung kurang nyaman.
Biasanya search box diletakkan di bagian atas website.
Gunakan kata seperti Search atau Cari.
Jika action salah, pencarian tidak akan bekerja.
Input search wajib memiliki atribut name.
Pastikan semua tag ditutup dengan benar.
Search box memang bukan faktor SEO utama, tetapi sangat membantu pengalaman pengguna.
Website yang mudah digunakan biasanya lebih disukai pengunjung.
Google menyukai website yang:
Search box merupakan fitur penting yang membantu pengunjung mencari artikel atau halaman dengan cepat.
Dengan HTML sederhana, kamu sudah bisa membuat search box untuk Blogger, XtGem, maupun website biasa.
Kamu juga telah mempelajari:
Semoga tutorial ini membantu dan bisa langsung kamu praktikkan di website milikmu sendiri.