Advance Search Box For Blogger Using JSON

Using JSON we can retrieve blogger content to XML. So today I'm going to give you an Advance Search Box. Even though blogger providing a normal search page to find the content using parameter q (http://www.softglad.com/search?q=how to add). Search box is most important widget that should be added in a blog. So visitors can search your blog without surfing entire blog.

Live Demo

Advance search box is a widget allow blog's visitors to search blog content using json. 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.

Just you have to add the following codes in HTML/JavaScript in blogger widget. Go to blogger > layout > add gadget > HTML/JavaScript. Add the below codes in it. Change blog URL in line #11 (highlighted).

<div id="search-form-feed">
    <form action="/search" onsubmit="return updateScript();">
        <input id="feed-q-input" name="q" type="text" value="Search the site" onfocus="if (this.value == 'Search the site') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search the site';}" />
<input onkeyup="resetField();" type="submit" value="Search" />
    </form>
    <div id="search-result-container"></div>
    <div id="search-result-loader">Loading...</div>
</div>
<script type="text/javascript">
//<![CDATA[
var searchFormConfig = {
    url: "http://www.softglad.com", 
    numPost: 9999, 
    summaryPost: true, 
    summaryLength: 400, 
    resultTitle: "Search results for the keyword",
    noResult: "No result", 
    resultThumbnail: true, 
    thumbSize: 110, 
    fallbackThumb: "http://softglad.at.ua/images/no-img.jpg"
};
//]]>
</script>
<script type="text/javascript" src="http://softglad.at.ua/widgets/blogger-search.js"></script>
<style>
#search-form-feed {
 width:100%;
 position:relative;
 margin:0 0 10px;
 padding:0 0;
 font:normal normal 11px Arial,Sans-Serif;
 color:#333;
}
#feed-q-input {
 display:block;
 width:70%;
 border:1px solid #bbb;
 background-color:white;
 padding:5px 5px;
 font:normal bold 13px Tahoma,Arial,Sans-Serif;
 color:#ccc;
 margin:0 0;
 -webkit-border-radius:4px;
 -moz-border-radius:4px;
 border-radius:4px;
 float: left;
 -webkit-box-sizing:border-box;
 -moz-box-sizing:border-box;
 box-sizing:border-box;
}
#search-form-feed input[type="submit"] {
    background: #fff;
    border: 1px solid #ccc;
    padding: 5px 5px;
    cursor: pointer;
    margin: 0;
}
#feed-q-input:focus {
 color:#333;
 outline:none;
}
#search-result-container {
 width:50%;
 height:390px;
 overflow:auto;
 position:fixed;
 top:10%;
 z-index:99999;
 background-color:rgb(229,229,229);
 border:1px solid white;
 padding:10px 10px 0;
 margin:1px 0 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;
 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:#052748;
}
#search-result-container h4 {
 margin:0 0 10px;
 font:normal bold 13px 'Trebuchet MS',Arial,Sans-Serif;
 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;
 box-shadow:0px 1px 2px rgba(0,0,0,0.15);
 border:1px solid #ccc;
}
#search-result-container li img {
 display:block;
 float:left;
 margin:0 5px 0px 0;
}
#search-result-container li p {
 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:#D7F2FA;
}
#search-result-container .closebtn {
 display:block;
 position:absolute;
 top:0px;
 right:12px;
 line-height:normal;
 text-decoration:none;
 color:inherit;
 font-size: 30px
}
</style>

I hope you like this widget. Using this widget visitors could easily find their queries from your blog.

SHARE

Tweet