CARA MENAMBAHKAN EFEK AJAX PADA MENU PENCARIAN

Ketikan kata kunci pada menu pencarian blog ini misalnya tuliskan "menu", "navigasi" "blogger" biarkan beberapa saat sampai terlihat loading selesai. Seluruh artikel dengan label label akan bermunculan sebagai daftar yang mirip homepage atau tampilan muka blog.

Perhatikan video dibawah ini untuk melihat cara kerjanya:

Silahkan kunjungi Blog Arlina Design CARA MENAMBAHKAN FITUR AJAX

Atau langsung ikuti langkah membuatnya dari sini sbb:

LANGKAH PERTAMA: Masuk kepengaturan blog - pilih Tema - pilih editHTML.

Cari kode </body> lalu letakan kode dibawah ini sebelum atau diatasnya:

<script src='https://rawcdn.githack.com/Arlina-Design/quasar/master/ajaxsearch.js?live=true&amp;image=true'/>

LANGKAH KEDUA: Letakan kode dibawah ini diatas kode </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>

Catatan: Saya tidak menggunakan GitHub dan rawgit karena pas ketika saya sedang tertarik membuatnya RawGit telah mengeluarkan pengumuman mengakhiri layanannya...Artikel ini hanya sebagai referensi untuk tujuan pembelajaran.

Terimkasih tetap mengunjungi editblog yang sederhana. Karena berbagi itu indah.