Cara Menambahkan Fitur Ajax Search Pada Blog

"Cara Menambahkan Fitur Ajax Search Pada Blog"

Pada kesempatan kali ini saya memberikan tutorial Cara Menambahkan Fitur Ajax Search Pada Blog, tutorial ini pertama kali dibuat oleh DTE yaitu blognya Taufik Nurohman, apa ya keunggulan fitur ini dari yang lainnya.

Tentu ada keunggulan search ajax jika dipasang pada blog dimana akan dimuat konten blog yang ditulis pencarian tanpa harus membuka halaman lagi. Misalnya aja kamu mengetik kata kunci di kolom pencarian maka daftar isi konten akan memuat konten yang sesuai yang di tulis.

Cara Menambahkan Fitur Ajax Search Pada Blog

Pertama buka Blogger > Klik menu Tema dan klik Edit HTML. Selanjutnya, sobat hanya perlu menambahkan link di bawah ini sebelum </body> atau &lt;!--</body>--&gt;&lt;/body&gt; 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&amp;image=true'/>

Dan saya juga telah sedikit memodifikasi dengan menambahkan CSS agar tampilannya terlihat lebih menarik. Tambahkan kode di bawah ini sebelum </head> atau &lt;/head&gt;&lt;!--<head/>--&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>

Klik Simpan tema dan selesai.

Pengaturan

Berikut beberapa opsi parameter dari Fitur Ajax Search yang bisa sobat gunakan sesuai kebutuhan.

Untuk opsi selengkapnya, sobat bisa kunjungi blog DTE :] di artikel ini

Bagaimana caranya gampang banget kan, itulah Cara Menambahkan Fitur Ajax Search Pada Blog, selamat mencoba