Cara Menambahkan Fitur Ajax Search Pada Blog - Hallo sahabat Jendral Kancil, Pada Artikel yang anda baca kali ini dengan judul Cara Menambahkan Fitur Ajax Search Pada Blog, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel Adsense, Artikel CSS, Artikel HTML, Artikel Internet, Artikel Javascript, Artikel JQuary, Artikel Media Sosial, Artikel Review, Artikel Template, Artikel Tutorial Blog, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : Cara Menambahkan Fitur Ajax Search Pada Blog
link : 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.

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

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 

Demikianlah Artikel Cara Menambahkan Fitur Ajax Search Pada Blog

Sekianlah artikel Cara Menambahkan Fitur Ajax Search Pada Blog kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel Cara Menambahkan Fitur Ajax Search Pada Blog dengan alamat link https://jekancil.blogspot.com/2020/09/cara-menambahkan-fitur-ajax-search-pada.html