How to Add the Ajax Search Feature on Blog
How to Add the Ajax Search Feature on Blog - This Ajax feature has many advantages compared to the usual search options, one of which is that it can automatically load a list of articles without pressing the search button or enter according to the keywords we are looking for. Pretty interesting isn't it? For those who are curious, let's look at the following tips.
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.
When you write a game keyword in the search field, the list of articles that are related to that keyword is issued. for more details about how to install it, just follow the steps below.
First open Blogger >> Click the Theme menu and click Edit HTML. Next, you only need to add the link below before </body> or <!-</body>-></body> and will automatically work directly in 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.
Here are some parameter options from the Ajax Search feature that you can use as needed.
So many of me about How to Add Ajax Search Features on Blog. Hopefully useful and good luck.
How to Add the Ajax Search Feature on Blog
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.
When you write a game keyword in the search field, the list of articles that are related to that keyword is issued. for more details about how to install it, just follow the steps below.
First open Blogger >> Click the Theme menu and click Edit HTML. Next, you only need to add the link below before </body> or <!-</body>-></body> and will automatically work directly in the search column on your blog.
<script src='https://rawcdn.githack.com/ariewae01/KhalistaBlog/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.
Settings
Here are some parameter options from the Ajax Search feature that you can use as needed.
| Opsi | Information |
|---|---|
live | If this option is worth false, the article will not appear automatically until you press the search button or enter. |
url | Change the value with your blog address or other blog address that you want to show. |
image | Change the value to true to display the article image. |
target | If the value "_blank", all links will open in a new tab. |
So many of me about How to Add Ajax Search Features on Blog. Hopefully useful and good luck.
Post a Comment for "How to Add the Ajax Search Feature on Blog"
Provide comments relevant to the posted articles and provide critiques and suggestions for the progress of the blog