How to Add Ajax Search Features on a Blogger Blogs

How to Install Spoilers on a Blog

Assalamualaikum, this time Sayem Tutorial will share tips on how to add the Ajax Search feature on the blog that I found on her blog Taufik Nurrohman (www.dte.web.id).


This Ajax feature has many advantages when compared to the usual search options, one of which is being able to load a list of articles automatically without the need to press the search or enter button according to the keywords we are looking for. Pretty interesting right? For those who are curious, let's consider the following tips.

How to Add Ajax Search Features on Blogs

As I mentioned before, the workings of the Ajax Search feature is to bring up a number of articles automatically according to the keywords we write in the search column. For example like the picture below:

When you write game keywords in the search field, what comes out is a list of articles related to those keywords. Already understand, right? Okay.

First open Blogger > Click the Themes menu and click Edit HTML . Furthermore, you only need to add the link below before
</body>
or it
&lt;!--</body>--&gt;&lt;/body&gt;
will automatically work in the search field on your blog.

<script src='https://cdn.jsdelivr.net/gh/Arlina-Design/quasar@master/ajaxsearch.js?live=true&amp;image=true'/>

And I have also slightly modified it by adding CSS to make it look more attractive. Add the code below before
</head>
or
&lt;/head&gt;&lt;!--<head/>--&gt;

<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 theme and finish.

To see the results, you can visit the Result link below, on that link I added parameters URL from the sayemtutorial.blogspot.com blog.