Advance Search Box Widget to Blogger Blog

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.Bloggerplanet.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.

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.

Add Search box widgets to blogger blog

Go to your blogger Dashboard and select your blog.
Select Layout option.
Select Add a gadget option.
Select HTML/JavaScript widget.
Change blog URL in line #11 (highlighted)
In the HTML/JavaScript widget paste code of the search box widget and save the widget.

CODE:

<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.Bloggerplanet.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>