random
1

Add Advance JSON Search Box For Blogger Blog

You have ever use Google Custom Search box to your blogger  blog, using search blogger blog widget. JSON search actually get user query and garb the same content from your blogger blog feed that is made by blogger content so in actually we will get blogger content in results that actually user want.
JSON search box is a blogger blog widget allow your user to type there query in the input and after this the left work is for coding that will find that query in your blogger blog feed then it will show the desired or required post or article to your user within seconds and in stylish way. Here is how!

Shouted Blog's Gift...!
How To Add Google Custom Search Engine In Your Blogger Blog And Make Money

Add Advance JSON Search Box For Blogger Blog


Step No. 01
Go To Your Blogger Dashboard.

Step No. 02
Open Your Desired Blog In Which You Are Interested To Display That Search Box.

Step No. 03
Go To Your Layout  tab From your Blogger Dashboard.


Step No. 04
Click “Add A Gadget” Where You Want To Display It.
Add Advance JSON Search Box For Blogger Blog
Add Advance JSON Search Box For Blogger Blog

Step No. 05
Now Head Over To HTML/JavaScript Widget Form List.


Step No. 06
Now Copy The Below Code And Paste It In To Content Box.

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


Step No. 07
Now Save Your Blog.

You Have Done.

Go To Your Blogger Blog Live And Check It Out.

Customization

Don't Forget To Replace Yellow Highlighted Color Text With Your.
Shouted Blog's Gift...!
Add Advance JSON Search Box For Blogger Blog Reviewed by Ghulam Haider on 09:23:00 Rating: 5

No comments:

All Rights Reserved by Shouted Blog © 2014 - 2015
Designed by Ghulam Haider

Contact Form

Name

Email *

Message *

Powered by Blogger.