√ Cara Menambahkan Fitur Ajax Search Di Blog

Hay teman-teman blogger, Maaf banget kemaren saya tidak sempat upload artikel sebab ada kesibukan didunia offline, Namun kini udah free kok jadi saya akan menuliskan artikel Cara Menambahkan Fitur Ajax Search di Blog.

Keunikan Fitur Ajax Search di Blog yang akan kita buat ini ialah kita hanya perlu menekan icon search, dan uniknya lagi blog tidak akan berpindah halaman sebab hasil pencarian yang kita lakukan akan muncul eksklusif dibawah search box.

Tidak hanya unik dan menarik saja, namun Fitur Ajax Search di Blog yang akan kita buat ini juga 100% responsive yang mana tampilanya akan menyesuaikan dengan layar perangkat yang dipakai visitor. dan juga dilengkapi dengan fitur scroll dan load more.

Fitur Ajax Search di Blog

Seperti yang tadi saya sebutkan sebelumnya, cara kerja fitur ajax search ini ialah memunculkan sejumplah artikel secara otomatis sesuai dengan kata kunci yang kita masukan dikolom pencarian. sebagai misalnya silahkan lihat gambar dibawah ini.

Screnshoot

Ketika kau menuliskan kata kunci “android” dikolom pencarian, maka akan muncul daftar artikel yang terkait dengan kata kunci tersebut.

Nah kalau kau sudah faham bagaimana cara kerjanya, dan tertarik untuk membuatnya, silahkan ikuti panduan Cara Menambahkan Fitur Ajax Search di Blog dibawah ini.

Cara Menambahkan Fitur Ajax Search di Blog

Langkah pertama yang harus kau lakukan untuk menciptakan fitur Ajax Search di Blog ialah membuka dasboard blogger kamu » lalu pilih sajian Tema/Template » Lalu klik tombol Edit HTML.

Kemudian cari code </body> atau &lt;!--</body>--&gt;&lt;/body&gt; Jika kau kesulitan untuk menemukan instruksi tersebut, Gunakan kombinasi tombol CTRL+F secara bersamaan.

Jika code diatas sudah kau temukan, tambahkan script dibawah ini sebelum kode </body> atau &lt;!--</body>--&gt;&lt;/body&gt;

<script src='https://rawcdn.gith4ck.com/Arlina-Design/quasar/master/ajaxsearch.js?live=true&image=true'/>

dan Tambahkan code dibawah ini sebelum code </head> atau code &lt;/head&gt;&lt;!--<head/>--&gt;

<style type='text/css'>
/* Ajax Search */
*,*:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
.ajax-search{padding:20px;background:#fff!important;box-shadow:0 0 15px rgba(0,0,0,0.15);max-height:450px!important}
.ajax-search h3{font-size:14px;font-weight:normal;margin:0 0 20px 0}
.ajax-search li{position:relative;display:inline-block;float:left;width:50%;margin:0 0 10px 0;overflow:hidden}
.ajax-search li h4{font-size:13px;font-weight:normal;margin:0 15px 0 0}
.ajax-search li h4 a{color:#000;transition:all .3s}
.ajax-search li h4 mark{background-color:transparent;color:#000;text-decoration:underline;transition:all .3s}
.ajax-search li h4 a:hover,.ajax-search li h4:hover mark{color:#f44336}
.ajax-search-image{float:left;margin:0 10px 0 0}
.ajax-search-image img{border-radius:5px}
.ajax-search-pager a{display:inline-block;clear:both;overflow:hidden;background:#f44336;color:#fff;font-size:13px;padding:5px 10px;border-radius:3px;margin:15px auto 0 auto}
.ajax-search-pager a:hover{background:#333;color:#fff}
@media screen and (max-width:768px){.ajax-search li{position:relative;display:inline-block;float:left;width:100%;margin:0 0 10px 0;overflow:hidden}}
</style>

Jika sudah selesai jangan lupa klik Simpan Template.

Pengaturan

• 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 memilih 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.
  
  
  
  


• direction
  
  
  
  • Direksi teks pada blog Anda. Nilainya dapat berupa "ltr" atau "rtl"
  
  
  
  


• source
  
  
  
  • Selektor CSS untuk memilih formulir kotak penelusuran yang ingin dijadikan sebagai kotak penelusuran AJAX. Menghilangkan parameter ini akan menciptakan widget secara otomatis menyeleksi elemen formulir pertama yang ditemukan yang mempunyai nilai atribut action berupa /search pada penggalan akhir. Anda dapat memilih sasaran yang lebih spesifik.
  
  
  
  


• container
  
  
  
  • Selektor CSS untuk memilih di mana hasil penelusuran akan ditampilkan. Menghilangkan parameter ini akan menciptakan widget secara otomatis menampilkan hasil penelusuran sempurna di bawah formulir penelusuran.
  
  
  
  


• excerpt
  
  
  
  • Ganti nilainya menjadi true untuk menampilkan ringkasan artikel. Atau gunakan angka untuk memilih maksimal aksara yang akan ditampilkan dalam ringkasan artikel sebelum diakhiri oleh karakter ….
  
  
  
  


• image
  
  
  
  • Ganti nilainya menjadi true untuk menampilkan gambar artikel. Atau gunakan angka untuk memilih ukuran lebar dan tinggi gambar. Anda juga dapat memakai 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 gres ketika diklik.
  
  
  
  


• chunk
  
  
  
  • Digunakan untuk memilih banyaknya hasil temuan yang ditampilkan dalam satu kali penelusuran.
  
  
  
  


• text
  
  
  
  • Label-label yang diharapkan pada tampilan penelusuran.
  
  
  
  

Jika kau ingin menambahkan parameter lain ibarat URL, maka kau hanya perlu menambahkan & sebagai pembatas antar parameter. contoh.

<script src='https://rawcdn.gith4ck.com/Arlina-Design/quasar/master/ajaxsearch.js?live=true&image=true&url=https://www.nama_blog.com'/>

Live Demo

Nah itulah panduan Cara Menambahkan Fitur Ajax Search di Blog, Semoga artikel ini bermanfaat buat teman-teman semuanya.

Sumber aciknadzirah.blogspot.com