Membuat Kotak Pencarian Teks di Blogspot

Daftar Isi [Lihat]

Membuat Kotak Pencarian Teks di Blogspot - artikel kali ini, kita akan mencoba membuat kotak pencarian teks / data di halaman blog / website kita, seperti penggunan tombol Ctrl+F pada browser.

Seperti pada pencarian data secara dinamis di halaman menggunakan menggunakan php msyql pada umumnya, namun kali ini kita akan membuat kotak pencarian teks di halaman yang tidak support php mysql dan diterapkan di halaman blogspot, menggunakan javascript.

Perbedaan ketika membuat Kotak Pencarian Teks dengan kotak pencarian kebanyakan adalah, kotak pencarian ini hanya mencrawl pada halaman (list) saja dan ini bisa diterapkan di halaman blogspot.

Dan halaman blog tidak terjadi refresh.
Dan juga hasil pencarian akan tampil langsung di bawahnya.

Ide awal ingin membuat kotak pencarian teks di blogspot ini bermula karena artikel yang saya tulis adalah hanya berupa daftar nama-nama tempat.

Dan ketika visitor mencari nama yang ada di halaman, mereka harus scroll ke bawah sampai ketemu nama yang dicari..

Akhirnya saya menemukan skrip untuk pencarian tersebut / find text / CTRL+F.

Skrip ini bersumber dari www.w3schools.com - Filter/Search List

Baca Juga

• Cara menampilkan widget di halaman tertentu
• Menyisipkan kata / kalimat di meta description blogspot

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

Membuat Kotak Pencarian Teks di Blogspot

Seperti contoh dibawah ini:

• Mohammad Romli - Jombang
• Samsul Ma'arif - Surabaya
• Gus Udin - Jombang
• Gus Mazad - Mojokerto
• Gus Imron - Pandaan
• Muhibbudin - Sidoarjo
• Ahmad Lathifi - Mojokerto
• Jainuri - Sidoarjo
• Soleh Kelikulat - Jakarta
• Athourrohman - Jombang
• Miftah - Jombang
• Abdul Hasib - Jombang
• Hartono - Jombang
• Cak Amin - Surabaya
• Wahyu Nazily - Surabaya
• Manduki - Nganjuk
• Tholib - Pasuruan
• Shofiyun - Mojokerto

Mari memulai..
Membuat kotak pencarian teks di blogspot

KODE CSS:
<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; /* Prevent double borders */
  background-color: #f6f6f6;
  padding: 12px;
  text-decoration: none;
  font-size: 18px;
  color: black;
  display: block
}
#myUL li a:hover:not(.header) {
  background-color: #eee;
}
</style>

KODE HTML:
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">
<ul id="myUL">
  <li><a href="#">NAMA 1</a></li>
  <li><a href="#">NAMA 2</a></li>

  <li><a href="#">NAMA 3</a></li>

  <li><a href="#">NAMA 4</a></li>

  <li><a href="#">NAMA 5</a></li>

  <li><a href="#">NAMA 6</a></li>

</ul>

JAVASCRIPT:

<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>

Semoga artikel tentang Membuat kotak pencarian teks di blogspot ini bermanfaat bagi pembaca semua..

Membuat kotak pencarian teks di blogspot

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

Related Posts