Quick Search JSON on Blog Posts Own Search Box

Agratitudesign 11:11 Blog Note , Web Design

These are some reasons why I use the method of Quick Search using JSON rather than Google CSE. When I was using google CSE then I have inserted any keyword on my search box, there were any results was not relevant appeared, could even appear in the first result, and some image thumbnails that appeared sometimes was not appropriate (inaccurate). I don't know why did this happens. Especially for some of the newest articles that have not been indexed by google, it was not found on the search results, such the articles does not exist on my blog, so it must wait until indexed by google. Meanwhile if I was using Google Blog Search of the basic gadget blogger, the search result very appropriate, i like it, but I have limited to put the search box style on my template where I want it to place. This is why I chose Quick Search using JSON in addition also search process more quickly and the display of result could be more elegant.

The search results style more impressive and easy to adjust in the place wherever you want, Here I will put it to the blog posts or content wrapper. It allow you to adjust and change the search results style to be more attractive for the users, which I think it is not so difficult if you have the ability in editing CSS script code. In addition we can make the style of own search box so much in accordance with the template that we use. In this case I use the expand click search box float right for the search box. the question is how to do so to place the search result on the blog post (content wrapper) and integrate the style of own search box using Quick search JSON. I will show you how to implement your own search box to Quick Search JSON where the search result put on the Blog Posts.

1. Placing HTML Script Code of the Search Box on the HTML Template Header

Find the place on your template where you want to place your search box style. I will use the expand click search box style, which I want to place it on the header. I don't use a particular gadget or widget position on the template. I want to be free as I please to put it. Therefore I just go to template>edit html on the blogger dashboard. Let's see lthe picture below!

After you find the header section of your template <header>...</ header> you can define its position on the header section and using a particula div class <div class=...> the html script code for search box of quick search json </ div>.

The HTML script code for search box integrated with quick search json :

<form action="/search" id="search" onsubmit="return updateScript();">
    <input name="q" id="feed-q-input" onblur='if (this.value == &quot;&quot;) {this.value = &quot;Search...&quot;;}' onfocus='if (this.value == &quot;Search...&quot;) {this.value = &quot;&quot;}' size='40' type='text' value='Search...' onkeyup="resetField();"/>
</form>

id='search' : to define the style of search box, in this case expand click search box
id='feed-q-input' : just for accept the input of the keywords, I will not define it again with the style, id='search' will make the style of search box

This html script code of search box with quick search json, it allows you to make the style of your search box by defining id='search' on the CSS script code next.

2. Placing HTML Script Code of Search Result on Blog posts of Content Wrapper

Next we will continue to work on edit html of the template script code, you try to find the script code of your content blog posts, for more quickly just press Ctrl+F then type blog posts. Look at the picture below!

The HTML script code for search results of quick search JSON :

<div id="search-result-container"></div>
<div id="search-result-loader">Loading...</div>

The html script code for search results are placed at the beginning of the script code of widget script code with title blog posts. This will display the search results on the top of blog posts when the users type any keywords on the search box .

3. Once the html script of the search box on the header and search result on the top blog posts are properly placed. Next we will create for the CSS scripts code for the style. All the CSS scripts code placed just before the closing skin of your template. Ctrl+F then type ]]></b:skin>, Illustration of the placement of the CSS scripts code, you can see on the picture below!

Search Box Wrapper :

.art-object989822972
{  
  position: absolute;
  top: 110px;
  right:10px;
  width:300px;
  height: 24px;
}

It just the css wrapper that defines the position of the search box on header, it's value of the CSS, it might be different depending on the template of your blog. So you have to adjust it by yourself.

Expand Click Search Box Float Right :

#search {
}
#search input[type="text"] {
    background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiwB-3J9EDXtqjo-kZysFBqkITiinAbGSTS5nXAgKRdCk6lG9vioqBzPCRrs2XhCc8x9exmJZnwiIypQ8QzOzJ2WCpMig6IFAYTu1_0ROm3hPNGFvk_AnUX3rHytSMuEjPFmOdjFRnlAE/s2048/searchicon.png') no-repeat 10px 6px #ffffff;
    border: 1px solid #000000;
    font: bold 12px Arial,Helvetica,Sans-serif;
    color: #000000;
    width: 150px;
    padding: 6px 15px 6px 35px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    text-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
 box-shadow: 0px 1px 1px rgb(26, 56, 103) inset;
 transition: all 0.5s ease-in-out 0s;
    transition-property: all;
    transition-duration: 0.5s;
    transition-timing-function: ease-in-out;
    transition-delay: 0s;
 float:right;
    }
#search input[type="text"]:focus {
    background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiwB-3J9EDXtqjo-kZysFBqkITiinAbGSTS5nXAgKRdCk6lG9vioqBzPCRrs2XhCc8x9exmJZnwiIypQ8QzOzJ2WCpMig6IFAYTu1_0ROm3hPNGFvk_AnUX3rHytSMuEjPFmOdjFRnlAE/s2048/searchicon.png') no-repeat 10px 6px #fcfcfc;
    width: 230px;
    float:right;
    }

This css scripts code of expand click search box, If you already have the CSS scripts code of your own search box you can replace it and adjust the CSS id that used on the html scripts code of your search box.

Search Result Quick Search JSON :

#search-result-container {
 width:585px;
 height:auto;
 overflow:auto;
 top:10%;
 background-color:rgb(229,229,229);
 border:1px solid white;
 padding:10px 10px 0;
 margin-left:auto;
 margin-right:auto;
 -webkit-box-shadow:0 1px 2px rgba(0,0,0,.4),0 7px 7px -4px rgba(0,0,0,.4);
 -moz-box-shadow:1 1px 2px rgba(0,0,0,.4),0 7px 7px -4px rgba(0,0,0,.4);
 box-shadow:0 1px 2px rgba(0,0,0,.4),0 7px 7px -4px rgba(0,0,0,.4);
 display:none;
 left:20%;
}
#search-result-container mark {
 background-color:transparent;
 color:black;
 font-weight:bold;
}
#search-result-container a {
 text-decoration:none;
 color:#0D3E71;
 font-weight:bold;
 font-size:12px;
 display:block;
}
#search-result-container a:hover {
 color:#824316;
}
#search-result-container h4 {
 width : 500px;
 margin:0 0 10px;
 font:normal bold 13px 'Trebuchet MS',Arial,Sans-Serif !important;
 color:#B50001;
 text-align: left;
}
#search-result-container ol {
 background:transparent;
 border:none;
 margin:0 0 10px;
 padding:0 0;
}
#search-result-container li {
 margin:10px 0 1px;
 padding:0px 8px 0px 0px;
 list-style:none;
 background-color:white;
 overflow:hidden;
 word-wrap:break-word;
 border-radius:3px;
 -webkit-transition: 0.3s;
 -moz-transition: 0.3s;
 -ms-transition: 0.3s;
 -o-transition: 0.3s;
 border:1px solid #ccc;
}
#search-result-container li img {
 display:block;
 float:left;
 margin:5px 5px ;
}
#search-result-container li p {
 font:normal normal 11px/normal Arial,Sans-Serif;
 text-align: left;
}
#search-result-loader {
 position:absolute;
 top:100%;
 left:5px;
 z-index:999;
 background-color:#0D6786;
 color:white;
 padding:3px 5px;
 margin:-2px 0 0;
 font:normal bold 10px Arial,Sans-Serif;
 -webkit-border-radius:0 0 3px 3px;
 -moz-border-radius:0 0 3px 3px;
 border-radius:0 0 3px 3px;
 display:none;
}
#search-result-container li p {
 margin:0;
 padding:5px 0px;
}
#search-result-container li:hover {
 background:#FAF4D7;
}
#search-result-container .closebtn {
 position: absolute;
 display:block;
 top:35px;
 left:590px;
 line-height:normal;
 text-decoration:none;
 color:inherit;
 font-size: 20px
}

In this case we don't need anymore to define the css id style of feed-q-input, because I've been defining the style on css id of search. In some case I think you have to adjust the script just a little because it's depending the css scripts code of the template that inherited the style of content blog posts as a whole. Until have find the search results display as you wish.

4. The last is inserting the javascript code of quick search json, because we put the search results on blog post or content wrapper, you must separate them from the html script code of search box and search result far below the html scripts code. Here I put it before the closing body </body> tag. For more quickly let's press Ctrl+F then type like this </body>. Then you put the javascript code for quick search json. Let's see the picture below!

Javascript code for quick search json :

<script type="text/javascript">
//<![CDATA[
var searchFormConfig = {
    url: "https://agratitudesign.blogspot.com", 
    numPost: 9999, 
    summaryPost: true, 
    summaryLength: 400, 
    resultTitle: "Search results for the keyword",
    noResult: "No result", 
    resultThumbnail: true, 
    thumbSize: 80, 
    fallbackThumb: "https://cdn.rawgit.com/suardika/agratitudesign-template/master/no-img.jpg"
};
//]]>
</script>
<script src='https://agratitudesign-template.googlecode.com/svn/branches/blogger-search.js' type='text/javascript'/>

Notify here to change the url to your own url blog, thumbnail size, summary length according to what you want, the rest can understanding and exploring the javascript code. if it still not clear enough, let's see this article video above!

Share This Article :