Fitur Ajax ini mempunyai banyak kelebihan kalau dibandingkan dengan opsi penelusuran biasa, salah satunya yakni dapat 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.
Cara Menambahkan Fitur Ajax Search di Blog
Seperti yang aku sebutkan sebelumnya, cara kerja dari Fitur Ajax Search ini yakni memunculkan sejumlah artikel secara otomatis sesuai dengan kata kunci yang kita tulis di dalam kolom penelusuran. Contohnya menyerupai gambar di bawah ini :
Ketika teman menulis kata kunci game di kolom penelusuran, maka yang keluar yakni daftar dari artikel yang terkait dengan kata kunci tersebut. Nah sudah faham kan? Oke.
Pertama buka Blogger > Klik sajian Tema dan klik Edit HTML. Selanjutnya, teman hanya perlu menambahkan link di bawah ini sebelum </body> atau <!--</body>--></body> dan otomatis akan pribadi bekerja pada kolom penelusuran di blog sobat.
<script src='https://rawcdn.githack.com/Arlina-Design/quasar/master/ajaxsearch.js?live=true&image=true'/>Dan aku juga telah sedikit memodifikasi dengan menambahkan CSS supaya tampilannya terlihat lebih menarik. Tambahkan isyarat 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, teman dapat kunjungi link Result di bawah ini, di link tersebut aku menambahkan parameter url dari blog www.teknomatch.com.
Pengaturan
Berikut beberapa opsi parameter dari Fitur Ajax Search yang dapat teman gunakan sesuai kebutuhan.
| Opsi | Keterangan |
|---|---|
live | Jika opsi ini bernilai false, maka artikel tidak akan muncul secara otomatis hingga teman menekan tombol search atau enter. |
url | Ganti nilainya dengan alamat blog teman atau alamat blog lain yang ingin teman tampilkan. |
image | Ganti nilainya menjadi true untuk menampilkan gambar artikel. |
target | Jika bernilai "_blank", semua link akan terbuka di tab baru. |
Untuk opsi selengkapnya, teman dapat kunjungi blog DTE :] di artikel ini
Contoh dari opsi paramenter yang aku tambahkan menyerupai : live=true dan image=true
<script src='https://rawcdn.githack.com/Arlina-Design/quasar/master/ajaxsearch.js?live=true&image=true'/>Jika teman ingin menambahkan parameter lain menyerupai url, teman hanya perlu menambahkan & sebagai pembatas antar parameter. Contohnya menyerupai ini :
<script src='https://rawcdn.githack.com/Arlina-Design/quasar/master/ajaxsearch.js?live=true&image=true&url=https://www.nama_blog.com'/>Sebaiknya nanti teman hosting ulang isyarat yang ada di link ini https://rawcdn.githack.com/Arlina-Design/quasar/master/ajaxsearch.js dan cari ID blog ini 5382492177374539930 lalu ganti dengan ID blog sobat.
Oke, sekian dari aku wacana Cara Menambahkan Fitur Ajax Search di Blog. Semoga bermanfaat dan wassalam.