Dalam dunia blogging, memberikan pengalaman terbaik kepada pengunjung adalah kunci kesuksesan. Salah satu cara untuk meningkatkan pengalaman pengguna adalah dengan menyediakan fitur pencarian yang cepat dan responsif. Live Ajax Search Box adalah solusi sempurna untuk ini. Artikel ini akan membahas artinya Live Ajax Search Box, kode dan cara membuat Live Ajax Search Box pada Blogspot, serta langkah-langkah praktis untuk mengimplementasikannya di blog Anda.
Apa Artinya Live Ajax Search Box?
Live Ajax Search Box adalah fitur pencarian canggih yang memungkinkan pengunjung blog Anda untuk mencari konten secara real-time tanpa perlu memuat ulang halaman. Fitur ini menggunakan teknologi AJAX (Asynchronous JavaScript and XML), yang memungkinkan komunikasi antara browser pengguna dan server tanpa mengganggu aktivitas pengguna.
Dengan Live Ajax Search Box, saat pengunjung mulai mengetikkan kata kunci di kotak pencarian, hasil pencarian akan muncul secara otomatis di bawah kotak tersebut. Ini membuat proses pencarian lebih cepat, efisien, dan ramah pengguna.
Keuntungan Menggunakan Live Ajax Search Box di Blogger
1. Pengalaman Pengguna yang Lebih Baik: Pengunjung tidak perlu menunggu halaman dimuat ulang untuk melihat hasil pencarian.
2. Kecepatan: Hasil pencarian muncul secara instan saat pengguna mengetik.
3. Interaktivitas: Fitur ini memberikan saran atau hasil terkait saat pengguna mengetik, meningkatkan engagement.
4. SEO-Friendly: Fitur ini dapat meningkatkan waktu tinggal pengunjung di blog Anda, yang berdampak positif pada peringkat SEO.
Kode dan Cara Membuat Live Ajax Search Box pada Blogspot
Berikut adalah panduan lengkap untuk membuat Live Ajax Search Box di Blogger. Kami akan menggunakan kode JavaScript dan CSS yang telah dioptimalkan untuk memastikan fitur ini bekerja dengan baik.
Tambahkan Kode JavaScript Ajax Search Box Sebelum `</body>`
Pertama, buka **Dashboard Blogger** Anda, lalu navigasikan ke **Tema > Edit HTML**. Cari kode `</body>` dan tambahkan kode berikut tepat sebelum kode tersebut:
<script src='https://cdn.jsdelivr.net/gh/Arlina-Design/quasar@master/ajaxsearch.js?live=true&image=true'/>
Kode ini akan memuat skrip JavaScript yang diperlukan untuk mengaktifkan fitur Live Ajax Search Box. Skrip ini juga mendukung pencarian dengan gambar, yang membuat tampilan hasil pencarian lebih menarik.
Tambahkan Kode CSS Live Ajax Search Box ke Template Blogger
Selanjutnya, tambahkan kode CSS berikut ke dalam bagian `<style>` atau file CSS template Anda. Kode ini akan memastikan tampilan Live Ajax Search Box terlihat rapi dan responsif.
*,*: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 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}}
.ajax-search h3{font-size:14px;font-weight:normal;margin:0 0 20px 0}
Kode CSS di atas akan mengatur tampilan kotak pencarian, hasil pencarian, dan gambar yang ditampilkan. Pastikan kode ini ditempatkan di bagian `<style>` atau file CSS template Anda.
Simpan dan Uji Ajax Search Box
Setelah semua kode ditambahkan, simpan perubahan Anda dan buka blog Anda untuk menguji fitur Live Ajax Search Box. Ketikkan beberapa kata kunci di kotak pencarian dan pastikan hasilnya muncul secara real-time.
Tips untuk Mengoptimalkan Live Ajax Search Box
1. Gunakan Kata Kunci yang Relevan: Pastikan konten blog Anda memiliki kata kunci yang relevan agar hasil pencarian lebih akurat.
2. Optimalkan Gambar: Jika Anda menggunakan fitur pencarian dengan gambar, pastikan gambar di blog Anda dioptimalkan untuk kecepatan loading.
3. Uji Responsivitas: Pastikan fitur ini bekerja dengan baik di perangkat mobile dan desktop.
Membuat Live Ajax Search Box di Blogger adalah cara yang efektif untuk meningkatkan pengalaman pengguna dan membuat blog Anda lebih interaktif. Dengan mengikuti panduan di atas, Anda dapat dengan mudah mengimplementasikan fitur ini di blog Anda. Jangan lupa untuk mengoptimalkan kode dan menguji fitur ini secara berkala untuk memastikan kinerjanya tetap optimal.
Dengan Live Ajax Search Box, pengunjung blog Anda akan merasa lebih nyaman dan betah menjelajahi konten-konten menarik yang Anda sajikan. Selamat mencoba!
Rate This Article
Thanks for reading: Widget Live Ajax Search Box Di Blogger , Sorry, my English is bad:)
