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. 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.
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 (highlighted).
//<![CDATA[
var searchFormConfig = {
url: “http://www.URL.com“,
numPost: 9999,
summaryPost: true,
summaryLength: 400,
resultTitle: “Search results for the keyword”,
noResult: “No result”,
resultThumbnail: true,
thumbSize: 110,
fallbackThumb: “http://btbloggertips.com/images/no-img.jpg”
};
//]]>
#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
}
iaibloggertips 
