Hello all on this occasion I will share how to make a live search or ajax searchbox on blogger.
This tutorial applies only to templates that already have a searchbox, and I think all templates must already have a searchbox, unless you create your own template, it is recommended to create a searchbox first.
you don't need to change anything in your template's default searchbox, just install css and js which I will share below.
disclaimer I took this script from the view-source blog www.arlinacode.com for the css and for the js I saw it sourced from the blog www.dte.web.id
Ajax SearchBox
please go to blogger > themes > edit html copy the css below and paste it above the code ]]></b:skin> or above the code </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 ( .drK ) jika berbeda agar dapat berfungsi */
.drK .ajax-search{background:#1e1e1e!important;color:rgba(255,255,255,.85)}
.drK .ajax-search li h4 a{color:#fff}
.drK .ajax-search li h4 a:hover{color:#fff;text-decoration:underline}
.drK .ajax-search-pager a{background:#294db4;color:#fff;border:0}
.drK .ajax-search-pager a:hover{background:#1c2733;color:#fff}
.drK .ajax-search li{background:#1c1c1c;border:0;box-shadow:none}
.drK .ajax-search li:hover{background:#1e1e1e}
.drK .ajax-search h3{color:#fff}<script>/*<![CDATA[*/
// live search dengan defer
function liveSearchDefer(){var d=document.createElement("script");d.src="https://cdn.jsdelivr.net/gh/choipanwendy/ajaxS@main/live-search.js?live=true&image=true&url=https://webcoderhub.blogspot.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><script>/*<![CDATA[*/
// live search dengan lazyload
var liveSearchLazy=!1;window.addEventListener("scroll",function(){(0!=document.documentElement.scrollTop&&!1===liveSearchLazy||0!=document.body.scrollTop&&!1===liveSearchLazy)&&(!function(){var e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src="https://cdn.jsdelivr.net/gh/choipanwendy/ajaxS@main/live-search.js?live=true&image=true&url=https://www.wendycode.com";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(e,a)}(),liveSearchLazy=!0)},!0); 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>