Cara Membuat Search Fitur Ajax search Blogger

Cara Membuat Search Fitur Ajax search Blogger

Cara Membuat Search Fitur Ajax search Blogger

Bagi seorang blogger tentunya anda mencari Fitur ajax search blogger bagi yang tidak tahu anda silakan baca semua artikel dari Mboton Dev kami akan saya jelaskan sedetail mungkin untuk anda semua tentunya.


Gunanya untuk apa?


Search Ajax Adalah untuk mencari semua Conten artikel yang di dalam website Yang sudah di beri Ajax Search agar pengunjung enak untuk mencari isi semua artikel atau isi conten segai contoh website mboton ketikan tema atau lain nanti akan muncul isi konten yang anda cari tersebut.

Bagi anda yang ingin menambahkan Fitur Search Ajax anda di blogger anda masing-masing silakan template anda di backup dulu siapa tahu nanti ada kesalahan silakan baca dan cermati di bawah ini.


Cara Membuat Search  Fitur Ajax search Blogger


  1. Masuk Akun Google.
  2. Masukan Akun Blogger Anda.
  3. Pilih Menu Tema Atau Template.
  4. Klik Edit HTML Template Blogger.

Cari Code Yang </body> lalu tambahkan  codenya ketemu alternatifnya ini &lt;!--</body>--&gt;&lt;/body&gt

 

Coba tambahkan script bawah ini agar terlihat bagus untuk tampilannya


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

Beri code CSS search ajax biar penampilan tertata rapi, dan tambahkan codenya </head> lalu anda tambahkan codenya ini di bagian </head>.


&lt;/head&gt;&lt;!--<head/>--&gt; 


jika sudah anda bisa tambahkan code CSSnya di bawah ini.


<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>


Jika anda sudah di tempelkan semua code yang di atas anda bisa menyimpannya tema atau template anda.


Pengaturan Search Ajax


Ada beberapa opsi pilihan untuk parameter dari fungsi Fitur Ajax Search yang anda bisa gunakan yang sesuai atau ke inginan masing-masing mana yang anda 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.


Seperti yang Mboton Dev contohkan di website Mboton sudah menggunakan dan saya uji live true dan image true juga berhasil di terapkan di halaman blogger Mboton Dev, anda bisa merubahnya rubahnya sebagai berikut.


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

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

djika anda ingin hosting ulang anda juga bisa cari code arlina yang di atas lalu anda bisa meng hosting ulang dengan mencari ID lalu di Ganti ID blogger kamu kami sarankan hosting ulang di github atau lain masih banyak lagi.


Anda juga bisa melihat artikel mas taufiq nurrohman yang membuat pertama kalinya Search Ajaxnya.


Semoga anda berhasil untuk menerapkan Search Ajak yang di berikan tutorial dari saya Mboton Dev dan arlina yang sudah memberi hosting semoga anda bisa menerapkan dan berhasil.


Begitu saja yang saya berikan tentang Seacrh Ajax terima kasih banyak yang sudah berkunjung di Mboton Dev jangan lupa berkomentar di bawah ini jika ada kesulitan atau yang lainnya.


Semoga Bermanfaat Bagi Anda Semua Jangan Lupa Untuk Komentar Di Bawah. Terima Kasih Sudah Berkunjung Di Mboton Dev
Load comments