LATEST >>

Welcome Here And Thanks For Visiting. Like Us On Facebook...

EXEIdeas – Let's Your Mind Rock » Blogspot / Blogspot Widgets » New JSON Search Box For Blogger To Search Quick With Perfect Results

New JSON Search Box For Blogger To Search Quick With Perfect Results

New JSON Search Box For Blogger To Search Quick With Perfect Results

You have ever use Google Custom Search box to your blog using search widget or many time Q-Value search that didn’t have more features as this time JSON search have. JSON search actually get user query and garb the same content from blogger feed that is made by blogger content so in actually we will get blogger content in results that actually user want.

As in Google Search and Q-Value search, your user have to move on next page after limited post so it means that they have to search there content again by clicking next next next so why to use that widget that even not user friendly. Instead of these here your user can search his desired content from one page that will show your all posts/articles data in one page.

JSON search box is a widget allow your user to type there query in the input and after this the rest work is for coding that will find that query in your feed then will show the desired post to your user within sec and in stylish way. So without any more preface, have a look below on the screenshot and then see the live demo and check out the more awesome features. After this, get your code and be happy.

New JSON Search Box For Blogger To Search Quick With Perfect Results

Features:

1.) New Search Code In Blogger History.
2.) It Will Use Your Feed To Search The User Keywords.
3.) No Q-Value Search.
4.) Search Within Your All Published Posts.
5.) Pure JavaScript, HTML, CSS Code.
6.) No Jquery Code Added.
7.) All Codes All Here, No External File Hosted.
8.) Quick To Load And Easy To Use.
9.) Stylish Interference.
10.) Result In POPUP.
11.) Close Button Added.
12.) Show All Result From Your Blog In One POPUP.
13.) Stylish CSS Added.
14.) Fully Customizable.
15.) Highlight Query In Results.

How To Add In Blogspot?

1.) Go To Your www.blogger.com
2.) Open Your Desire “Blog“.
3.) Go To “Layout“.
4.) Click “Add A Gadget” Where You Want To Add It.
5.) Now Scroll To “HTML-JAVASCRIPT
6.) Click “+” Icon To Add It.
7.) Now Copy The Below Code And Paste It To There.
8.) Click “Save“.
9.) Move To Your Desire Position, Now You Are Done.

<div id="exe_json_search_form">
<form action="/search" onsubmit="return updateScript();">
<input id="exe_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="exe_json_search_loader">Loading...</div>
<div id="exe_json_search_result_container"></div>
</div>
<script type="text/javascript">
//<![CDATA[
var searchFormConfig = {
url: "http://www.exeideas.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">
/**
* Advance Search Box For Blogger With JSON.
* Copyright 2014 EXEIdeas. All Right Reserved.
* Shared At: http://www.exeideas.com/2014/01/new-json-search-box-for-blogger.html
**/
//<![CDATA[
var _0x8cde=["x67x65x74x45x6Cx65x6Dx65x6Ex74x42x79x49x64","x65x78x65x5Fx6Ax73x6Fx6Ex5Fx73x65x61x72x63x68x5Fx66x6Fx72x6Dx5Fx69x6Ex70x75x74","x65x78x65x5Fx6Ax73x6Fx6Ex5Fx73x65x61x72x63x68x5Fx72x65x73x75x6Cx74x5Fx63x6Fx6Ex74x61x69x6Ex65x72","x65x78x65x5Fx6Ax73x6Fx6Ex5Fx73x65x61x72x63x68x5Fx6Cx6Fx61x64x65x72","","x73x63x72x69x70x74","x63x72x65x61x74x65x45x6Cx65x6Dx65x6Ex74","x74x79x70x65","x74x65x78x74x2Fx6Ax61x76x61x73x63x72x69x70x74","x69x64","x73x65x61x72x63x68x2Dx66x65x65x64x2Dx73x63x72x69x70x74","x61x70x70x65x6Ex64x43x68x69x6Cx64","x68x65x61x64","x67x65x74x45x6Cx65x6Dx65x6Ex74x73x42x79x54x61x67x4Ex61x6Dx65","x65x6Ex74x72x79","x66x65x65x64","x3Cx64x69x76x20x69x64x3Dx22x65x78x65x5Fx6Ax73x6Fx6Ex5Fx73x65x61x72x63x68x5Fx72x65x73x75x6Cx74x5Fx63x6Fx6Ex74x61x69x6Ex65x72x5Fx68x65x61x64x65x72x22x3Ex3Cx68x34x3E","x72x65x73x75x6Cx74x54x69x74x6Cx65","x20x26x71x75x6Fx74x3B","x76x61x6Cx75x65","x26x71x75x6Fx74x3Bx3Cx2Fx68x34x3E","x3Cx61x20x63x6Cx61x73x73x3Dx22x65x78x65x5Fx6Ax73x6Fx6Ex5Fx73x65x61x72x63x68x5Fx72x65x73x75x6Cx74x5Fx63x6Fx6Ex74x61x69x6Ex65x72x5Fx63x6Cx6Fx73x65x22x20x74x69x74x6Cx65x3Dx22x43x6Cx6Fx73x65x20x54x68x69x73x20x50x4Fx50x55x50x22x20x68x72x65x66x3Dx22x23x63x6Cx6Fx73x65x22x20x6Fx6Ex63x6Cx69x63x6Bx3Dx22x72x65x73x75x6Cx74x43x6Fx6Ex74x61x69x6Ex65x72x2Ex73x74x79x6Cx65x2Ex64x69x73x70x6Cx61x79x3Dx27x6Ex6Fx6Ex65x27x3Bx72x65x74x75x72x6Ex20x66x61x6Cx73x65x3Bx22x3Ex26x74x69x6Dx65x73x3Bx3Cx2Fx61x3Ex3Cx2Fx64x69x76x3Ex3Cx64x69x76x20x69x64x3Dx22x65x78x65x5Fx6Ax73x6Fx6Ex5Fx73x65x61x72x63x68x5Fx72x65x73x75x6Cx74x5Fx63x6Fx6Ex74x61x69x6Ex65x72x5Fx62x6Fx64x79x22x3Ex3Cx6Fx6Cx3E","x3Cx6Cx69x3E","x6Ex6Fx52x65x73x75x6Cx74","x3Cx2Fx6Cx69x3E","x6Ex75x6Dx50x6Fx73x74","x6Cx65x6Ex67x74x68","x69x67","x3Cx6Dx61x72x6Bx3E","x3Cx2Fx6Dx61x72x6Bx3E","x72x65x70x6Cx61x63x65","x24x74","x74x69x74x6Cx65","x6Cx69x6Ex6B","x72x65x6C","x61x6Cx74x65x72x6Ex61x74x65","x68x72x65x66","x73x75x6Dx6Dx61x72x79","x73x75x6Dx6Dx61x72x79x50x6Fx73x74","x72x65x73x75x6Cx74x54x68x75x6Dx62x6Ex61x69x6C","x6Dx65x64x69x61x24x74x68x75x6Dx62x6Ex61x69x6C","x2Fx73","x74x68x75x6Dx62x53x69x7Ax65","x2Dx63","x75x72x6C","x66x61x6Cx6Cx62x61x63x6Bx54x68x75x6Dx62","x20","x73x75x6Dx6Dx61x72x79x4Cx65x6Ex67x74x68","x73x75x62x73x74x72x69x6Ex67","x2Ex2Ex2E","x3Cx61x20x68x72x65x66x3Dx22","x22x20x74x61x72x67x65x74x3Dx22x5Fx62x6Cx61x6Ex6Bx22x3Ex3Cx6Cx69x3Ex3Cx69x6Dx67x20x73x74x79x6Cx65x3Dx22x77x69x64x74x68x3A","x70x78x3Bx68x65x69x67x68x74x3A","x70x78x3Bx22x20x73x72x63x3Dx22","x22x20x61x6Cx74x3Dx22x22x20x2Fx3Ex3Cx68x34x3E","x3Cx2Fx68x34x3Ex3Cx70x3E","x3Cx2Fx70x3Ex3Cx2Fx6Cx69x3Ex3Cx2Fx61x3E","x3Cx2Fx6Fx6Cx3Ex3Cx2Fx64x69x76x3E","x69x6Ex6Ex65x72x48x54x4Dx4C","x64x69x73x70x6Cx61x79","x73x74x79x6Cx65","x6Ex6Fx6Ex65","x62x6Cx6Fx63x6B","x73x72x63","x2Fx66x65x65x64x73x2Fx70x6Fx73x74x73x2Fx73x75x6Dx6Dx61x72x79x3Fx61x6Cx74x3Dx6Ax73x6Fx6Ex2Dx69x6Ex2Dx73x63x72x69x70x74x26x71x3D","x26x6Dx61x78x2Dx72x65x73x75x6Cx74x73x3D","x26x63x61x6Cx6Cx62x61x63x6Bx3Dx73x68x6Fx77x52x65x73x75x6Cx74","x72x65x6Dx6Fx76x65x43x68x69x6Cx64","x70x61x72x65x6Ex74x4Ex6Fx64x65"];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>
#exe_json_search_form {width:100%;}
#exe_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;}
#exe_json_search_form input[type="submit"] {background:#fff;border:1px solid #ccc;padding:5px;cursor:pointer;margin:0;width:10%;}
#exe_json_search_form_input:focus {color:#333;outline:none;}
#exe_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;}
#exe_json_search_result_container mark {color:black;font-weight:bold;background-color: yellow;}
#exe_json_search_result_container a {text-decoration:none;color:#0D3E71;font-size:12px;display:block;}
#exe_json_search_result_container h4 {margin:5px 0 0 0;font:normal bold 13px 'Trebuchet MS',Arial,Sans-Serif;color:#B50001;text-align: left;}
#exe_json_search_result_container ol {background:transparent;border:none;margin:0;padding:0;}
#exe_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;}
#exe_json_search_result_container li img {display:block;float:left;margin:0 5px 0 0;}
#exe_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;}
#exe_json_search_result_container li p {margin:0;padding:5px 0px;text-align: left;}
#exe_json_search_result_container li:hover {background:#D7F2FA;}
#exe_json_search_result_container .exe_json_search_result_container_close {display:block;position:absolute;top:7px;right:12px;line-height:normal;text-decoration:none;color:inherit;font-size:30px}
#exe_json_search_result_container_header {height:30px;}
#exe_json_search_result_container_body {width:600px;height:450px;overflow:auto;}
</style>

Customization:

1.) Change “http://www.exeideas.com” With Your Blog URL.
2.) Do The Rest If You Want.
3.)Save And Done.

Last Words:

If you like this widget then share it with your friends and leave your comment below and if you have any query then feel free to ask us. Stay tuned to us to get more like this…

You Like It, Please Share This Recipe With Your Friends Using...

Be the first to write a comment.

Leave a Reply

Your email address will not be published. Required fields are marked *