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
38 Comments:
Mantap, udah di test di browser apa aja mas?
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.
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.
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.
i'm in the same situation
Demo dengan fitur Google Custom Search → https://dte-project.github.io/blogger/search.cse.html
if i may...
www.cover-addict.com this is my website, after i start to use the CSE my adsense revenue boosted a lot, i think grow up 30% more, i'm using the overlap style, like, when user do a search the results appears over on the same page.
i was reading the documentation you provide from CSE and i saw the autocomplete feature and in your exemple (https://dte-project.github.io/blogger/search.cse.html#gsc.tab=0&gsc.q=sss) i can see the same thing running perfectly.
In the this exemple do i have to create another cse different then my current search bar? I'm not programmer so i took a look in source code and my template don't accept the code from you exemple.
Thank you for all your effort to help the community
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/
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>
PS: You need to revert your current search form to the default blog search form.
i'll try, i'll post the results later!!
→ /2018/09/widget-paginasi-artikel-untuk-blogger.html
makin edan saja artikelnya, maju terus bos ;p
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.
Clear all your search input query to remove the search results!
سلام،
Many visitors do not know to remove the words of query, however, I think instead of it they will leave the site.
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);
}
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
hello
The widet does not work if you search in Arabic
Thanks for the report!
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.
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?
Mas, apakah bisa dibuat inline didalam template saja mas..??
Mas, widget ini kok kalau menggunakan dua kata kunci selalu tidak bisa mendapatkan hasil pencariannya yah..??
Nggak bisa mas. Cek → /2018/05/self-script-configuration-data.html
Sepertinya bug mas. Kalau pakai cara mentahan masih bisa → /feeds/posts/summary?alt=json&q=google+code
Kapan-kapan tak benerin.
Oke mas, soalnya saya kurang paham juga untuk kode2nya. hihi
Kalau modifikasi tampilan aja sih oke saya.
https://github.com/dte-project/blogger/commit/cb897500eb0143077a2c508c3704b3104b8c362b#diff-cdf48528144bffc7feaa2840475a728dR448
Wah keren mas \o/
Sudah saya terapkan kode yang barunya mas. mantap. Jadi bisa lebih spesifik kita mencari artikel di blog kita. Tks mas.
Mas, cara menghilangkan min.css bisa gak mas..?
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..??
Ada beberapa fitur yang sengaja tidak Saya dokumentasikan di sini. Untuk mencegah pemuatan kode CSS, cukup tambahkan parameter ?css=false.
Wah keren mas, sudah saya coba. tks mas.
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.
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);
});
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.
Mas, kalau menambahkan pengecualian no Img dimana yah mas..?
Untuk menonaktifkan gambar tamnbahkan parameter image=false
//dte-project.github.io/blogger/search.min.js?live=true&image=false
Post a Comment
<< Home