Cara Membuat Fitur Ajax Search di Blogspot

Dengan menggunakan Fitur Ajak tentunya akan memiliki banyak kelebihan jika dibandingkan dengan opsi penelusuran biasa, salah satunya yaitu dapat memuat daftar artikel secara otomatis tanpa perlu lagi untuk menekan tombol search ataupun enter sesuai kata kunci yang ingin kita cari. Nah bagaimana ? Menarik bukan ? Jika kalian penasaran coba simak tips berikut ini.

Cara Membuat Fitur Ajax Search di Blogspot


Seperti yang sudah sedikit saya jelaskan tadi, cara kerja dari Fitur Ajax Search ini yaitu untuk memunculkan beberapa artikel secara otomatis sesuai dengan kata kunci yang ingin kalian tulis di kolom penelusuran. Untuk contohnya bisa kalian lihat gambar dibawah ini :
Disaat kalian menulis dengan kata kunci game di kolom penelusuran, maka yang akan muncul yaitu daftar dari beberapa artikel yang terkait dengan kata kunci tersebut. Jadi apakah kalian sudah paham tentang Fitur Ajax Search ?

Untuk membuat Fitur ajax Search pertama kalian buka Blogger terlebih dahulu > Lalu klik menu Tema dan klik Edit HTML. Kemudian kalian cukup menambahkan link dibawah ini sebelum </body> atau &lt;!--</body>--&gt;&lt;/body&gt; maka akan otomatis bekerja pada kolom penelusuran pada blog kalian.

<script src='https://cdn.jsdelivr.net/gh/Arlina-Design/quasar@master/ajaxsearch.js?live=true&amp;image=true'/>

Dan untuk sedikit mempercantik tampilan kalian dapat menambahkan CSS dibawah ini sebelum </head> atau &lt;!--</body>--&gt;&lt;/body&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>

Terakhir Klik Simpan dan Selesai.

Pengaturan


Berikut ini adalah beberapa opsi parameter dari Fitur Ajax Search yang dapat kalian gunakan sesuai kebutuhan.

OpsiKeterangan
liveJika opsi ini bernilai false, maka artikel tidak akan muncul secara otomatis sampai kalian menekan tombol search atau enter.
urlGanti dengan alamat blog kalian ataupun blog lain yang ingin kalian tampilkan.
image Ganti nilainya menjadi true untuk menampilkan gambar artikel.
target Jika bernilai "_blank", semua link akan terbuka di tab baru.

Sekian artikel tentang Cara Membuat Fitur Ajax Search di Blogspot semoga bisa bermanfaat.

No comments for "Cara Membuat Fitur Ajax Search di Blogspot"

Berlangganan via Email