Cara Membuat Live Search Box di Blogger (Pencarian Instan Tanpa Enter)

Ingin blog Anda tampil lebih modern dan interaktif? Live Search Box atau pencarian langsung adalah fitur yang memungkinkan pengunjung menemukan konten secara instan tanpa perlu menekan tombol Enter. Fitur ini meningkatkan pengalaman pengguna dan membantu mereka menemukan artikel yang relevan dengan cepat.

Dalam panduan ini, Anda akan belajar cara memasang Live Search Box di Blogger secara mudah dan aman.

Kelebihan Live Search Box:

1. Menampilkan hasil pencarian secara real-time
2. Mempercepat pencarian artikel
3. Meningkatkan pengalaman pengguna
4. Tampilan yang lebih modern dan profesional

Cara Memasang Live Search Box di Blogger

Buka dashboard blogger > tema > edit html lalu salin kode css dibawah ini dan letakan diatas kode ]]</b:skin> atau </style>

/* ajax search */
.ajax-search.hidden{display:none}
.ajax-search{padding:20px 10px;background:rgba(255,255,255,.89)!important;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);text-align:center;box-shadow:0 15px 10px -10px rgba(155,155,155,0.15),0 -15px 10px -10px rgba(155,155,155,0.15);max-height:450px!important;margin:20px auto;border-radius:8px;animation:fadeInDown .5s linear}
.ajax-search-results-empty{text-align:center}
.ajax-search h3{color:#000;font-size:14px;font-weight:500;margin:0 10px 20px 10px;text-align:left}
.ajax-search-results{text-align:left}
.ajax-search li{background:#fff;position:relative;display:inline-block;width:100%;padding:10px;margin:5px 5px 5px -15px;border-radius:5px;border:1px solid rgba(155,155,155,0.15);overflow:hidden;transition:all .3s}
.ajax-search li:hover{border-color:#f89000}
.ajax-search li h4{font-size:13px;font-weight:500;margin:0 15px 0 0}
.ajax-search li h4 a{color:#000;transition:all .3s}
.ajax-search li h4 mark{background-color:transparent;color:#f89000;text-decoration:underline;transition:all .3s}
.ajax-search li h4 a:hover,.ajax-search li h4:hover mark{color:#f89000}
.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:#f89000;color:#fff;font-size:13px;padding:7px 15px;border-radius:5px;margin:15px 3px 0 3px}
.ajax-search-pager{overflow:hidden;clear:both;position:relative}.ajax-search li:nth-child(odd){animation:bounceInLeft 1.5s}
.ajax-search li:nth-child(even){animation:bounceInRight 1.5s}

/* animasi */
@keyframes bounceInLeft{from,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000);animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000)}0%{opacity:0;-webkit-transform:translate3d(-3000px,0,0);transform:translate3d(-3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(25px,0,0);transform:translate3d(25px,0,0)}75%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}90%{-webkit-transform:translate3d(5px,0,0);transform:translate3d(5px,0,0)}to{-webkit-transform:none;transform:none}}
@keyframes bounceInRight{from,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000);animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000)}from{opacity:0;-webkit-transform:translate3d(3000px,0,0);transform:translate3d(3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(-25px,0,0);transform:translate3d(-25px,0,0)}75%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}90%{-webkit-transform:translate3d(-5px,0,0);transform:translate3d(-5px,0,0)}to{-webkit-transform:none;transform:none}}
@keyframes fadeInDown{0%{opacity:0;transform:translateY(-20px)}100%{opacity:1;transform:translateY(0)}}

/* css darkmode sesuaikan class ( .darkMode ) jika berbeda agar dapat berfungsi */
.darkMode .ajax-search{background:#1e1e1e!important;color:rgba(255,255,255,.85)}
.darkMode .ajax-search li h4 a{color:#fff}
.darkMode .ajax-search li h4 a:hover{color:#fff;text-decoration:underline}
.darkMode .ajax-search-pager a{background:#294db4;color:#fff;border:0}
.darkMode .ajax-search-pager a:hover{background:#1c2733;color:#fff}
.darkMode .ajax-search li{background:#1c1c1c;border:0;box-shadow:none}
.darkMode .ajax-search li:hover{background:#1e1e1e}
.darkMode .ajax-search h3{color:#fff}

Selanjutnya salin javascript dibawah ini dan letakan diatas kode </body>

<script>/*<![CDATA[*/
// live search dengan defer
function liveSearchDefer(){var d=document.createElement("script");d.src="https://cdn.jsdelivr.net/gh/rekisptra/frame@media903/live-search.js?live=true&amp;image=true&amp;url=https://www.media903.com",document.body.appendChild(d)}window.addEventListener?window.addEventListener("load",liveSearchDefer,!1):window.attachEvent?window.attachEvent("onload",liveSearchDefer):window.onload=liveSearchDefer; function srcClr(){document.querySelector(".ajax-search").classList.add("hidden")}document.addEventListener("DOMContentLoaded",function(){document.querySelector('input[name="q"]').addEventListener("focus",function(){document.querySelector(".ajax-search").classList.remove("hidden")})}),document.querySelector('button[type="reset"]').addEventListener("click",srcClr);
/*]]>*/</script>

Silahkan ganti yang saya tandai dengan alamat blog kalian, jika sudah silahkan simpan.

Catatan Penting

• Fitur ini hanya bekerja pada template Blogger yang sudah memiliki search box bawaan.
• Sebelum mengedit tema, buat cadangan template terlebih dahulu untuk menghindari kehilangan data jika terjadi kesalahan.

Penutup

Dengan memasang Live Search Box, blog Anda akan terlihat lebih profesional dan user-friendly. Jika ada pertanyaan, jangan ragu untuk meninggalkannya di kolom komentar. Jangan lupa juga baca artikel lainnya untuk menambah wawasan seputar dunia blogging.