Menambahkan Fitur AJAX Penelusuran di Blog
Tabel Konten
Artikel ini merupakan hasil akumulasi dari temuan-temuan Saya tentang bagaimana kita bisa menggunakan JSON Blogger untuk menciptakan fitur penelusuran dinamis hanya dengan memanfaatkan parameter q pada tautan umpan. Fitur ini dapat diterapkan pada semua tema dan tidak bergantung pada perpustakaan JavaScript apapun.
Integrasi Widget ke Blogger
Untuk mengaktifkan fitur penelusuran AJAX pada blog, Anda tidak perlu menambahkan markup HTML apapun ke dalam tema, karena widget ini akan menggunakan kotak penelusuran yang ada sebagai kotak penelusuran AJAX. Yang perlu Anda lakukan hanya menambahkan sebuah elemen halaman HTML/JavaScript dengan konten berupa kode ini:
<script src="//dte-project.github.io/blogger/search.min.js?live=true"></script>Klik Simpan Setelan. Fitur penelusuran AJAX sekarang sudah siap untuk digunakan!
Jika kotak penelusuran AJAX tidak bekerja, mungkin itu karena Anda menambahkan widget ini sebelum widget kotak penelusuran. Untuk membuatnya bisa bekerja, Anda perlu meletakkan widget ini setelah widget kotak penelusuran. Selengkapnya bisa dibaca di sini.
Pengaturan
| Opsi | Keterangan |
|---|---|
live | Jika bernilai false, maka pengguna perlu mengeklik tombol Telusuri pada formulir atau menekan tombol Enter pada papan ketik untuk memulai penelusuran. |
url | Ganti nilainya dengan alamat blog Anda atau alamat blog orang lain yang ingin Anda tampilkan kontennya. |
id | Alternatif untuk menentukan sumber data selain dengan url. Ganti nilainya dengan ID blog Anda atau ID blog orang lain yang ingin Anda tampilkan kontennya. ID harus dituliskan sebagai string. Menambahkan parameter id akan mengabaikan nilai parameter url. Contoh: id="4890949828965961610" |
direction | Direksi teks pada blog Anda. Nilainya bisa berupa "ltr" atau "rtl". |
source | Selektor CSS untuk menentukan formulir kotak penelusuran yang ingin dijadikan sebagai kotak penelusuran AJAX. Menghilangkan parameter ini akan membuat widget secara otomatis menyeleksi elemen formulir pertama yang ditemukan yang memiliki nilai atribut action berupa /search pada bagian akhir. Anda bisa menentukan target yang lebih spesifik, misalnya source=%23BlogSearch1%20form untuk menyeleksi elemen formulir pada widget kotak penelusuran yang memiliki ID #BlogSearch1. |
container | Selektor CSS untuk menentukan di mana hasil penelusuran akan ditampilkan. Menghilangkan parameter ini akan membuat widget secara otomatis menampilkan hasil penelusuran tepat di bawah formulir penelusuran. [demo] |
excerpt | Ganti nilainya menjadi true untuk menampilkan ringkasan artikel. Atau gunakan angka untuk menentukan maksimal karakter yang akan ditampilkan dalam ringkasan artikel sebelum diakhiri oleh karakter …. |
image | Ganti nilainya menjadi true untuk menampilkan gambar artikel. Atau gunakan angka untuk menentukan ukuran lebar dan tinggi gambar. Anda juga bisa menggunakan parameter standar gambar Google untuk memanipulasi ukuran, seperti "s100", "s100-c", dan "w100-h50". |
target | Jika bernilai "_blank", semua tautan akan terbuka di tab/jendela baru saat diklik. |
chunk | Digunakan untuk menentukan banyaknya hasil temuan yang ditampilkan dalam satu kali penelusuran. |
text | Label-label yang diperlukan pada tampilan penelusuran. |
Parameter-parameter di atas dapat Anda tambahkan sebagai parameter URL setelah nama berkas search.min.js:
<script src="search.min.js?live=true&chunk=100&text[loading]=Memuat%E2%80%A6"></script>