Fitur Ajax ini memiliki banyak kelebihan jika dibandingkan dengan opsi penelusuran biasa, salah satunya adalah bisa memuat daftar artikel secara otomatis tanpa perlu menekan tombol search atau enter sesuai dengan kata kunci yang kita cari. Cukup menarik bukan? Bagi yang penasaran, mari kita simak tips berikut ini.
Tips Mudah Menambahkan Ajax Search pada Blog
Seperti yang saya sebutkan sebelumnya, cara kerja dari Fitur Ajax Search ini adalah memunculkan sejumlah artikel secara otomatis sesuai dengan kata kunci yang kita tulis di dalam kolom penelusuran. Contohnya seperti gambar di bawah ini :
Ketika sobat menulis kata kunci game di kolom penelusuran, maka yang keluar adalah daftar dari artikel yang terkait dengan kata kunci tersebut. Nah sudah faham kan? Oke.
Pertama buka Blogger > Klik menu Tema dan klik Edit HTML. Selanjutnya, sobat hanya perlu menambahkan link di bawah ini sebelum </body> atau <!--</body>--></body> dan otomatis akan langsung bekerja pada kolom penelusuran di blog sobat.
<script src='https://cdn.jsdelivr.net/gh/Arlina-Design/quasar@master/ajaxsearch.js?live=true&image=true'/>Dan saya juga telah sedikit memodifikasi dengan menambahkan CSS agar tampilannya terlihat lebih menarik. Tambahkan kode di bawah ini sebelum </head> atau </head><!--<head/>-->
<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>Klik Simpan tema dan selesai.
Untuk melihat hasilnya, sobat bisa kunjungi link Result di bawah ini, di link tersebut saya menambahkan parameter url dari blog filmsm4.blogspot.com.
Pengaturan
Berikut beberapa opsi parameter dari Fitur Ajax Search yang bisa sobat gunakan sesuai kebutuhan.
| Opsi | Keterangan |
|---|---|
live | Jika opsi ini bernilai false, maka artikel tidak akan muncul secara otomatis sampai sobat menekan tombol search atau enter. |
url | Ganti nilainya dengan alamat blog sobat atau alamat blog lain yang ingin sobat tampilkan. |
image | Ganti nilainya menjadi true untuk menampilkan gambar artikel. |
target | Jika bernilai "_blank", semua link akan terbuka di tab baru. |
Untuk opsi selengkapnya, sobat bisa kunjungi blog DTE :] di artikel ini
Contoh dari opsi paramenter yang saya tambahkan seperti : live=true dan image=true
<script src='https://cdn.jsdelivr.net/gh/Arlina-Design/quasar@master/ajaxsearch.js?live=true&image=true'/>Jika sobat ingin menambahkan parameter lain seperti url, sobat hanya perlu menambahkan & sebagai pembatas antar parameter. Contohnya seperti ini :
<script src='https://cdn.jsdelivr.net/gh/Arlina-Design/quasar@master/ajaxsearch.js?live=true&image=true&url=https://www.nama_blog.com'/>Sebaiknya nanti sobat hosting ulang kode yang ada di link ini https://cdn.jsdelivr.net/gh/Arlina-Design/quasar@master/ajaxsearch.js dan cari ID blog ini 5382492177374539930 kemudian ganti dengan ID blog sobat.
Oke, sekian dari saya tentang Tips Mudah Menambahkan Ajax Search pada Blog. Semoga bermanfaat dan salam bahagia.