JSON Search box for blogger

Life is turning out to be very fast and quick. So here is a widget that let your users make a quick and easy search in your blog.
This newly coded search widget will give you perfect results quickly right in the page where you’re searching. The difference of JSON search box is that it is no Google like q-value search. It searches through your blog feed and gives matching result quickly. Since no JQuery code is used for this widget, this won’t slow you down. It is purely HTML and CSS coded.

SEE A LIVE DEMO FOR THE WIDGET

Adding advance jSON search box t blogger

Adding this amazingly fast and quick search box to blogger is fast and easy. Follow me,
Go to Blogger Dashboard and then navigate to Layout. Then choose Add a Gadget.
Now choose HTML/JavaScript widget from the list.
Now copy the below code into the widget and save it. Reposition the widget where you want it to appear.

<div id="bloggslab_json_search_form">
<form action="/search" onsubmit="return updateScript();">
<input id="bloggslab_json_search_form_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="bloggslab_json_search_loader">Loading...</div>
<div id="bloggslab_json_search_result_container"></div>
</div>
<script type="text/javascript">
//<![CDATA[
var searchFormConfig = {
url: "http://www.bloggslab.com",
numPost: 99999,
summaryPost: true,
summaryLength: 380,
resultTitle: "Search results for the keyword",
noResult: "No result",
resultThumbnail: true,
thumbSize: 110,
fallbackThumb: "http://i.imgur.com/57nzUbD.jpg"
};
//]]>
</script>
<script type="text/javascript">
/**
* JSON Search box for blogger
* Copyright 2014 Bloggslab.com. All Right Reserved.
* Shared At: http://www.Bloggslab.com/2014/04/new-advanced-json-search-box-for-blogger.html
**/
//<![CDATA[
var _0x8cde=["\x67\x65\x74\x45\x6C\x65\x6D\x65\x6E\x74\x42\x79\x49\x64","\x65\x78\x65\x5F\x6A\x73\x6F\x6E\x5F\x73\x65\x61\x72\x63\x68\x5F\x66\x6F\x72\x6D\x5F\x69\x6E\x70\x75\x74","\x65\x78\x65\x5F\x6A\x73\x6F\x6E\x5F\x73\x65\x61\x72\x63\x68\x5F\x72\x65\x73\x75\x6C\x74\x5F\x63\x6F\x6E\x74\x61\x69\x6E\x65\x72","\x65\x78\x65\x5F\x6A\x73\x6F\x6E\x5F\x73\x65\x61\x72\x63\x68\x5F\x6C\x6F\x61\x64\x65\x72","","\x73\x63\x72\x69\x70\x74","\x63\x72\x65\x61\x74\x65\x45\x6C\x65\x6D\x65\x6E\x74","\x74\x79\x70\x65","\x74\x65\x78\x74\x2F\x6A\x61\x76\x61\x73\x63\x72\x69\x70\x74","\x69\x64","\x73\x65\x61\x72\x63\x68\x2D\x66\x65\x65\x64\x2D\x73\x63\x72\x69\x70\x74","\x61\x70\x70\x65\x6E\x64\x43\x68\x69\x6C\x64","\x68\x65\x61\x64","\x67\x65\x74\x45\x6C\x65\x6D\x65\x6E\x74\x73\x42\x79\x54\x61\x67\x4E\x61\x6D\x65","\x65\x6E\x74\x72\x79","\x66\x65\x65\x64","\x3C\x64\x69\x76\x20\x69\x64\x3D\x22\x65\x78\x65\x5F\x6A\x73\x6F\x6E\x5F\x73\x65\x61\x72\x63\x68\x5F\x72\x65\x73\x75\x6C\x74\x5F\x63\x6F\x6E\x74\x61\x69\x6E\x65\x72\x5F\x68\x65\x61\x64\x65\x72\x22\x3E\x3C\x68\x34\x3E","\x72\x65\x73\x75\x6C\x74\x54\x69\x74\x6C\x65","\x20\x26\x71\x75\x6F\x74\x3B","\x76\x61\x6C\x75\x65","\x26\x71\x75\x6F\x74\x3B\x3C\x2F\x68\x34\x3E","\x3C\x61\x20\x63\x6C\x61\x73\x73\x3D\x22\x65\x78\x65\x5F\x6A\x73\x6F\x6E\x5F\x73\x65\x61\x72\x63\x68\x5F\x72\x65\x73\x75\x6C\x74\x5F\x63\x6F\x6E\x74\x61\x69\x6E\x65\x72\x5F\x63\x6C\x6F\x73\x65\x22\x20\x74\x69\x74\x6C\x65\x3D\x22\x43\x6C\x6F\x73\x65\x20\x54\x68\x69\x73\x20\x50\x4F\x50\x55\x50\x22\x20\x68\x72\x65\x66\x3D\x22\x23\x63\x6C\x6F\x73\x65\x22\x20\x6F\x6E\x63\x6C\x69\x63\x6B\x3D\x22\x72\x65\x73\x75\x6C\x74\x43\x6F\x6E\x74\x61\x69\x6E\x65\x72\x2E\x73\x74\x79\x6C\x65\x2E\x64\x69\x73\x70\x6C\x61\x79\x3D\x27\x6E\x6F\x6E\x65\x27\x3B\x72\x65\x74\x75\x72\x6E\x20\x66\x61\x6C\x73\x65\x3B\x22\x3E\x26\x74\x69\x6D\x65\x73\x3B\x3C\x2F\x61\x3E\x3C\x2F\x64\x69\x76\x3E\x3C\x64\x69\x76\x20\x69\x64\x3D\x22\x65\x78\x65\x5F\x6A\x73\x6F\x6E\x5F\x73\x65\x61\x72\x63\x68\x5F\x72\x65\x73\x75\x6C\x74\x5F\x63\x6F\x6E\x74\x61\x69\x6E\x65\x72\x5F\x62\x6F\x64\x79\x22\x3E\x3C\x6F\x6C\x3E","\x3C\x6C\x69\x3E","\x6E\x6F\x52\x65\x73\x75\x6C\x74","\x3C\x2F\x6C\x69\x3E","\x6E\x75\x6D\x50\x6F\x73\x74","\x6C\x65\x6E\x67\x74\x68","\x69\x67","\x3C\x6D\x61\x72\x6B\x3E","\x3C\x2F\x6D\x61\x72\x6B\x3E","\x72\x65\x70\x6C\x61\x63\x65","\x24\x74","\x74\x69\x74\x6C\x65","\x6C\x69\x6E\x6B","\x72\x65\x6C","\x61\x6C\x74\x65\x72\x6E\x61\x74\x65","\x68\x72\x65\x66","\x73\x75\x6D\x6D\x61\x72\x79","\x73\x75\x6D\x6D\x61\x72\x79\x50\x6F\x73\x74","\x72\x65\x73\x75\x6C\x74\x54\x68\x75\x6D\x62\x6E\x61\x69\x6C","\x6D\x65\x64\x69\x61\x24\x74\x68\x75\x6D\x62\x6E\x61\x69\x6C","\x2F\x73","\x74\x68\x75\x6D\x62\x53\x69\x7A\x65","\x2D\x63","\x75\x72\x6C","\x66\x61\x6C\x6C\x62\x61\x63\x6B\x54\x68\x75\x6D\x62","\x20","\x73\x75\x6D\x6D\x61\x72\x79\x4C\x65\x6E\x67\x74\x68","\x73\x75\x62\x73\x74\x72\x69\x6E\x67","\x2E\x2E\x2E","\x3C\x61\x20\x68\x72\x65\x66\x3D\x22","\x22\x20\x74\x61\x72\x67\x65\x74\x3D\x22\x5F\x62\x6C\x61\x6E\x6B\x22\x3E\x3C\x6C\x69\x3E\x3C\x69\x6D\x67\x20\x73\x74\x79\x6C\x65\x3D\x22\x77\x69\x64\x74\x68\x3A","\x70\x78\x3B\x68\x65\x69\x67\x68\x74\x3A","\x70\x78\x3B\x22\x20\x73\x72\x63\x3D\x22","\x22\x20\x61\x6C\x74\x3D\x22\x22\x20\x2F\x3E\x3C\x68\x34\x3E","\x3C\x2F\x68\x34\x3E\x3C\x70\x3E","\x3C\x2F\x70\x3E\x3C\x2F\x6C\x69\x3E\x3C\x2F\x61\x3E","\x3C\x2F\x6F\x6C\x3E\x3C\x2F\x64\x69\x76\x3E","\x69\x6E\x6E\x65\x72\x48\x54\x4D\x4C","\x64\x69\x73\x70\x6C\x61\x79","\x73\x74\x79\x6C\x65","\x6E\x6F\x6E\x65","\x62\x6C\x6F\x63\x6B","\x73\x72\x63","\x2F\x66\x65\x65\x64\x73\x2F\x70\x6F\x73\x74\x73\x2F\x73\x75\x6D\x6D\x61\x72\x79\x3F\x61\x6C\x74\x3D\x6A\x73\x6F\x6E\x2D\x69\x6E\x2D\x73\x63\x72\x69\x70\x74\x26\x71\x3D","\x26\x6D\x61\x78\x2D\x72\x65\x73\x75\x6C\x74\x73\x3D","\x26\x63\x61\x6C\x6C\x62\x61\x63\x6B\x3D\x73\x68\x6F\x77\x52\x65\x73\x75\x6C\x74","\x72\x65\x6D\x6F\x76\x65\x43\x68\x69\x6C\x64","\x70\x61\x72\x65\x6E\x74\x4E\x6F\x64\x65"];function getId(_0xdeedx2){return document[_0x8cde[0]](_0xdeedx2);} ;var config=searchFormConfig,input=getId(_0x8cde[1]),resultContainer=getId(_0x8cde[2]),resultLoader=getId(_0x8cde[3]),skeleton=_0x8cde[4];function showResult(_0xdeedxa){var _0xdeedxb=_0xdeedxa[_0x8cde[15]][_0x8cde[14]]?_0xdeedxa[_0x8cde[15]][_0x8cde[14]]:_0x8cde[4],_0xdeedxc,_0xdeedxd,_0xdeedxe;skeleton=_0x8cde[16]+config[_0x8cde[17]]+_0x8cde[18]+input[_0x8cde[19]]+_0x8cde[20];skeleton+=_0x8cde[21];if(_0xdeedxb===_0x8cde[4]){skeleton+=_0x8cde[22]+config[_0x8cde[23]]+_0x8cde[24];} ;for(var _0xdeedxf=0;_0xdeedxf<config[_0x8cde[25]];_0xdeedxf++){if(_0xdeedxf==_0xdeedxb[_0x8cde[26]]){break ;} ;var _0xdeedx10= new RegExp(input[_0x8cde[19]],_0x8cde[27]),_0xdeedx11=_0xdeedxb[_0xdeedxf],_0xdeedx12=_0xdeedx11[_0x8cde[32]][_0x8cde[31]][_0x8cde[30]](_0xdeedx10,_0x8cde[28]+input[_0x8cde[19]]+_0x8cde[29]);for(var _0xdeedx13=0;_0xdeedx13<_0xdeedx11[_0x8cde[33]][_0x8cde[26]];_0xdeedx13++){if(_0xdeedx11[_0x8cde[33]][_0xdeedx13][_0x8cde[34]]==_0x8cde[35]){_0xdeedxc=_0xdeedx11[_0x8cde[33]][_0xdeedx13][_0x8cde[36]];break ;} ;} ;_0xdeedxd=(_0x8cde[37] in _0xdeedx11&&config[_0x8cde[38]]===true)?_0xdeedx11[_0x8cde[37]][_0x8cde[31]]:_0x8cde[4];if(config[_0x8cde[39]]===true){_0xdeedxe=(_0x8cde[40] in _0xdeedx11)?_0xdeedx11[_0x8cde[40]][_0x8cde[44]][_0x8cde[30]](/\/s[0-9]+\-c/g,_0x8cde[41]+config[_0x8cde[42]]+_0x8cde[43]):config[_0x8cde[45]];} ;_0xdeedxd=_0xdeedxd[_0x8cde[30]](/<br ?\/?>/ig,_0x8cde[46])[_0x8cde[30]](/<.*?>/g,_0x8cde[4])[_0x8cde[30]](/[<>]/g,_0x8cde[4]);if(_0xdeedxd[_0x8cde[26]]>config[_0x8cde[47]]){_0xdeedxd=_0xdeedxd[_0x8cde[48]](0,config[_0x8cde[47]])+_0x8cde[49];} ;_0xdeedxd=_0xdeedxd[_0x8cde[30]](_0xdeedx10,_0x8cde[28]+input[_0x8cde[19]]+_0x8cde[29]);skeleton+=_0x8cde[50]+_0xdeedxc+_0x8cde[51]+config[_0x8cde[42]]+_0x8cde[52]+config[_0x8cde[42]]+_0x8cde[53]+_0xdeedxe+_0x8cde[54]+_0xdeedx12+_0x8cde[55]+_0xdeedxd+_0x8cde[56];} ;skeleton+=_0x8cde[57];resultContainer[_0x8cde[58]]=skeleton;resultLoader[_0x8cde[60]][_0x8cde[59]]=_0x8cde[61];resultContainer[_0x8cde[60]][_0x8cde[59]]=_0x8cde[62];} (function (){var _0xdeedx8=document[_0x8cde[6]](_0x8cde[5]);_0xdeedx8[_0x8cde[7]]=_0x8cde[8];_0xdeedx8[_0x8cde[9]]=_0x8cde[10];document[_0x8cde[13]](_0x8cde[12])[0][_0x8cde[11]](_0xdeedx8);} )();function updateScript(){resultContainer[_0x8cde[60]][_0x8cde[59]]=_0x8cde[61];resultLoader[_0x8cde[60]][_0x8cde[59]]=_0x8cde[62];var _0xdeedx15=getId(_0x8cde[10]),_0xdeedx16=document[_0x8cde[6]](_0x8cde[5]),_0xdeedx17=input[_0x8cde[19]];_0xdeedx16[_0x8cde[9]]=_0x8cde[10];_0xdeedx16[_0x8cde[7]]=_0x8cde[8];_0xdeedx16[_0x8cde[63]]=config[_0x8cde[44]]+_0x8cde[64]+_0xdeedx17+_0x8cde[65]+config[_0x8cde[25]]+_0x8cde[66];_0xdeedx15[_0x8cde[68]][_0x8cde[67]](_0xdeedx15);document[_0x8cde[13]](_0x8cde[12])[0][_0x8cde[11]](_0xdeedx16);return false;} ;function resetField(){if(input[_0x8cde[19]]===_0x8cde[4]){resultContainer[_0x8cde[60]][_0x8cde[59]]=_0x8cde[61];resultLoader[_0x8cde[60]][_0x8cde[59]]=_0x8cde[61];} ;} ;
//]]>
</script>
<style>
#bloggslab_json_search_form {width:100%;}
#bloggslab_json_search_form_input {display:block;width:90%;border:1px solid #bbb;background-color:white;padding:5px;font:normal bold 13px Tahoma,Arial,Sans-Serif;color:#ccc;margin:0;float:left;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
#bloggslab_json_search_form input[type="submit"] {background:#fff;border:1px solid #ccc;padding:5px;cursor:pointer;margin:0;width:10%;}
#bloggslab_json_search_form_input:focus {color:#333;outline:none;}
#bloggslab_json_search_result_container {width: 600px;height: 500px;position: fixed;top: 50%;left: 50%;margin-left: -300px;margin-top: -250px;z-index: 99999;background-color: rgb(229,229,229);border: 1px solid white;padding: 10px;-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;}
#bloggslab_json_search_result_container mark {color:black;font-weight:bold;background-color: yellow;}
#bloggslab_json_search_result_container a {text-decoration:none;color:#0D3E71;font-size:12px;display:block;}
#bloggslab_json_search_result_container h4 {margin:5px 0 0 0;font:normal bold 13px 'Trebuchet MS',Arial,Sans-Serif;color:#B50001;text-align: left;}
#bloggslab_json_search_result_container ol {background:transparent;border:none;margin:0;padding:0;}
#bloggslab_json_search_result_container li {margin:10px 0;padding:0 8 0 0;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;}
#bloggslab_json_search_result_container li img {display:block;float:left;margin:0 5px 0 0;}
#bloggslab_json_search_loader {position:absolute;z-index:999;background-color:#0D6786;color:white;padding:3px 5px;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;}
#bloggslab_json_search_result_container li p {margin:0;padding:5px 0px;text-align: left;}
#bloggslab_json_search_result_container li:hover {background:#D7F2FA;}
#bloggslab_json_search_result_container .bloggslab_json_search_result_container_close {display:block;position:absolute;top:7px;right:12px;line-height:normal;text-decoration:none;color:inherit;font-size:30px}
#bloggslab_json_search_result_container_header {height:30px;}
#bloggslab_json_search_result_container_body {width:600px;height:450px;overflow:auto;}
</style>

Replace http://www.bloggslab.com with your blog url.
That’s it. Love and care to all <3