Submit some intresting concepts to us using the button.. Submit Here!

How to Add Live Search to Blogger Website by Ajax and What is it's Advantage ?

The default site search provided by Blogger themes is not much effective in searching contents for your blog or web.
Please wait 0 seconds...
Scroll Down and click on Go to Link for destination
Congrats! Link is Generated


So, Today we will see HOW TO ADD LIVE SEARCH TO BLOGGER WEBSITE for free by just using JavaScript and CSS.

Before starting the post I would like to explain what is live search and what are its advantages.

So let's get started.

Live Search Introduction:

The default site search provided by Blogger themes is not much effective in searching contents for your blog or web. Its always good to have a good search box so that your visitors can have much better exposure to article's. 

Similar to Google Custom search for websites, Live Search also has a custom search for blogs and website. The difference for Live Search is that you need not go navigate from an existing page to search for contents.

So you might be thinking that it will decrease the page view that we get on our website through /search and this is true but imagine that if you are website has live search and the users get the post view before clicking on it then experience may enhance the user to interact more with our website and that's why we all are interested in compact and good UI designs.

Advantages of Live Search in Blogger:

  1. All the website admins think that using external JS will decrease their page speed but we have lazy loaded the live search JavaScript so that your website loads faster but yeah it can impact a bit in loading.
  2. Live search users can easily navigate through the content of your website and they can fastly search for the content through just the search bar.
  3. Live search can help to make better UI design for your website.
  4. You can easily customise the CSS part so that the life search is perfect with your website.

Codes for Live Search Widget in Blogger:

This tutorial applies only to templates that already have a searchbox, and I think all templates of course already have a searchbox, unless you create your own template, it is recommended to create a searchbox first.

CSS for Live Search Box:

Go to > Themes > edit HTML > CTRL+F >Paste CSS above ]]></b:skin> or </style>

CSS for Live Search :

/* ajax search */
.asearch .hidden{display:none}
.asearch {padding:20px 10px;background:rgba(255,255,255,.89);-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;margin:20px auto;border-radius:8px;animation:fadeInDown .5s linear}
.asearch h3 {color:#000;font-size:14px;font-weight:500;margin:0 10px 20px 10px;text-align:left}
.asearch 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}
.asearch li:hover {border-color:#f89000}
.asearch li h4 {font-size:13px;font-weight:500;margin:0 15px 0 0}
.asearch li h4 a {color:#000;transition:all .3s}
.asearch li h4 mark {background-color:transparent;color:#f89000;text-decoration:underline;transition:all .3s}
.asearch li h4 a:hover,.asearch li h4:hover mark {color:#f89000}
.asearch-image {float:left;margin:0 10px 0 0}
.asearch-image img {border-radius:5px}
.asearch-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}
.asearch-pager {overflow:hidden;clear:both;position:relative}.asearch li:nth-child(odd) {animation:bounceInLeft 1.5s}
.asearch 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)}}

/* css darkmode for drK class*/
.drK .asearch {background:#1e1e1e;color:rgba(255,255,255,.85)}
.drK .asearch li h4 a {color:#fff}
.drK .asearch li h4 a:hover {color:#fff;text-decoration:underline}
.drK .asearch-pager a {background:#294db4;color:#fff;border:0}
.drK .asearch-pager a:hover {background:#1c2733;color:#fff}
.drK .asearch li {background:#1c1c1c;border:0;box-shadow:none}
.drK .asearch li:hover {background:#1e1e1e}
.drK .asearch h3 {color:#fff}

JavaScript for Live Search:

Below JavaScript should be pasted above </body> or it maybe like this &lt;!--</body>--&gt;&lt;/body&gt;

// live search script 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=";image=true&amp;url=";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(e,a)}(),liveSearchLazy=!0)},!0); function srcClr(){document.querySelector(".asearch").classList.add("hidden")}document.addEventListener("DOMContentLoaded",function(){document.querySelector('input[name="q"]').addEventListener("focus",function(){document.querySelector(".asearch").classList.remove("hidden")})}),document.querySelector('button[type="reset"]').addEventListener("click",srcClr);

The Live Search will come to action only after user scrolls down as we have lazy-loaded it.


Question: How does Live Search Works in blogger?

Answer: When users are typing, the live search shows suggestions on how to complete the keyword. It might be enough to enter one character for the box to auto-complete. 

Question: Why is it called Live Search bar?

Answer: One of the most convenient ways to search for specific data is the AJAX search box. It is also called live search because it reacts to the users’ input in runtime. They instantaneously gets result.

Question: Why choose Live Search over traditional Search Box?

Answer: A lot of users prefer live searches to traditional ones because of its speed and useful suggestions. It will provide users fast search.


In the I would like to conclude that the live search option will make your website and bit slow but it will help users to interact better with your website and your UI will become good also.

So that's all about LIVE SEARCH AJAX WIDGET ADDITON to any blogger template.

Hope you have not faced any problems.

If there is any problem then comment below.


Thanks to: and some other GitHub repository for providing basic fetch script and base for the development of this code.

About the Author

Hi, I am Anand Nawal and my motive is to give you the best guide over your Query☺️

3 تعليقات

  1. I doesn't show my blog results but others. Can this be not a lazy load?
    1. and it doesn't work right away. I need to wait more than minutes to see the results
    2. Sorry
      But the API isn't working with Blogger Search due to internal Issues
Cookie Consent
We have to use your Cookies to store your Browser Info to serve you Better Experience and make WebSite Fast..
Your Internet Connection is weakened. Please try Refreshing your Browser or Check your Internet Connection...
AdBlock Detected!
We detect that your are using some kind of AdBlocker which we can't allow.
The Revenue we generate with Ads is important for our WebSite to manage funds...
Site is Blocked
Sorry! This site is not available in your country.