Menu
show-notice
hide-notice

Advance Search Box For Blogger Using JSON

on 25 August 2013

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

21 comments:

  1. Replies
    1. For me does not work too ...

      Delete
    2. Sony. I have missed style tag between the css code. Fixed now. Please try again...

      Delete
    3. Of course. Just you have to find default search bar code and replace with our code.

      Delete
  2. searched Target link open in new windows..
    How to change for open page in same page instead of new page ..?

    ReplyDelete
    Replies
    1. This widget is already coded to open search result in the same window as popup.

      Delete
  3. Hey bro, awesome post and script.
    Recently the script stopped working, will you send me the script so I can host it on my own server? I pay you for it, thank you!
    ~Nick

    ReplyDelete
  4. Thanks, this is awesome post.

    ReplyDelete
  5. This comment has been removed by the author.

    ReplyDelete
  6. it's work great... thank u very much

    ReplyDelete
  7. This comment has been removed by the author.

    ReplyDelete
  8. work great, but i cant stylize the scrollbar with flexcroll. can you hel me?

    ReplyDelete
  9. Could you write code for .keyup() search using json ?

    ReplyDelete
  10. Help me. When I search a word in my blog search bar it shows me many results but I want it to show only if the word is in title, I don't want it to show for whole content.

    ReplyDelete
  11. Sir the search box is working perfectly for me, but I'm facing a problem.
    I am making a dictionary and when I search for a word it gives me many results, for example if I search for " have " it gives me many results, but I want it to give results only if the word "have" is in post titles. At the same the, when search a word with "*", for example "*have", it does not search, but why?

    ReplyDelete
  12. This comment has been removed by the author.

    ReplyDelete

Important -Comments with Links will be deleted immediately upon our review and If you are asking a question click the 'Subscribe By Mail' link below the comment form to be notified of replies.