Menambahkan Fitur AJAX Penelusuran di Blog

Tabel Konten
  1. Integrasi Widget ke Blogger 
    1. Pengaturan 
Fitur AJAX Penelusuran di Blogger
Fitur kotak penelusuran AJAX 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.

Lihat Demo


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 

OpsiKeterangan
liveJika bernilai false, maka pengguna perlu mengeklik tombol Telusuri pada formulir atau menekan tombol Enter pada papan ketik untuk memulai penelusuran.
urlGanti nilainya dengan alamat blog Anda atau alamat blog orang lain yang ingin Anda tampilkan kontennya.
idAlternatif 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"
directionDireksi teks pada blog Anda. Nilainya bisa berupa "ltr" atau "rtl".
sourceSelektor 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.
containerSelektor 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]
excerptGanti nilainya menjadi true untuk menampilkan ringkasan artikel. Atau gunakan angka untuk menentukan maksimal karakter yang akan ditampilkan dalam ringkasan artikel sebelum diakhiri oleh karakter .
imageGanti 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".
targetJika bernilai "_blank", semua tautan akan terbuka di tab/jendela baru saat diklik.
chunkDigunakan untuk menentukan banyaknya hasil temuan yang ditampilkan dalam satu kali penelusuran.
textLabel-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&amp;chunk=100&amp;text[loading]=Memuat%E2%80%A6"></script>

44 Komentar

  • Muhammad Nur Fuad

    Mantap, udah di test di browser apa aja mas?

    • Taufik Nurrohman

      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.

  • Igniel

    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.

    • Taufik Nurrohman

      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.

    • Addict Covers

      i'm in the same situation

    • Taufik Nurrohman

      Demo dengan fitur Google Custom Searchhttps://dte-project.github.io/blogger/search.cse.html

      • Addict Covers

        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

        • Taufik Nurrohman

          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>
        • Taufik Nurrohman

          PS: You need to revert your current search form to the default blog search form.

          • Addict Covers

            i'll try, i'll post the results later!!

      • Igniel

        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.

        • Taufik Nurrohman

          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);
          });
  • John Doe

    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/

  • Beben Koben

    makin edan saja artikelnya, maju terus bos ;p

  • Urdu Tubes

    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.

    • Taufik Nurrohman

      Clear all your search input query to remove the search results!

      • Urdu Tubes

        سلام،
        Many visitors do not know to remove the words of query, however, I think instead of it they will leave the site.

        • Taufik Nurrohman

          Then, use the hook feature to append a close button to the search results container → vtm63ubq

          var x = document.createElement('a');
          x.innerHTML = '&times;';
          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);
          }
          • Urdu Tubes

            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

            • Taufik Nurrohman

              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.

  • seb issam

    hello
    The widet does not work if you search in Arabic

  • lutfiyah

    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 Iwan

    Mas, apakah bisa dibuat inline didalam template saja mas..??

  • Mas Iwan

    Mas, widget ini kok kalau menggunakan dua kata kunci selalu tidak bisa mendapatkan hasil pencariannya yah..??

    • Taufik Nurrohman

      Sepertinya bug mas. Kalau pakai cara mentahan masih bisa → /feeds/posts/summary?alt=json&q=google+code

      Kapan-kapan tak benerin.

      • Mas Iwan

        Oke mas, soalnya saya kurang paham juga untuk kode2nya. hihi
        Kalau modifikasi tampilan aja sih oke saya.

        • Taufik Nurrohman

          https://github.com/dte-project/blogger/commit/cb897500eb0143077a2c508c3704b3104b8c362b#diff-cdf48528144bffc7feaa2840475a728dR448

          • Mas Iwan

            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 Iwan

            Mas, cara menghilangkan min.css bisa gak mas..?

  • Mas Iwan

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

    • Taufik Nurrohman

      Ada beberapa fitur yang sengaja tidak Saya dokumentasikan di sini. Untuk mencegah pemuatan kode CSS, cukup tambahkan parameter ?css=false.

      • Mas Iwan

        Wah keren mas, sudah saya coba. tks mas.

  • Mas Iwan

    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 Iwan

    Mas, kalau menambahkan pengecualian no Img dimana yah mas..?

    • Arlina

      Untuk menonaktifkan gambar tambahkan parameter image=false

      //dte-project.github.io/blogger/search.min.js?live=true&image=false
      • Nurhidayat

        Owalah dari sini ternyata kak Arlina dapatnya, kok bisa saya nyasar kesini wkwkw.

  • Nurhidayat

    Mas boleh saya pake tapi script-nya saya ubah?

    • Taufik Nurrohman

      Boleh tapi dengan syarat:

      1. Teks atribusi dihapus semua.
      2. Atau, kalau mau mempertahankan atribusi asli buat dengan format seperti ini: “kode dari A telah dimodifikasi oleh B”

      Yang penting atribusi jangan sampai diganti seluruhnya karena itu sudah masuk wilayah plagiasi. Saya lebih suka kalau pengembang menghapus semua atribusi Saya.

  • Helmi Fauziridwan

    Terima kasih, tinggal add HTML/JavaScript weidget, AJAX search langsung aktif. BTW saya pakai template dari Namina Kiky…

  • Helmi Fauziridwan

    Sudah saya coba di Chrome Windows dan Android working 100%… Sekali lagi terima kasih, blog saya menjadi lebih profesional pakai widget ini… Semoga terus aktif widget ini…

    • Taufik Nurrohman

      Semua kode yang diunggah ke GitHub kemungkinan besar akan bertahan selamanya.






Semua kode HTML akan dihapus kecuali kode-kode HTML yang dituliskan sebagai contoh. Gunakan sintaks Markdown untuk memberi gaya pada komentar.


Batal