Menambahkan Fitur AJAX Penelusuran di Blog
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>Labels: Blogger, JavaScript, Widget
35 Comments:
Mantap, udah di test di browser apa aja mas?
By
illvart, at Wednesday, September 19, 2018 at 1:54:00 PM GMT+7
Sementara baru di peramban Firefox, tapi Saya yakin ini akan bekerja pada semua peramban moderen karena Saya sama sekali tidak melakukan praktik browser sniffing dan feature detection. Ada beberapa fitur JavaScript baru yang mungkin tidak/belum tersedia pada peramban yang sedang dipakai seperti Array.prototype.forEach, Array.prototype.find, HTMLElement.prototype.getBoundingClientRect dan Object.values. Tapi semua itu masih bisa diatasi dengan menambahkan polyfill tanpa perlu mengubah kode sumber pada widget ini.
By
Taufik Nurrohman, at Wednesday, September 19, 2018 at 3:21:00 PM GMT+7
Ini work juga di Chrome. Saya lagi test demonya.
Keren banget. Rasanya pengen pake. Tapi masih agak berat ninggalin Custom Search Engine (CSE)-nya Google. Kalau bukan karena dapet earning dari sana, saya pasti langsung pake metode search di tutorial ini.
By
Igniel, at Wednesday, September 19, 2018 at 8:28:00 PM GMT+7
Dicoba dibuat seperti punya Saya saja mbak, pakai opsi. Satu mengarah ke penelusuran blog dan satu lagi mengarah ke penelusuran CSE (default ke CSE). Widget ini punya fitur kait juga seperti umpan Blogger, hanya saja parameternya bukan callback tapi e.
Coba muat ulang halaman demo sambil melihat ke pesan konsol. Di situ akan muncul informasi-informasi seputar event yang terjadi. Cara pakainya seperti ini:
<script>
function myHookFn(event) {
if (event === "search") {
// `this` mengarah ke elemen `<form>`
console.log(this.q.value);
}
}
</script>
<script src="search.min.js?e=myHookFn"></script>
Di dalam fungsi myHookFn, this akan mengarah ke elemen formulir. Setiap elemen kontrol bisa diakses melalui namanya. Sebagai contoh, this.q akan mengarah ke elemen <input name="q"> di dalam formulir.
Untuk menambahkan opsi, coba ubah markup HTML formulir menjadi seperti ini:
<form action="/search">
<p>
<input name="q" type="text">
<button type="submit">Cari</button>
</p>
<p>
<strong>Cari dengan:</strong>
<br>
<input name="o" type="radio" value="cse" checked> Google
<br>
<input name="o" type="radio" value=""> Blog
</p>
</form>
Sehingga kita bisa mengakses elemen radio di atas melalui this.o seperti ini:
function myHookFn(event) {
if (event === "search") {
if (this.o.value === "cse") {
// Jalankan fungsi untuk menampilkan hasil penelusuran Google
var results = getCSE();
// bla bla bla …
// Tampilkan hasilnya ke dalam wadah
var c = document.querySelector('.ajax-search');
if (c) {
c.firstChild.innerHTML = results;
}
}
}
}
Kurang lebihnya seperti itu. Suatu saat mungkin akan diadakan perubahan pada parameter fungsi tapi setidaknya ide modifikasi untuk widget ini sudah didapatkan.
By
Taufik Nurrohman, at Wednesday, September 19, 2018 at 9:22:00 PM GMT+7
Demo dengan fitur Google Custom Search → https://dte-project.github.io/blogger/search.cse.html
By
Taufik Nurrohman, at Monday, September 24, 2018 at 4:55:00 PM GMT+7
Sorry, I have a question outside the post, there is any possibility to create a post pagination or split post into pages on Blogger by fetching just like WordPress has?
I try this one but isn't functional :'( any help plz?
https://jsfiddle.net/infinyteam/hgejk4q5/
By
John Doe, at Tuesday, September 25, 2018 at 12:07:00 AM GMT+7
No, simply follow this step after you have done the common steps above.
Step 1: Append these URL parameters to the search.min.js file:
?container=%23Blog1&e=myHookFn
Step 2: Insert this script before the search.min.js call:
<script>
(function() {
var cx = 'partner-pub-4884309229437815:4734643671';
var gcse = document.createElement('script');
gcse.async = true;
gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();
</script>
<script>
function myHookFn(e, query, i, cached, container) {
if (e !== "search") return;
var cse = this.o && this.o.value === 'cse',
cse_results = google.search.cse.element.getElement('cse-search-results');
container.style.display = cse ? 'none' : "";
cse_results.clearAllResults();
if (cse && query) {
cse_results.execute(query);
}
}
</script>
Step 3: Modify the search form. Append this markup to your current search form:
<p>
<strong>Search:</strong>
<label><input name="o" type="radio" value="cse" checked="checked"/> Google</label>
<label><input name="o" type="radio"/> Blog</label>
</p>
Step 4: Prepend this markup right after the opening <div class='blog-posts'> in the <b:widget id='Blog1' type='Blog'/>:
<div id="cse-container">
<div
class="gcse-searchresults-only"
data-gname="cse-search-results"
data-enableImageSearch="true"
data-noResultsString="No results."
></div>
</div>
By
Taufik Nurrohman, at Tuesday, September 25, 2018 at 12:22:00 AM GMT+7
PS: You need to revert your current search form to the default blog search form.
By
Taufik Nurrohman, at Tuesday, September 25, 2018 at 12:28:00 AM GMT+7
→ /2018/09/widget-paginasi-artikel-untuk-blogger.html
By
Taufik Nurrohman, at Tuesday, September 25, 2018 at 5:41:00 PM GMT+7
makin edan saja artikelnya, maju terus bos ;p
By
Beben Koben, at Thursday, October 4, 2018 at 7:02:00 PM GMT+7
It is a good widget but incomplete, because there is no option to close the search results, if a user search something using this widget and he wants to remain the page where he is instead of clicking on the search result, then how he can close the results, there should also be close button or cross the close the results as well.
By
Urdu Tubes, at Friday, October 26, 2018 at 10:52:00 PM GMT+7
Clear all your search input query to remove the search results!
By
Taufik Nurrohman, at Friday, October 26, 2018 at 11:03:00 PM GMT+7
سلام،
Many visitors do not know to remove the words of query, however, I think instead of it they will leave the site.
By
Urdu Tubes, at Friday, October 26, 2018 at 11:19:00 PM GMT+7
Then, use the hook feature to append a close button to the search results container → vtm63ubq
var x = document.createElement('a');
x.innerHTML = '×';
x.href = "";
x.addEventListener("click", function(e) {
var self = this.parentNode;
self.parentNode.removeChild(self);
e.preventDefault();
}, false);
x.style.cssText = 'position:absolute;top:.5em;right:.5em;text-decoration:none;line-height:1;';
function myHookFn(e, query, start, cached, container) {
// Insert close button on every search event
e === "search" && container.appendChild(x);
}
By
Taufik Nurrohman, at Saturday, October 27, 2018 at 7:35:00 PM GMT+7
Salam
I added the whole code as working here https://www.books.urdutube.net/
but I am unable to use the myhook function and I am also unable to know here to add the code you told me to show close button.
I also want to show the results on a specific page of my blog, can I do this? Please guide me. Allah Hafez
By
Urdu Tubes, at Sunday, October 28, 2018 at 12:31:00 PM GMT+7
hello
The widet does not work if you search in Arabic
By
seb issam, at Monday, October 29, 2018 at 3:25:00 PM GMT+7
Thanks for the report!
By
Taufik Nurrohman, at Tuesday, October 30, 2018 at 2:43:00 PM GMT+7
As in the example link above, you need to append &e=myHookFn to the script URL. To show the search results on specific page section, see option container.
By
Taufik Nurrohman, at Tuesday, October 30, 2018 at 2:46:00 PM GMT+7
Misalkan, halaman posting kita kosongkan dengan tag kondisional, bahkan halaman posting kita tidak mengindeksnya di seluruh peramban dengan meta noindex, dan lalu <data:post.body/> di dalam halaman selain posting kita potong menjadi sekian karakter huruf, apakah isi seluruh tubuh postingan tetap lolos dari feed dan dapat kita ambil data json mereka? Sehingga kita dapat membuat formulir penelusuran dan mengambil query yang ada di dalam tubuh postingan tanpa khawatir tidak ada halam posting dan/atau halaman selain postingan hanya berisi, semisal, 100 karakter pertama dari post body?
By
lutfiyah, at Monday, December 31, 2018 at 9:07:00 PM GMT+7
Mas, apakah bisa dibuat inline didalam template saja mas..??
By
Mas Iwan, at Saturday, March 9, 2019 at 12:31:00 PM GMT+7
Mas, widget ini kok kalau menggunakan dua kata kunci selalu tidak bisa mendapatkan hasil pencariannya yah..??
By
Mas Iwan, at Sunday, March 10, 2019 at 6:50:00 AM GMT+7
Nggak bisa mas. Cek → /2018/05/self-script-configuration-data.html
By
Taufik Nurrohman, at Monday, March 11, 2019 at 3:12:00 PM GMT+7
Sepertinya bug mas. Kalau pakai cara mentahan masih bisa → /feeds/posts/summary?alt=json&q=google+code
Kapan-kapan tak benerin.
By
Taufik Nurrohman, at Monday, March 11, 2019 at 3:20:00 PM GMT+7
Oke mas, soalnya saya kurang paham juga untuk kode2nya. hihi
Kalau modifikasi tampilan aja sih oke saya.
By
Mas Iwan, at Tuesday, March 12, 2019 at 5:03:00 AM GMT+7
https://github.com/dte-project/blogger/commit/cb897500eb0143077a2c508c3704b3104b8c362b#diff-cdf48528144bffc7feaa2840475a728dR448
By
Taufik Nurrohman, at Thursday, March 14, 2019 at 10:35:00 PM GMT+7
Wah keren mas \o/
Sudah saya terapkan kode yang barunya mas. mantap. Jadi bisa lebih spesifik kita mencari artikel di blog kita. Tks mas.
By
Mas Iwan, at Friday, March 15, 2019 at 6:49:00 AM GMT+7
Mas, cara menghilangkan min.css bisa gak mas..?
By
Mas Iwan, at Friday, March 15, 2019 at 9:57:00 AM GMT+7
Mas mau tanya, saya sudah host sendiri kode-kodenya, dan file jsnya menjadi seperti ini :
https://cdn.staticaly.com/gh/AksesBlog404/Akses404/c7a30390/AJAX_search_v2.min.js
namun setelah saya cek lebih teliti lagi ada file tambahan yang menurut saya tidak saya gunakan, file yang .css seperti berikut :
https://cdn.staticaly.com/gh/AksesBlog404/Akses404/c7a30390/AJAX_search_v2.min.css
Cara menghilangkannya gimana yah mas..??
By
Mas Iwan, at Saturday, April 6, 2019 at 9:16:00 PM GMT+7
Ada beberapa fitur yang sengaja tidak Saya dokumentasikan di sini. Untuk mencegah pemuatan kode CSS, cukup tambahkan parameter ?css=false.
By
Taufik Nurrohman, at Saturday, April 6, 2019 at 9:36:00 PM GMT+7
Wah keren mas, sudah saya coba. tks mas.
By
Mas Iwan, at Sunday, April 7, 2019 at 9:52:00 PM GMT+7
Bagaimana kalau ditambahkan juga fitur dimana user nggak perlu hapus query search dulu baru bisa ganti antara CSE / Blog?
Cukup sekali input query, begitu pindah-pindah radio button hasilnya tetap keluar. Pasti lebih keren.
By
Igniel, at Sunday, June 16, 2019 at 11:45:00 AM GMT+7
var form = document.querySelector('form[action$="/search"][method="get"]');
form.o.forEach(radio => {
radio.addEventListener("change", e => {
// Click the form button on change event
form.q.value && form.querySelector('button').click();
}, false);
});
By
Taufik Nurrohman, at Sunday, June 16, 2019 at 10:28:00 PM GMT+7
Mas, bisa gak kalau kita mau akses pencarian di blog sendiri, dengan satu lagi di blog yang lain, jadi muncul di pencarian yang ada di blog utama saja.
By
Mas Iwan, at Saturday, October 19, 2019 at 9:33:00 PM GMT+7
Mas, kalau menambahkan pengecualian no Img dimana yah mas..?
By
Mas Iwan, at Monday, January 13, 2020 at 9:35:00 AM GMT+7
Untuk menonaktifkan gambar tamnbahkan parameter image=false
//dte-project.github.io/blogger/search.min.js?live=true&image=false
By
Arlina, at Tuesday, July 21, 2020 at 1:38:00 PM GMT+7
Post a Comment
<< Home