Membuat Search Fitur Ajax 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.
Table Of Contents
Fitur Ajax search 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.
Membuat Search Fitur Ajax 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
- Masuk Akun Google.
- Masukan Akun Blogger Anda.
- Pilih Menu Tema Atau Template.
- Klik Edit HTML Template Blogger.
Cari Code Yang </body> lalu tambahkan codenya ketemu alternatifnya ini <!–</body>–></body>
Coba tambahkan script bawah ini agar terlihat bagus untuk tampilannya
<script src='https://cdn.jsdelivr.net/gh/Arlina-Design/qu[email protected]/ajaxsearch.js?live=true&image=true'/>Beri code CSS search ajax biar penampilan tertata rapi, dan tambahkan codenya </head> lalu anda tambahkan codenya ini di bagian </head>.
</head><!–<head/>–>
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 Fitur Ajax search
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.
| 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/qu[email protected]/ajaxsearch.js?live=true&image=true'/><script src='https://cdn.jsdelivr.net/gh/Arlina-Design/quasa[email protected]/ajaxsearch.js?live=true&image=true&url=https://www.nama_blog.com'/>Membuat Search Fitur Ajax 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 Membuat Search Fitur Ajax 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.
