Membangun Aplikasi Quick Search dengan JSON Blogger

Tabel Konten
  1. Integrasi Widget ke Blogger 
    1. Konfigurasi Widget 
    2. CSS untuk Tema Minimalis (Layout Dasar) 
Membangun Aplikasi Quick Search dengan JSON Blogger
Membangun Aplikasi Quick Search dengan JSON Blogger

Selain melalui halaman pencarian biasa, Blogger juga mengizinkan kita untuk mengakses posting-posting acak di dalam feed yang dapat disortir berdasarkan kata kunci. Ini bisa dilakukan melalui parameter q.

Format dasar URL feed untuk memanggil data posting dengan sortir berdasarkan kata kunci adalah seperti ini:

http://nama_blog.blogspot.com/feeds/posts/summary?q=Kata Kunci

Yang jika diakses akan menghasilkan halaman berisi daftar posting tersortir berdasarkan kata kunci dari parameter q seperti ini ⇒ Daftar posting dengan kata kunci ‘css’

Dengan memanfaatkan kerangka dasar widget Blogger, event onsubmit pada formulir dan juga penargetan elemen kontainer yang tepat, maka parameter ini memungkinkan kita untuk menciptakan aplikasi quick search. Yaitu sebuah aplikasi yang bisa digunakan untuk mencari artikel/posting dalam sebuah blog tanpa harus berpindah dari halaman asal. Seluruh hasil penelusuran akan tampil pada tempat yang sama!

Pada prinsipnya, hal pertama yang Saya buat adalah sebuah fungsi yang akan menyisipkan elemen <script> secara tidak langsung ke dalam area <head> saat fungsi tersebut dieksekusi. JavaScript yang Saya bangun adalah callback widget Blogger biasa dengan pola sumber yang umum. Saya hanya menambahkan parameter kata kunci pencarian sebagai penyortir posting yang akan dikirim nantinya:

http://nama_blog.blogspot.com/feeds/posts/summary?alt=json-in-script&q=Kata Kunci&callback=functionName

Nilai parameter sumber diambil dari sebuah elemen <input> yang Saya letakkan di dalam formulir. Logikanya seperti ini:

Menyisipkan Nilai Elemen Input ke dalam Parameter 'q'
Menyisipkan Nilai Elemen Input ke dalam Parameter q pada URL Feed
function insertScript() {
    // Membangun elemen <script> untuk disisipkan ke dalam area <head> ...
    // ... dengan parameter kueri yang ditentukan oleh nilai elemen 'feed-q-input'
    var query = document.getElementById('feed-q-input').value,
        s = document.createElement('script');
    s.type = "text/javascript";
    s.src = "//nama_blog.blogspot.com/feeds/posts/summary?q="+query+"&alt=json-in-script&callback=functionName";
    document.getElementsByTagName('head')[0].appendChild(s);
}
<form onsubmit="insertScript();return false;"> ... </form>

Kode aslinya lebih panjang, tapi pada intinya inilah dasar yang Saya gunakan untuk membangun aplikasi pencarian cepat. Anda bisa mengunduh JavaScript dan melihat demonya melalui tombol-tombol ini:

Lihat Demo Unduh JavaScript


Integrasi Widget ke Blogger 

Pertama-tama masuk ke halaman editor HTML template Anda, kemudian salin kode CSS ini dan letakkan di atas kode ]]></b:skin> atau </style>:

#search-form-feed {
  width:200px; /* lebar kotak penelusuran */
  position:relative;
  margin:0 0 10px;
  padding:0;
  font:normal normal 11px/normal Arial,Sans-Serif;
  color:#333;
}

#feed-q-input {
  display:block;
  width:100%;
  border:2px solid #bbb;
  background-color:white;
  padding:5px;
  font:normal bold 13px/normal Tahoma,Arial,Sans-Serif;
  color:#ccc;
  margin:0;
  -webkit-border-radius:4px;
  -moz-border-radius:4px;
  border-radius:4px;
  -webkit-box-shadow:inset 0 1px 5px rgba(0,0,0,.2);
  -moz-box-shadow:inset 0 1px 5px rgba(0,0,0,.2);
  box-shadow:inset 0 1px 5px rgba(0,0,0,.2);
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
}

#feed-q-input:focus {
  border-color:#0D6786;
  color:#333;
  outline:none;
  -webkit-box-shadow:0 0 5px #153E95,0 0 7px #153E95;
  -moz-box-shadow:0 0 5px #153E95,0 0 7px #153E95;
  box-shadow:0 0 5px #153E95,0 0 7px #153E95;
}

#search-result-container {
  width:400px;
  height:300px;
  overflow:auto;
  position:absolute;
  top:100%;
  right:0;
  z-index:999;
  background-color:#E5EDF7;
  border:2px solid white;
  padding:10px 10px 0;
  margin:10px 0 0;
  -webkit-box-shadow:0 1px 2px rgba(0,0,0,.4),0 7px 7px -4px rgba(0,0,0,.4);
  -moz-box-shadow:0 1px 2px rgba(0,0,0,.4),0 7px 7px -4px rgba(0,0,0,.4);
  box-shadow:0 1px 2px rgba(0,0,0,.4),0 7px 7px -4px rgba(0,0,0,.4);
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px;
  display:none;
}

#search-result-container mark {
  background-color:yellow;
  color:black;
}

#search-result-container a {
  text-decoration:none;
  color:#0D3E71;
  font-weight:bold;
  font-size:12px;
  display:block;
}

#search-result-container a:hover {color:#052748}

#search-result-container h4 {
  margin:0 0 10px;
  font:normal bold 12px/normal "Trebuchet MS",Trebuchet,Tahoma,Arial,Sans-Serif;
  color:#B50001;
}

#search-result-container ol {
  background:transparent;
  border:none;
  margin:0 0 10px;
  padding:0;
}

#search-result-container li {
  margin:0 0 1px;
  padding:7px 8px;
  list-style:none;
  border:1px solid #B7C1CE;
  background-color:white;
  overflow:hidden;
  word-wrap:break-word;
}

#search-result-container li img {
  display:block;
  float:left;
  margin:0 10px 4px 0;
  border:1px solid #B7C1CE;
  background-color:#F5F5F5;
  padding:2px;
}

#search-result-loader {
  position:absolute;
  top:100%;
  left:5px;
  z-index:999;
  background-color:#0D6786;
  color:white;
  padding:3px 5px;
  margin:-2px 0 0;
  font:normal bold 10px/normal Arial,Sans-Serif;
  -webkit-border-radius:0 0 3px 3px;
  -moz-border-radius:0 0 3px 3px;
  border-radius:0 0 3px 3px;
  display:none;
}

Setelah itu masuk ke halaman Tata Letak, kemudian tambahkan sebuah elemen halaman HTML/JavaScript. Salin kode ini dan letakkan di dalam formulirnya:

<div id="search-form-feed">
  <form action="/search" onsubmit="return updateScript();">
    <input name="q" type="text" placeholder="Telusuri..." id="feed-q-input" onkeyup="resetField();"/>
  </form>
  <div id="search-result-container"></div>
  <div id="search-result-loader">Loading...</div>
</div>
<script>
//<![CDATA[
var searchFormConfig = {
    url: "http://nama_blog.blogspot.com", // URL Blog
    numPost: 9999, // Jumlah maksimal temuan
    summaryPost: true, // `true` jika ingin menampilkan deskripsi posting
    summaryLength: 400, // Jumlah karakter ringkasan posting
    resultTitle: "Hasil penelusuran untuk kata kunci", // Judul hasil pencarian
    noResult: "No result", // Deskripsi `tak ditemukan`
    resultThumbnail: true, // `true` untuk menampilkan thumbnail posting
    thumbSize: 40, // Ukuran & resolusi thumbnail
    fallbackThumb: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC" // Fallback thumbnail untuk posting tak bergambar
};
//]]>
</script>
<script src="//cdn.rawgit.com/tovic/dte-project/2fd2d2971c3398029ea5e149696447243e7f4d94/blogger-quick-search.js"></script>

Klik Simpan Widget.

Konfigurasi Widget 

Semua opsi sangat umum. Saya yakin Anda bisa dengan cepat mempelajarinya:

OpsiKeterangan
urlURL blog Anda
numPostJumlah posting yang akan ditampilkan dalam hasil pencarian. Nilai 9999 maksudnya adalah Anda mencoba untuk menampilkan semua posting yang ditemukan
summaryPostPilihan untuk menampilkan atau menyembunyikan ringkasan posting dalam hasil pencarian
summaryLengthDigunakan untuk menentukan jumlah karakter ringkasan hasil pencarian
resultTitleJudul hasil pencarian
noResultPeringatan yang menunjukkan bahwa posting tidak ditemukan
resultThumbnailPilihan untuk menampilkan atau menyembunyikan thumbnail posting dalam hasil pencarian
thumbSizeDigunakan untuk menentukan ukuran dan resolusi thumbnail hasil pencarian
fallbackThumbGambar cadangan untuk posting tak bergambar.

CSS untuk Tema Minimalis (Layout Dasar) 

Digunakan sebagai pengganti kode CSS di atas demi kemudahan dalam hal penyesuaian tema:

#search-form-feed {
  width:200px; /* lebar kotak penelusuran */
  position:relative;
  margin:0 0 10px;
  padding:0;
  font:normal normal 11px/normal Arial,Sans-Serif;
  color:#333;
}

#feed-q-input {
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
  display:block;
  width:100%;
  border:1px solid #bbb;
  background-color:white;
  padding:5px 5px;
  font:inherit;
  font-size:13px;
  margin:0;
}

#search-result-container {
  width:400px;
  height:300px;
  overflow:auto;
  position:absolute;
  top:100%;
  left:0; /* ganti menjadi `right:0` untuk mendorong kontainer ke kanan */
  z-index:9999;
  border:1px solid #ccc;
  padding:10px 10px 0;
  margin:10px 0 0;
  -webkit-box-shadow:0 3px 5px rgba(0,0,0,.2);
  -moz-box-shadow:0 3px 5px rgba(0,0,0,.2);
  box-shadow:0 3px 5px rgba(0,0,0,.2);
  display:none;
}

#search-result-container mark {
  font:inherit;
  display:inline;
  background-color:#ff0;
  color:black;
}

#search-result-container a {
  text-decoration:none;
  font-weight:bold;
  font-size:110%;
  display:block;
}

#search-result-container h4 {
  margin:0 0 10px;
  font:inherit;
  font-weight:bold;
  color:#B50001;
}

#search-result-container ol {
  background:none;
  border:none;
  margin:0 0 10px;
  padding:0;
}

#search-result-container li {
  margin:0 0 15px;
  list-style:none;
  overflow:hidden;
  word-wrap:break-word;
  padding-left:65px;
}

#search-result-container li img {
  display:block;
  float:left;
  margin:0 0 2px -55px;
  border:1px solid #ccc;
  padding:2px;
}

#search-result-loader {
  position:absolute;
  top:100%;
  left:5px;
  z-index:9999;
  margin-top:4px;
  font-size:10px;
  display:none;
}

56 Komentar

  • IRIL SAGITA

    Kalau untuk hasil penelusurannya muncul di kolom posting (main wrapper), sedangkan kotak penelusurannya aku taruh di widget blog gimana caranya kak ?

    • Taufik Nurrohman

      Menaruh di dalam #main-wrapper bisa, tapi cara meletakkannya itu yang harus tahu sendiri tempatnya. Di sini Saya contohkan menaruh elemen #search-result-container di sebelah atas #main-wrapper. JavaScript harus dipindahkan sejauh mungkin dari kontainer hasil penelusuran, yaitu tepat di atas tag penutup </body>.
      Lalu hapus juga kode ini (khusus pada bagian CSS Posisi), supaya posisi kontainer tidak melayang/absolut lagi:

      #search-result-container {
      width:400px;
      height:300px;
      overflow:auto;
      /* position:absolute;
      top:100%;
      right:0;
      z-index:999; */
      margin:10px 0 30px;
      background-color:#E5EDF7;
      border:2px solid white;
      padding:10px 10px 0;
      margin:10px 0 0;
      ...
      display:none;
      }

      Demo: http://jsfiddle.net/tovic/GJc3F/

  • Kang Kapuk

    Mantab juga ini Bang.....
    Trus, kl kita udah 'search' kata kunci...
    Cara Closednya gimana Bang.....?

    • Taufik Nurrohman

      Tekan tombol backspace berkali-kali sampai formulirnya kosong.

    • Anonim

      iya close nya?
      ijin pakek ya mas ganteng :p
      mantab benerr

  • Unknown

    wah baru lagi nih.. \o/

  • Beben Koben

    :-bd

  • Putra

    req, biar pencarian sedetail mungkin.. komentarnya diikutin jd target searchingnya sekalian mas :)

  • Unknown

    Thanks.. sangat berguna :D n keren bang \o/

  • Anonim

    Itu akan lebih baik untuk memiliki tombol close pada search-result-container. Anda bisa melakukan itu?

    • Taufik Nurrohman

      Untuk menutup hasil penelusuran, cukup tekan tombol backspace berkali-kali sampai tidak ada teks lagi di dalam kotak pencarian. Jika ingin menggunakan versi hasil penelusuran yang dilengkapi dengan tombol penutup, Anda bisa mencoba yang satu ini (dengan JQuery).

      • Anonim

        bahwa salah satu tidak bekerja di blog saya, dan saya suka lebih baik satu ini, karena thumbnail dan ringkasan posting. Saya bisa menggunakan backspace tetapi akan lebih mudah dengan tombol dekat.

  • Anonim

    mantab mas, untuk postingan di page/halaman apa akan terdeksi juga mas ? terima kasih sebelumnya..salam kenal

    • Taufik Nurrohman

      Tidak.

      • budkalon

        Kalau kotak komentar bisa terdeteksi juga gak? Ke dalam hasil pencarian?

        • Taufik Nurrohman

          Kalau ingin menampilkan hasil penelusuran berupa komentar, gunakan feed komentar, bukan feed posting:

          http://nama_blog.blogspot.com/feeds/comments/summary?q=Kata Kunci
          • budkalon

            Oh, jadi form komentarnya harus dikhususkan ya? terima kasih :D

  • MUX SPARROW

    \o/ keren, Mas! udah ane terapin di blog sarang :D

  • Unknown

    Mas Taufik, saya sudah menerapkan sesuai tutorial diatas, dan saya meletakkan kode HTML nya di Edit HTML tepatnya disamping menu. Nah, ketika saya test quick search nya kok hasilnya malah muncul dibawah footer bukannya dibawah kotak searchnya?

    Mohon pencerahannya Mas Taufik... :)

  • Unknown

    mas kalo saya pengen masukkin hasil pencariannya dalam bentuk animasi popout yang muncul di tengah gimana mas?

    • Taufik Nurrohman

      Buat tampilan elemen #search-result-container supaya tampak seperti kotak dialog.

      • Unknown

        jadi cukup di css-nya aja yang diganti mas? ga perlu ganti kode jquery-nya?

  • Unknown

    Sebelumnya terima kasih untuk Tutorialnya mas Taufik. :-bd
    berhasil diterapkan tapi tombol closenya ketutupan sama kalimat hasil pencariannya!

    sama cara penempatan kotak pencariaan dimana ngaturnya mas biar bisa masuk kedalam head bloggernya, soalnya ditempatku masuknya cuman setengah...!

    Mohon penjelasannya... :-bd

    • Taufik Nurrohman

      Posisi statis, lebar otomatis dan perataan teks ke kiri:

      #search-result-container {
      position:static;
      width:auto;
      text-align:left;
      /* ... */
      }
  • Unknown

    Thats What Im Talking About.. \o/
    Terimakasih mas Taufik. :Q

    Solusi yg kedua belum mas, itu kotak search nya tampil setengah di dalam head blogger, setengahnya diluar head blogger.
    cara memasukan kedalam head blogger sepenuhnya seperti apa?

  • Unknown

    Belum mas, masih setengah-setengah!
    Cek aja ke TKP metaland89.blogspot.com

  • Unknown

    keren ni blognya

  • Admin

    mas cara gabungin Menu Floating dengan Searcbox ini gimana mas, udah tak coba di blogku hasilnya malah di bawah menu floating .. margin saya kurangin jadi minus yang ada malah di belakangnya mohon pencerahannya mas..?? h--p://ceseses.blogspot.com

  • Unknown

    gan, kalau misalnya mau ditambahin tombol bagaimana ya gan caranya?

  • MO Min Pin Rescue

    If the thumbnails are stretched out and distorted, as shown here: http://www.shereadsnewadult.com how can I fix this please?

  • Sandi Sunday

    thanks infonya bang tapi btw gimana caranya buat ngilangin jarak antar tulisan di search resultnya soalnya punya saya jadi kayak gini

  • Anonim

    Yang ini diperlukan :yaya:

  • Asfar

    lapor om googlecodenya rusak mohon diperbaiki ya :)

  • Agratitudesign

    Gimana ya cara membatasi jumlah item search page dalam pagination?

    • Taufik Nurrohman

      Bisa dilakukan dengan cara membatasi jumlah maksimal temuan pada bagian ini:

      numPost: 9999

      Tapi resikonya, kalau temuan yang dicari ternyata ada di urutan yang lebih besar dari angka maksimal yang ditentukan, hasil temuan tidak akan bisa tampil/terjangkau. Kecuali kalau kita menambahkan navigasi pada widget ini, tapi itu lain cerita dan akan lebih rumit lagi kodenya.

      • Agratitudesign

        Sebelumnya terima kasih atas ide yang sangat inspiratif...! sebenarnya, search page navigasi yang saya maksud seperti pada Google Blog Search dari basic gadget blogger. jika bisa seperti itu akan lebih sempurna ditaruh di content wrapper.

  • Unknown

    ERROR

  • Unknown

    istimewa.. terima kasih banyak mas.. saya juga gunain ini ke blog saya.. dan penerapan search yg ada disini ternyata di gunakan juga untuk setting template CODY yang dijual di themeforest .. #salut ma dte.we.id

    • Unknown

      http://www.softglad.com/2013/08/json-search-box-for-blogger.html
      bukan dte gan yg pertam akli ngepost ane lihat scriptnya persis sama buatan orang india..
      yg ane bingungin kok disini gag disebutin sumbernya

      • Taufik Nurrohman

        Punya beliau:

        Punya Saya:

        Halaman proyek lengkap Saya:

        https://code.google.com/p/dte-project

        dte-project.googlecode.com adalah hasil re-upload dari halaman proyek lama Saya yang sekarang sudah diblokir (reader-download.googlecode.com) → /2013/12/daftar-salinan-berkas-widget-halaman.html

        Ini salah satu alasan mengapa Saya tidak suka dengan orang yang punya kebiasaan menggonta-ganti atribusi hasil karya untuk kepentingannya sendiri. Menghapus atribusi untuk menghilangkan jejak Saya dari dalam kode sumber boleh saja, tapi mengganti atribusi dengan atribusi yang lain itu tidak boleh. Kecuali kalau sudah dimodifikasi.

      • Taufik Nurrohman

        Tanggal komentar pertama:

        Tanggal penerbitan komentar tidak akan bisa diedit seperti halnya tanggal penerbitan posting.

  • Unknown

    masih bingung cara menstyle scrollbarnya (ane pake flexcroll) udah pake cara kaya gini
    <div class='flexcroll'><div id='search-result-container'/></div>
    masih tetep gag bisa.
    ane hapus tu div class flexcrollnya terus waktu ane cek pake console di inspector chrome dengan kode
    fleXenv.fleXcrollMain('search-result-container');
    bisa tetapi waktu ane coba search lagi (keadaan belum ane reload) scrollnya gag nongol. :p
    mohon bantuanya :)

    • Taufik Nurrohman

      Setiap kali menggunakan plugin scrollbar, selalu cari metode yang bernama refresh atau reload, itu fungsinya untuk meng-kalkulasi ulang perhitungan posisi scrollbar kalau isi kontainer telah bertambah atau berkurang. Untuk flexscroll ada namanya updateScrollBars()

      Letakkan beberapa baris setelah perintah innerHTML:

      resultContainer.innerHTML = skeleton;
      resultLoader.style.display = "none";
      resultContainer.style.display = "block";
      // refresh ...
      fleXenv.updateScrollBars();
  • Anonim

    mantap gan ini postingannya nambah referensi juga :) \o/ \o/ \o/

    http://shaggyweb.blogspot.com

  • Unknown

    trimakasih atas tutorial & scriptnya kaka..., wigetnya saya pasang di blog.. ;)

  • Unknown

    Akhirnya dpt jga ygvdi cari, manyap mas

  • ghufron

    mas saya mau tanya, kalo saya mau menambahkan fitur sortir berdasarkan label dan tanggal, apa bisa dengan cara ini ?

    
    newScript.src = config.url+"/feeds/posts/summary?alt=json-in-script&q="+val+"&max-results="+config.numPost+"&callback=showResult";
    

    diganti dengan :

    
    ...
    var script = getId('search-feed-script'),
    newScript = document.createElement('script'),
    tagoption = label.value,
    orderbyoption = orderby.value,
    key = input.value,
    orderby = (orderbyoption !== "") ? '&orderby=' + orderbyoption : "",
    tag = (tagoption !== "") ? '/-/' + tagoption : "";
    newScript.id = "search-feed-script";
    newScript.type = "text/javascript";
    if (tagoption !== "") {
    newScript.src = config.url + "/feeds/posts/summary" + tag + "?alt=json-in-script" + orderby + "&max-results=" + config.numPost + "&callback=showResult";
    } else if (orderby !== "") {
    newScript.src = config.url + "/feeds/posts/summary?alt=json-in-script" + orderby + "&max-results=" + config.numPost + "&callback=showResult";
    } else {
    newScript.src = config.url + "/feeds/posts/summary?alt=json-in-script&q=" + key + "&max-results=" + config.numPost + "&callback=showResult";
    }
    script.parentNode.removeChild(script);
    document.getElementsByTagName('head')[0].appendChild(newScript);
    return false;
    ...
    
  • Game Cover

    hi, the javascript is offline, can we have it again?

    • Taufik Nurrohman

      Is now online :)

      • Game Cover

        Thank you my friend, but i love this one http://www.dte.web.id/2012/11/kotak-penelusuran-blogger-dengan-ajax.html

        Very helpfull, thanks a lot

Komentar telah ditutup.