Cara Menambahkan Fitur Ajax Search Di Blog
Assalamualaikum, kali ini akan mengembangkan tips Cara Menambahkan Fitur Ajax Search di Blog yang aku temukan di blognya Taufik Nurrohman (www.dte.web.id).
Fitur Ajax ini mempunyai banyak kelebihan kalau dibandingkan dengan opsi penelusuran biasa, salah satunya ialah 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.
Seperti yang aku sebutkan sebelumnya, cara kerja dari Fitur Ajax Search ini ialah memunculkan sejumlah artikel secara otomatis sesuai dengan kata kunci yang kita tulis di dalam kolom penelusuran. Contohnya ibarat gambar di bawah ini :
Ketika sahabat menulis kata kunci game di kolom penelusuran, maka yang keluar ialah 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, sahabat hanya perlu menambahkan link di bawah ini sebelum </body> atau <!--</body>--></body> dan otomatis akan eksklusif bekerja pada kolom penelusuran di blog sobat.
Dan aku juga telah sedikit memodifikasi dengan menambahkan CSS biar tampilannya terlihat lebih menarik. Tambahkan arahan di bawah ini sebelum </head> atau </head><!--<head/>-->
Klik Simpan tema dan selesai.
Untuk melihat hasilnya, sahabat dapat kunjungi link Result di bawah ini, di link tersebut aku menambahkan parameter url dari blog www.teknomatch.com.
Berikut beberapa opsi parameter dari Fitur Ajax Search yang dapat sahabat gunakan sesuai kebutuhan.
Untuk opsi selengkapnya, sahabat dapat kunjungi blog DTE :] di artikel ini
Contoh dari opsi paramenter yang aku tambahkan ibarat : live=true dan image=true
Jika sahabat ingin menambahkan parameter lain ibarat url, sahabat hanya perlu menambahkan & sebagai pembatas antar parameter. Contohnya ibarat ini :
Oke, sekian dari aku wacana Cara Menambahkan Fitur Ajax Search di Blog. Semoga bermanfaat dan wassalam.
Fitur Ajax ini mempunyai banyak kelebihan kalau dibandingkan dengan opsi penelusuran biasa, salah satunya ialah 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 ialah memunculkan sejumlah artikel secara otomatis sesuai dengan kata kunci yang kita tulis di dalam kolom penelusuran. Contohnya ibarat gambar di bawah ini :
Ketika sahabat menulis kata kunci game di kolom penelusuran, maka yang keluar ialah 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, sahabat hanya perlu menambahkan link di bawah ini sebelum </body> atau <!--</body>--></body> dan otomatis akan eksklusif 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 biar tampilannya terlihat lebih menarik. Tambahkan arahan 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, sahabat 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 sahabat gunakan sesuai kebutuhan.
| Opsi | Keterangan |
|---|---|
live | Jika opsi ini bernilai false, maka artikel tidak akan muncul secara otomatis hingga sahabat menekan tombol search atau enter. |
url | Ganti nilainya dengan alamat blog sahabat atau alamat blog lain yang ingin sahabat tampilkan. |
image | Ganti nilainya menjadi true untuk menampilkan gambar artikel. |
target | Jika bernilai "_blank", semua link akan terbuka di tab baru. |
Untuk opsi selengkapnya, sahabat dapat kunjungi blog DTE :] di artikel ini
Contoh dari opsi paramenter yang aku tambahkan ibarat : live=true dan image=true
<script src='https://rawcdn.githack.com/Arlina-Design/quasar/master/ajaxsearch.js?live=true&image=true'/>Jika sahabat ingin menambahkan parameter lain ibarat url, sahabat hanya perlu menambahkan & sebagai pembatas antar parameter. Contohnya ibarat 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 sahabat hosting ulang arahan 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.