Beranda
Blogging
Tips

Membuat Kotak Pencarian Teks di Blogspot (Tanpa PHP, Anti Refresh)

Cara membuat kotak pencarian teks di Blogspot tanpa PHP. Tutorial search box HTML + JavaScript anti refresh, ringan, dan SEO-friendly.

Membuat Kotak Pencarian Teks di Blogspot bisa jadi solusi praktis untuk membantu pengunjung menemukan data di dalam satu halaman tanpa perlu scroll panjang.

Fitur ini mirip seperti fungsi CTRL+F pada browser, tapi lebih user-friendly karena tersedia langsung di halaman blog.

Menariknya, kita bisa membuat kotak pencarian teks di Blogspot tanpa PHP dan MySQL, cukup menggunakan HTML, CSS, dan JavaScript.

Membuat Kotak Pencarian Teks di Blogspot (Tanpa PHP, Anti Refresh)

Apa Itu Kotak Pencarian Teks di Blogspot?

Kotak pencarian ini adalah fitur filter data dalam satu halaman (client-side search) yang bekerja secara real-time:
  • Tidak perlu reload halaman (anti refresh)
  • Hasil pencarian langsung tampil
  • Cocok untuk halaman list (daftar nama, produk, data, dll)
  • Bisa diterapkan di Blogger/Blogspot

Kapan Fitur Ini Dibutuhkan?

Fitur ini sangat berguna jika:
  • Anda menampilkan daftar panjang (list data)
  • Pengunjung kesulitan mencari data secara manual
  • Ingin membuat search box sederhana di Blogspot
  • Tidak ingin menggunakan database seperti PHP MySQL

Contoh kasus: daftar nama, alamat, produk, atau kategori.

Cara Membuat Kotak Pencarian Teks di Blogspot

Berikut langkah-langkah membuat search box di Blogspot dengan JavaScript:

Dan uniknya, skrip ini dapat diterapkan di blogspot.. asik kan?

Seperti contoh dibawah ini:



Mari memulai..
Membuat Kotak Pencarian Teks di Blogspot (Tanpa PHP, Anti Refresh)

Cara Membuat Kotak Pencarian Teks di Blogspot

Berikut langkah-langkah membuat search box di Blogspot dengan JavaScript:

1. Tambahkan CSS

Masuk ke Tema → Edit HTML, lalu tambahkan CSS berikut:

<style>
* {
  box-sizing: border-box;
}
#myInput {
  background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKxGTviEnhXDd7afp0m-GcGZtvCB0cglNQut1Un4ASAV8aBWQmiz7jTUX7caoRmHcFg-JT0uXvas9renQQXsTeMAhA6EnKwGxk50Bltc3o_06aRPBSsv__dALncLYG5Cxr56LQzMhh704/s1600/searchicon.png');
  background-position: 10px 12px;
  background-repeat: no-repeat;
  width: 100%;
  font-size: 16px;
  padding: 12px 20px 12px 40px;
  border: 1px solid #ddd;
  margin-bottom: 12px;
}
#myUL {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
#myUL li a {
  border: 1px solid #ddd;
  margin-top: -1px;
  background-color: #f6f6f6;
  padding: 12px;
  text-decoration: none;
  font-size: 18px;
  color: black;
  display: block;
}
#myUL li a:hover {
  background-color: #eee;
}
</style>

2. Tambahkan HTML (Struktur Search Box)

Letakkan kode ini di halaman atau postingan:

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Cari data..." title="Ketik untuk mencari">

<ul id="myUL">
  <li><a href="#">Mohammad Romli - Jombang</a></li>
  <li><a href="#">Samsul Ma'arif - Surabaya</a></li>
  <li><a href="#">Gus Udin - Jombang</a></li>
  <li><a href="#">Gus Mazad - Mojokerto</a></li>
  <li><a href="#">Gus Imron - Pandaan</a></li>
  <li><a href="#">Muhibbudin - Sidoarjo</a></li>
</ul>

3. Tambahkan JavaScript

Letakkan sebelum </body> atau di dalam widget HTML:

<script>
function myFunction() {
    var input, filter, ul, li, a, i;
    input = document.getElementById("myInput");
    filter = input.value.toUpperCase();
    ul = document.getElementById("myUL");
    li = ul.getElementsByTagName("li");

    for (i = 0; i < li.length; i++) {
        a = li[i].getElementsByTagName("a")[0];
        if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
            li[i].style.display = "";
        } else {
            li[i].style.display = "none";
        }
    }
}
</script>

Keunggulan Kotak Pencarian Ini

Dengan menerapkan Membuat Kotak Pencarian Teks di Blogspot, Anda mendapatkan:
  • ✔ Tanpa database (tanpa PHP & MySQL)
  • ✔ Ringan & cepat
  • ✔ SEO-friendly (meningkatkan UX)
  • ✔ Tidak reload halaman
  • ✔ Mudah diterapkan di Blogger

Penutup

Dengan script sederhana ini, Anda sudah bisa membuat kotak pencarian teks di Blogspot tanpa PHP yang bekerja seperti fitur CTRL+F, namun lebih praktis untuk pengunjung.

Silakan dikembangkan sesuai kebutuhan, misalnya untuk:
  • daftar produk
  • direktori data
  • listing artikel

Semoga artikel ini bermanfaat bagi pembaca semua.. 🚀



Membuat Kotak Pencarian Teks di Blogspot (Tanpa PHP, Anti Refresh)
Membuat kotak pencarian data di html, Membuat kotak pencarian data di blogspot, Membuat kotak pencarian data tanpa php, membuat pencarian dinamis dengan php, script php pencarian data mysql, membuat form pencarian dengan bootstrap, cara membuat search engine dengan php dan mysql, membuat pencarian lebih dari satu kata kunci dengan php, membuat menu search bootstrap, pencarian otomatis php, script search php mysqli, cara membuat tombol search di blog, cara membuat search box di blog, cara membuat search box dengan html dan css, cara membuat search engine dengan html, widget search blogger, cara membuat fungsi search di html, membuat menu search bootstrap, cara membuat widget html, cara membuat tombol search di blog, cara membuat search box di blog, cara membuat search box dengan html dan css, cara membuat search engine dengan html, membuat menu search bootstrap, widget search blogger, cara membuat fungsi search di html, cara membuat search box di wordpress

Posting Komentar