Cara Menambahkan Fitur Ajax Search Di Blog
Assalamualaikum, kali ini akan menyebarkan 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 bila 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 teman 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, teman hanya perlu menambahkan link di bawah ini sebelum </body> atau <!--</body>--></body> dan otomatis akan pribadi bekerja pada kolom penelusuran di blog sobat.
Dan aku juga telah sedikit memodifikasi dengan menambahkan CSS supaya tampilannya terlihat lebih menarik. Tambahkan instruksi di bawah ini sebelum </head> atau </head><!--<head/>-->
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 arlinatheme.blogspot.com.
Berikut beberapa opsi parameter dari Fitur Ajax Search yang dapat teman gunakan sesuai kebutuhan.
Untuk opsi selengkapnya, teman dapat kunjungi blog DTE :] di artikel ini
Contoh dari opsi paramenter yang aku tambahkan ibarat : live=true dan image=true
Jika teman ingin menambahkan parameter lain ibarat url, teman 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 bila 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 teman 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, 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://cdn.jsdelivr.net/gh/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 instruksi 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 arlinatheme.blogspot.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 ibarat : live=true dan image=true
<script src='https://cdn.jsdelivr.net/gh/Arlina-Design/quasar@master/ajaxsearch.js?live=true&image=true'/>Jika teman ingin menambahkan parameter lain ibarat url, teman hanya perlu menambahkan & sebagai pembatas antar parameter. Contohnya ibarat 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 teman hosting ulang instruksi yang ada di link ini https://cdn.jsdelivr.net/gh/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.
0 Response to "Cara Menambahkan Fitur Ajax Search Di Blog"
Post a Comment