Friday, September 29, 2017

Membuat kotak pencarian teks di blogspot

Sobat blogger..
Artikel kali ini, kita akan mencoba membuat kotak pencarian teks di halaman blog kita, seperti penggunan tombol Ctrl+F pada browser.
Perbedaan dari kotak pencarian kebanyakan adalah, kotak pencarian ini hanya mencrawl pada halaman (list) saja.
Dan halaman blog tidak terjadi refresh.
Dan juga hasil pencarian akan tampil langsung di bawahnya.

Ide awal dari pemasangan kotak pencarian 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 Dan uniknya, skrip ini dapat diterapkan di blogspot.. asik kan?

Seperti contoh dibawah ini:




Mari memulai..

KODE CSS:
<style>
* {
  box-sizing: border-box;
}
#myInput {
  background-image: url('https://3.bp.blogspot.com/-6A8n_lbi-to/Wc4F5HfBhjI/AAAAAAAABqg/BuWGbJmVBwM8un68YrazL0Y5HVLTlgQqwCLcBGAs/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 bermanfaat..

IBX59E89E6F98B8E