How to add Ajax live search feature on blogger website?
Frist Open your blogger dashboard and click theme and Edit HTML and you have add this script below before the body tag.
JavaScript
<script src='https://cdn.jsdelivr.net/gh/soykothasan/AJAX-Search@master/search.min.js?live=true&image=true'/>And with you have to add some CSS to giving a great look. Add this CSS on the below. Add this CSS below before the head tag.
CSS
<style type='text/css'>
/* Ajax Search */
*,*: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 h3{font-size:14px;font-weight:normal;margin:0 0 20px 0}
.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}}
</style>Click save and finish 😃
To see the results you can visit the link to the below.
We recommend that you re-host the code in this link https://github.com/soykothasan/AJAX-Search/blob/master/search.js and look for this blog ID 7306907362038110667 then replace it with your blog ID.