Advanced JSON Search Box Widget For Blogger

If you own a blog than you know the importance of your posts and loves to make your post visible to the visitors to get them engaged and start searching more and more on your blog. For doing that everyone works hard on adding popular posts, related posts or you might also like types of widgets to their blog and usually miss to improve the small and the most important thing might be placed on your blog too... I am talking about Search Box.


Today I will help you to add a search box to your blogger blog using JSON which retrieve blogger content to XML and show search results on the same active page. Blogger providing a normal search page to find the content using parameter q (e.g- http://www.codenirvana.in/search?q=programming). With Advanced JSON search box visitors can search any query relating to your blog and the search result will be shown in a popup using onsubmit event in input of form and simple CSS. So lets start with the procedure to add this cool search box widget!

Step 1: Open your Blogger dashboard and choose the blog.

Step 2: Navigate to >>Template>>Edit HTML

Step 3: Click anywhere in the code and press Ctrl+F and search for </body>

Step 4: Copy the code given below and place it above/before </body>

<script type='text/javascript'>
//<![CDATA[
var searchFormConfig = {
    url: "http://www.codenirvana.in",   //Search Site URL
   numPost: 100,     //Number Of Search Results
   summaryPost: true,    //enable-disable Search Result Summary
   summaryLength: 400,    //Search Result Summary Length in words
   resultTitle: "SEARCH RESULTS FOR", //Search Result Container Title
   noResult: "No result",    //No Result Tittle
   resultThumbnail: true,    //enable-disable Search Result Thumbnail
   thumbSize: 110,    //Search Result Thumbnail Size in px
   fallbackThumb: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWW-Amoxhtlq-tF9nw29QpRjlwH9zUk0xsqBrv6nAjoB-lDnY9gzbSAeFHir0WERvZCDig5NQS-jVlEhpTyw97kItYBBg_fc0ebsXAppR6PD5CsXbdmYJI1lAvELoaVQEfpUzajm7MiU-z/s1600/no-img.jpg" //No Thumbnail
};
function getId(a){return document.getElementById(a)}var config=searchFormConfig,input=getId("feed-input"),resultContainer=getId("search-container"),resultLoader=getId("search-loader"),skeleton="";function showResult(l){var k=l.feed.entry?l.feed.entry:"",a,g,e;skeleton="<h4>"+config.resultTitle+" &quot;"+input.value+"&quot;</h4>";skeleton+='<a class="closebtn" title="Close" href="#close" onclick="resultContainer.style.display=\'none\';return false;">&times;</a><ol>';if(k===""){skeleton+="<li>"+config.noResult+"</li>"}for(var d=0;d<config.numPost;d++){if(d==k.length){break}var b=new RegExp(input.value,"ig"),f=k[d],h=f.title.$t.replace(b,"<mark>"+input.value+"</mark>");for(var c=0;c<f.link.length;c++){if(f.link[c].rel=="alternate"){a=f.link[c].href;break}}g=("summary" in f&&config.summaryPost===true)?f.summary.$t:"";if(config.resultThumbnail===true){e=("media$thumbnail" in f)?f.media$thumbnail.url.replace(/\/s[0-9]+\-c/g,"/s"+config.thumbSize+"-c"):config.fallbackThumb}g=g.replace(/<br ?\/?>/ig," ").replace(/<.*?>/g,"").replace(/[<>]/g,"");if(g.length>config.summaryLength){g=g.substring(0,config.summaryLength)+"..."}g=g.replace(b,"<mark>"+input.value+"</mark>");skeleton+='<li><img style="width:'+config.thumbSize+"px;height:"+config.thumbSize+'px;" src="'+e+'" alt="" /><p><a href="'+a+'" target="_blank">'+h+"</a>"+g+"</p></li>"}skeleton+="</ol>";resultContainer.innerHTML=skeleton;resultLoader.style.display="none";resultContainer.style.display="block"}(function(){var a=document.createElement("script");a.type="text/javascript";a.id="search-feed-script";document.getElementsByTagName("head")[0].appendChild(a)})();function updateScript(){resultContainer.style.display="none";resultLoader.style.display="block";var a=getId("search-feed-script"),b=document.createElement("script"),c=input.value;b.id="search-feed-script";b.type="text/javascript";b.src=config.url+"/feeds/posts/summary?alt=json-in-script&q="+c+"&max-results="+config.numPost+"&callback=showResult";a.parentNode.removeChild(a);document.getElementsByTagName("head")[0].appendChild(b);return false}function resetField(){if(input.value===""){resultContainer.style.display="none";resultLoader.style.display="none"}};
//]]>
</script>
<style>
#feed-input {border: 0 none;width: 150px;height: 28px;-webkit-transition: all 0.5s ease-in-out;-moz-transition: all 0.5s ease-in-out;}
#feed-input:focus{width:170px;margin-left:0px;}
#search-btn {background: none repeat scroll 0 0 #359BED;border: 0 none;color: #FFFFFF;padding: 6px 10px;height: 30px;cursor: pointer;}
#search-container { height:auto; overflow:auto; border-radius: 10px; margin-top:8px; margin-bottom: 3%; background-color: #6984BB; padding:10px 10px 0; -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;}
#search-container mark { background-color:transparent; color:black; font-weight:bold;}
#search-container a { text-decoration:none; color:#0D3E71; font-weight:bold; font-size:15px; display:block;}
#search-container a:hover { color:#39914E;}
#search-container h4 { width : 500px; margin:0 0 10px; font-family: &#39;Segoe UI Light&#39;, &#39;Open Sans&#39;, Verdana, Arial, Helvetica, sans-serif; color:#FFF; text-align: left;}
#search-container ol { background:transparent; border:none; margin:0 0 10px; padding:0 0;}
#search-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-container li img { display:block; float:left; margin:5px 5px ;}
#search-container li p { font-size: 11px; text-align: left;}
#search-loader { left:5px; z-index:999; background-color: #6984BB; width: 10%; color:white; padding:3px 5px; margin-bottom: 10px; font-size: 13px; -webkit-border-radius:0 0 3px 3px; -moz-border-radius:0 0 3px 3px; border-radius:0 0 3px 3px; display:none;}
#search-container li p { margin:0; padding:5px 0px;}
#search-container li:hover { background:#FAF4D7;}
#search-container .closebtn {font-size: 25px;color: #A8A8A8;padding-bottom: 10px;text-align: center;position: absolute;right: 25px;top: 25px;font-family: arial;}
</style>

Step 4.1 After successfully placing the above CSS and JavaScript, copy below code and place where you want to show the Search Box on your blog. You can even Add Gadget in your layout panel by adding a HTML/JavaScript Gadget.

<form action="/search" onsubmit="return updateScript();">
<input id="feed-input" name="q" placeholder=" Search Site " size="40" type="text" />
<input id="search-btn" onkeyup="resetField();" type="submit" value="Search" />
</form>

Step 5: Now the final and most important step! Placing the search result container on your blog where your results pops up!.
For this you have to find an appropriate position where you have to place the below code.  Check the most appropriate position by searching on the above search box.

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

->If you have some basic blogger template editing or working with blogger codes experience than I am sure you will successfully add this code too, but for the newbies or those who don't have any experience in blogger template editing or anything I will suggest you to comment below with your blog URL (without http://) after doing all the steps 1 to 4 and I will help you to place the final code(step 5).

DEMO: Scroll to TOP and search anything in search box.

Customization:
Step 4 where you placed JavaScript and CSS before </body>
You will find my comments at the right side of every searchFormConfig Elements which I think is well understood and anyone can understand. Here are some important ones to take care of!

  url: "http://www.codenirvana.in", //Search Site URL
 numPost: 100,                     //Number Of Search Results
 summaryLength: 400,               //Search Result Summary Length in words
 resultTitle: "SEARCH RESULTS FOR", //Search Result Container Title

 thumbSize: 110,                    //Search Result Thumbnail Size in px

Similarly Step 4 code contains all the CSS required for this search box widget so some common customization's:

- Background of Search Container:
change background-color of #search-result-container

- Text Color of Search Container Title:
change color of #search-result-container h4

- Background of Search Results:
change background-color of #search-result-container li

- Text Color of Search Results Title:
change color of #search-result-container a

Final Words:  Its a great must have blogger widget and easy to install too just be careful in Step 5 and if need help, feel free to contact me by simply comment below or contact privately!

Don't Forget to change Search Site URL from codenirvana.in to your site URL