As I mentioned before, the way the Ajax Search feature works is to automatically generate a number of articles according to the keywords we write in the search column. For example like the picture below:
When you write the game keyword in the search field, the list that comes out is related to the keyword. Now you understand? Okay.
First open Blogger > Click the Theme menu and click Edit HTML . Next, you just need to add the link below before </body>or <!--</body>--></body>automatically work directly on the search column on your blog.
And I have also slightly modified it by adding CSS so that it looks more attractive. Add the code below before </head>or</head><!--<head/>-->
Click Save theme and finish.
To see the results, you can visit the Result link below, in the link I added the parameters url from the www.teknomatch.com blog.
Here are some parameter options from the Ajax Search feature that you can use as needed.
For full options, you can visit the DTE blog:] in this article
Examples of the parameter options that I add such as: live=trueandimage=true
If you want to add other parameters like url, you just need to add &as a delimiter between parameters. Examples like this:
Okay, so many of me about How to Add Ajax Search Features on Blog . Hopefully useful and cautious.
First open Blogger > Click the Theme menu and click Edit HTML . Next, you just need to add the link below before </body>or <!--</body>--></body>automatically work directly on the search column on your blog.
<script src='https://rawcdn.githack.com/Arlina-Design/quasar/master/ajaxsearch.js?live=true&image=true'/>And I have also slightly modified it by adding CSS so that it looks more attractive. Add the code below before </head>or</head><!--<head/>-->
<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, in the link I added the parameters url from the www.teknomatch.com blog.
Settings
Here are some parameter options from the Ajax Search feature that you can use as needed.
For full options, you can visit the DTE blog:] in this article
Examples of the parameter options that I add such as: live=trueandimage=true
<script src='https://rawcdn.githack.com/Arlina-Design/quasar/master/ajaxsearch.js?live=true&image=true'/>If you want to add other parameters like url, you just need to add &as a delimiter between parameters. Examples like this:
<script src='https://rawcdn.githack.com/Arlina-Design/quasar/master/ajaxsearch.js?live=true&image=true&url=https://www.nama_blog.com'/>Okay, so many of me about How to Add Ajax Search Features on Blog . Hopefully useful and cautious.
