Kotak Pencarian (Search Box) Blogger dengan Ajax JQuery ~ Soft For Us

Kotak Pencarian (Search Box) Blogger dengan Ajax JQuery - Sebenarnya sudah banyak yang share tentang pencarian pada Platform Blogger. tapi yang Saya Akan tulis sekarang adalah Kotak Pencarian (Search Box) Blogger dengan Ajax JQuery. Sebenarnya tutorial ini saya temukan di Blog yang sudah tidak Asing lagi yaitu dte.web.id.

Demo Hasil Pencariannya

Tutorialnya

Pertama Masuk Ke dasboard Blog kalian.
Masuk tab Template.
Dan simpan CSS Dibawah Ini sebelum ]]></b:skin> Atau Sebelum </style>

#search-css { width:100%; padding:0 }
#search-form-feed { width:100%; position:relative; margin:0 0 5px; padding:0 0; font:normal normal 11px Arial,Sans-Serif; color:#333 }
#feed-q-input { display:block; width:100%; border:1px solid #666; background-color:#f7f7f7; padding:5px 5px; font:normal bold 13px Tahoma,Arial,Sans-Serif; color:#bbb; margin:0 0; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box }
#feed-q-input:focus { background-color:#ddd; color:#333; outline:none; }
#search-result-container { width:100%; height:400px; overflow:auto; position:absolute; top:-10px; right:0; z-index:999; background-color:#0070b0; border:2px solid white; padding:10px 10px 0; margin:10px 0 0; box-shadow:0 1px 2px rgba(0,0,0,.4),0 7px 7px -4px rgba(0,0,0,.4); display:none }
#search-result-container mark { background-color:#0070b0; color:white }
#search-result-container a { text-decoration:none; color:#0D3E71; font-weight:bold; font-size:12px; display:block }
#search-result-container a:hover { color:#AD3000 }
#search-result-container h4 { margin:0 0 10px; font:normal bold 12px ' Trebuchet MS' ,Arial,Sans-Serif; color:#eee }
#search-result-container ol { background:transparent; border:none; margin:0 0 10px; padding:0 0 }
#search-result-container li { color:#aaa; margin:0 0 1px; padding:7px 8px; list-style:none; border:1px solid #B7C1CE; background-color:white; overflow:hidden; word-wrap:break-word }
#search-result-container li img { display:block; float:left; margin:0 10px 4px 0; border:1px solid #B7C1CE; background:transparent url("data:image/gif;base64,R0lGODlhEAAQAPQAAP///zMzM/n5+V9fX5ycnDc3N1FRUd7e3rm5uURERJGRkYSEhOnp6aysrNHR0WxsbHd3dwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAAFUCAgjmRpnqUwFGwhKoRgqq2YFMaRGjWA8AbZiIBbjQQ8AmmFUJEQhQGJhaKOrCksgEla+KIkYvC6SJKQOISoNSYdeIk1ayA8ExTyeR3F749CACH5BAkKAAAALAAAAAAQABAAAAVoICCKR9KMaCoaxeCoqEAkRX3AwMHWxQIIjJSAZWgUEgzBwCBAEQpMwIDwY1FHgwJCtOW2UDWYIDyqNVVkUbYr6CK+o2eUMKgWrqKhj0FrEM8jQQALPFA3MAc8CQSAMA5ZBjgqDQmHIyEAIfkECQoAAAAsAAAAABAAEAAABWAgII4j85Ao2hRIKgrEUBQJLaSHMe8zgQo6Q8sxS7RIhILhBkgumCTZsXkACBC+0cwF2GoLLoFXREDcDlkAojBICRaFLDCOQtQKjmsQSubtDFU/NXcDBHwkaw1cKQ8MiyEAIfkECQoAAAAsAAAAABAAEAAABVIgII5kaZ6AIJQCMRTFQKiDQx4GrBfGa4uCnAEhQuRgPwCBtwK+kCNFgjh6QlFYgGO7baJ2CxIioSDpwqNggWCGDVVGphly3BkOpXDrKfNm/4AhACH5BAkKAAAALAAAAAAQABAAAAVgICCOZGmeqEAMRTEQwskYbV0Yx7kYSIzQhtgoBxCKBDQCIOcoLBimRiFhSABYU5gIgW01pLUBYkRItAYAqrlhYiwKjiWAcDMWY8QjsCf4DewiBzQ2N1AmKlgvgCiMjSQhACH5BAkKAAAALAAAAAAQABAAAAVfICCOZGmeqEgUxUAIpkA0AMKyxkEiSZEIsJqhYAg+boUFSTAkiBiNHks3sg1ILAfBiS10gyqCg0UaFBCkwy3RYKiIYMAC+RAxiQgYsJdAjw5DN2gILzEEZgVcKYuMJiEAOwAAAAAAAAAAAA==") no-repeat 50% 50%; padding:2px 2px }
#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-form-feed input[type="submit"] { border:1px solid #555; width:27px; height:23px; text-indent:-9999px; background-color:green; background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAASCAYAAAC9+TVUAAABGUlEQVQ4y2P4//8/AxruA+LpaFgIizo4RuYUA/FVIH6ABV8H4i58hjADcQkQ30fSdAeq8RaaYd24DFFCU7gJiF2AmAeINYB4CZp8EjZDViEpWIjDyeVQ14HUHMZmyFGo5GUgtsITgDuh6q4BsQK6IQdw2YCGtyK5uBeXIceBmA2PIZug6u4CcR66IcegkvewBRoUSwHxCai6C9jCJBfJmWeB2ABNkRBSuIHwQWyG8EPD4wFSAE+Aptw+JJeC8Bmoq7CmWJBth3CkVvSUm4Qv2YsC8Tyk9PAAKSDvovFTcBkCw7JAHA1NeO1QPihdrEUy6D6yQQwE0gYy5gTi1WguCiHVEBhGziZV5BoCwvOhiU+cEkM4oRgUGVIAIQD3G3abOoAAAAAASUVORK5CYII="); background-repeat:no-repeat; background-position:50% 50%; border:none; float:right; color:white; font-weight:bold; cursor:pointer; margin:-28px 0 0 -1px; transition-duration:3s; z-index:2 }
#search-form-feed input[type="submit"]:hover { background-color:gold; -o-transition:0.6s linear; -ms-transition:0.6s linear; -moz-transition:0.6s linear; -webkit-transition:0.6s linear; transition:all .4s ease-out }

Dan Ini Kode HTML nya . Anda Bisa Tempatkan Sesua Keinginan Anda. Kalo saya menempatkan nya Di Sidebar Sebelah Kanan
Jika ingin Di sidebar Anda Bisa simpan Kode dibawah Ini pada Widget HTML/Javascript

<div id='search-css'>
<div id='search-form-feed'>
<form action='/search' onsubmit='return updateScript();'>
<input id='feed-q-input' name='q' onfocus='this.value=&#39;&#39;;' onkeyup='resetField();' type='text' value='Cari artikel...'/><input type='submit' value='Go'/>
</form>
<div id='search-result-container'></div>
<div id='search-result-loader'>Loading...</div>
</div>
<script type='text/javascript'>
//<![CDATA[
var searchFormConfig={url:"http://ridwan-hex.blogspot.com",numPost:9999,summaryPost:true,summaryLength:400,resultTitle:"Hasil untuk kata kunci",noResult:"Tidak ditemukan",resultThumbnail:true,thumbSize:70,fallbackThumb:"http://reader-download.googlecode.com/svn/trunk/images/no-image-72x72.png"};function getId(id){return document.getElementById(id)}var config=searchFormConfig,input=getId('feed-q-input'),resultContainer=getId('search-result-container'),resultLoader=getId('search-result-loader'),skeleton='';function showResult(json){var entry=json.feed.entry?json.feed.entry:"",url,summary,img;skeleton='<h4>'+config.resultTitle+' &quot;'+input.value+'&quot;</h4>';skeleton+='<a title="Close" style="display:block;position:absolute;top:9px;right:12px;line-height:normal;text-decoration:none;color:gold;font-size:160%;" href="#close" onclick="resultContainer.style.display=\'none\';return false;">&times;</a><ol>';if(entry===""){skeleton+='<li>'+config.noResult+'</li>'}for(var i=0;i<config.numPost;i++){if(i==entry.length)break;var mark=new RegExp(input.value,"ig"),entries=entry[i],title=entries.title.$t.replace(mark,"<mark>"+input.value+"</mark>");for(var j=0;j<entries.link.length;j++){if(entries.link[j].rel=='alternate'){url=entries.link[j].href;break}}summary=("summary"in entries&&config.summaryPost===true)?entries.summary.$t:"";if(config.resultThumbnail===true){img=("media$thumbnail"in entries)?entries.media$thumbnail.url.replace(/\/s[0-9]+\-c/g,"/s"+config.thumbSize+"-c"):config.fallbackThumb}summary=summary.replace(/<br ?\/?>/ig," ").replace(/<.*?>/g,"").replace(/[<>]/g,"");if(summary.length>config.summaryLength){summary=summary.substring(0,config.summaryLength)+'...'}summary=summary.replace(mark,"<mark>"+input.value+"</mark>");skeleton+='<li><img style="width:'+config.thumbSize+'px;height:'+config.thumbSize+'px;" src="'+img+'" alt="" /><a href="'+url+'" target="_blank">'+title+'</a>'+summary+'</li>'}skeleton+='</ol>';resultContainer.innerHTML=skeleton;resultLoader.style.display="none";resultContainer.style.display="block"}(function(){var s=document.createElement('script');s.type="text/javascript";s.id="search-feed-script";document.getElementsByTagName('head')[0].appendChild(s)})();function updateScript(){resultContainer.style.display="none";resultLoader.style.display="block";var script=getId('search-feed-script'),newScript=document.createElement('script'),val=input.value;newScript.id="search-feed-script";newScript.type="text/javascript";newScript.src=config.url+"/feeds/posts/summary?alt=json-in-script&q="+val+"&max-results="+config.numPost+"&callback=showResult";script.parentNode.removeChild(script);document.getElementsByTagName('head')[0].appendChild(newScript);return false}function resetField(){if(input.value===""){resultContainer.style.display="none";resultLoader.style.display="none"}}
//]]>
</script>
</div>