How To Add Live Search Box On Blogger Website

Good day to all of you. I'll explain How To Add Live Search Box On Blogger Website .

This tutorial is only applicable to templates that come with an existing search box, which I believe is the case for all templates. It's advised that you make the search box first, unless you are skilled in template creation.

Installing the CSS and JS that I will provide below will suffice; there is no need to make any changes to the default search box in your template.

What are the benefits of a website's live search Box?

Benefits Of Live Search Box

• Enhanced Experience for Users
• Increased Contentment among Users
• Increased Accessibility
• Lower Rates of Bounces
• Accelerated Navigation
• Enhanced Involvement Level
• Optimization of Conversion Rate
• Mobile-Friendly
• Views and Understanding
• Customization
• The advantage over competitors
• Assistance with Comprehensive Content Libraries

How To Add Live Search Box On Blogger Website 

Remember that this tutorial will only function if the website template you are using already has a search box before we begin building a live search box. To create the live search box on your website, simply follow the steps listed below.

Step 1: Login your Blogger dashboard 

Step 2: Now select Edit HTML under Theme > Customize.

Step 3: Next, look for ]]></b:skin>  code by pressing Ctrl+F.

Step 4: Copy the CSS code below, then paste it above  ]]></b:skin>  or ]]></style> 

/* ajax live search box*/ .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}
/* animation */ @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)}}
/* darkmode css adjust the class ( .drK ) to make it work */ .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}

Step 5: Once more, use Ctrl + F to look up </body>. There ought to be some code visible that resembles &lt;!--</body>-- </body>

Step 6: The final step is to copy and paste the following JavaScript code above </body> or &lt;!--</body>--&gt;&lt;/body&gt;

<script> /*<![CDATA[*/
// live search
function liveSearchDefer(){var d=document.createElement("script");d.src="https://cdn.jsdelivr.net/gh/choipanwendy/ajaxS@main/live-search.js?live=true&amp;image=true&amp;url=https://www.wikifortech.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>

Step 7: It's finished now just click the save icon! 

The JavaScript code below should be used if you wish to use lazyload for your code.

<script> /*<![CDATA[*/
// live search - 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&amp;image=true&amp;url=https://www.wikifortech.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>

Make sure to change the URL to your own website URL

Conclusion

This post will explain How To Add Live Search Box On Blogger Website . If you find this useful, please share it with your friends. If you still have questions, feel free to join our Telegram groups for more helpful content. The majority of the advice is exclusively available on Telegram Chenall, your preferred ShouNone.

Rate this article

Go to Link