Sejak awal aku selalu ingin membuat halaman search khusus di blogku yang halamannya tidak berganti ketika fungsi search-nya berjalan.
Karena biasanya, para pengembang website dan blog menggunakan widget search yang menggunakan fungsi GET dan ditaruh di sidebar website mereka.
Aku ingin tampil berbeda dari mereka semua.
Karena itulah search page tersebut aku buat.
Oiya, pada awalnya aku kira search box model begini harus menggunakan AJAX agar bisa berfungsi.
Tapi ternyata tidak.
Search box ini bisa berjalan dengan mulus menggunakan bahasa JSON.
Aku berterima kasih kepada pemilik asli source code search box ini.
Kode yang dia berikan sangat mudah dimengerti dan di edit kembali.
Berbeda dengan search box yang dibagikan sumber aslinya.
Search box yang aku berikan di panduan ini sudah aku modif sedemikian ruap hingga tampilannya menjadi lebih bagus dan responsif di perangkat smartphone.
Cek aja demonya di halaman advanced search blog ini.
Gimana? sudah lihat demo nya? tertarik ingin membuatnya juga?
Kalau iya, ikutin panduan ini sampai selesai.
Informasi
Fungsi : Mencari artikel disebuah blog/website sesuai dengan keyword yang diketik dengan menggunakan bahasa pemrograman JSON.
Tingkat Kesulitan : Lanjutan
Bahasa Pemrograman : JSON, CSS, HTML, Javascript, jQuery
File Eksternal : jQuery, Font Awesome
Source code : Code Nirvana
CSS
.d-flex{display:flex!important;}
.border-radius-left{5px 0 0 5px}
.border-radius-right{0 5px 5px 0;}
.thing{transition:.3s all;box-shadow:0 0 0 0.25rem #c4e7ff}
#feed-input {transition:.3s all;display: inline-block;width: 100%;padding: 12px 15px;background: #f3f4f5;color:#333;font-size: 1rem;border:0;}
#search-btn {transition:.3s all;background: #f3f4f5;border: 0 none;color: #888;padding: 12px 15px;cursor: pointer;font-size: 1rem;}
#search-container {height:auto;overflow:auto;padding:0;display:none;}
#search-container mark {background-color: transparent;color:#09f;text-transform:uppercase;}
#search-container a {text-decoration:none;color:#333333;font-weight:bold;font-size:1.2rem;display:block;white-space: break-spaces;}
#search-container a:hover {color:#0099ff;}
#search-container ol li h3{margin:0 auto .5rem!important;}
#search-container h4 {display:none;}
#search-container ol { background:transparent; border:none; margin:0 0 10px; padding:0 0;}
#search-container li {margin:0 auto 1.5rem;list-style:none;overflow:hidden;word-wrap:break-word;white-space:nowrap;-webkit-transition:.3s;-moz-transition:.3s;-ms-transition:.3s;-o-transition:.3s;}
#search-container li img {display:block; float:left; margin:auto 1rem auto 0;}
#search-container li p {display:inline-block;font-size: 1rem; text-align: left;color:#aaa;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;width:55%;}
#search-loader {color:#333;display:none;}
#search-container li p {margin:0;}
#search-container .closebtn {display:none;}
@media(max-width:768px){
#search-container li img{width:100%;margin-bottom:1rem!important;}
#search-container li p{width:100%;}
#search-container li{border:1px solid #dee2e6!important;padding:1rem!important;border-radius:.75rem}
}HTML
<form class="d-flex form-search" action="/search" onsubmit="return updateScript();">
<input class="border-radius-left" id="feed-input" name="q" placeholder="Ketik sesuatu seperti : CSS" size="40" type="text" />
<button class="border-radius-right" id="search-btn" onkeyup="resetField();" type="submit"><i class="fa fa-search"></i></button>
</form>
<div id='search-container'></div>
<div id='search-loader'>Loading...</div>Javascript & JSON
<script type='text/javascript'>
//<![CDATA[
var searchFormConfig = {
url: "https://moccatory.blogspot.com", //Search Site URL
numPost: 100, //Number Of Search Results
summaryPost: true, //enable-disable Search Result Summary
summaryLength: 400, //Search Result Summary Length in words
resultTitle: "Hasil Pencarian dengan Kata Kunci", //Search Result Container Title
noResult: "Hasil tidak ada", //No Result Tittle
resultThumbnail: true, //enable-disable Search Result Thumbnail
thumbSize: 260, //Search Result Thumbnail Size in px
fallbackThumb: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdI4yd1Z1jDQTinWdUPk85_-NKSIx9KyyE-vi1zWx2EZ4j5PAmaR7elTQCwlnpXyRGMJgabUXz6in4g8fIE1Zci54eRwOqtA_hQywO3OvyGI_joel7ZqyqRb74zWSaQiSQBTrq7AOujwrR/s1600/no-img.jpg" //No Thumbnail
};
function getId(a){return document.getElementById(a)}var config=searchFormConfig,input=getId("feed-input"),resultContainer=getId("search-container"),resultLoader=getId("search-loader"),skeleton="";function showResult(l){var k=l.feed.entry?l.feed.entry:"",a,g,e;skeleton="<h4>"+config.resultTitle+" ""+input.value+""</h4>";skeleton+='<a class="closebtn" title="Close" href="#close" onclick="resultContainer.style.display=\'none\';return false;">×</a><ol>';if(k===""){skeleton+="<li>"+config.noResult+"</li>"}for(var d=0;d<config.numPost;d++){if(d==k.length){break}var b=new RegExp(input.value,"ig"),f=k[d],h=f.title.$t.replace(b,"<mark>"+input.value+"</mark>");for(var c=0;c<f.link.length;c++){if(f.link[c].rel=="alternate"){a=f.link[c].href;break}}g=("summary" in f&&config.summaryPost===true)?f.summary.$t:"";if(config.resultThumbnail===true){e=("media$thumbnail" in f)?f.media$thumbnail.url.replace(/\/s[0-9]+\-c/g,"/s"+config.thumbSize):config.fallbackThumb}g=g.replace(/<br ?\/?>/ig," ").replace(/<.*?>/g,"").replace(/[<>]/g,"");if(g.length>config.summaryLength){g=g.substring(0,config.summaryLength)+"..."}g=g.replace(b,"<mark>"+input.value+"</mark>");skeleton+='<li><a href="'+a+'" target="_blank"><img class="border border-radius" src="'+e+'" alt="" /></a><h3 class="m-0 mb-2"><a href="'+a+'" target="_blank">'+h+"</a></h3><p>"+g+"</p></li>"}skeleton+="</ol>";resultContainer.innerHTML=skeleton;resultLoader.style.display="none";resultContainer.style.display="block"}(function(){var a=document.createElement("script");a.type="text/javascript";a.id="search-feed-script";document.getElementsByTagName("head")[0].appendChild(a)})();function updateScript(){resultContainer.style.display="none";resultLoader.style.display="block";var a=getId("search-feed-script"),b=document.createElement("script"),c=input.value;b.id="search-feed-script";b.type="text/javascript";b.src=config.url+"/feeds/posts/summary?alt=json-in-script&q="+c+"&max-results="+config.numPost+"&callback=showResult";a.parentNode.removeChild(a);document.getElementsByTagName("head")[0].appendChild(b);return false}function resetField(){if(input.value===""){resultContainer.style.display="none";resultLoader.style.display="none"}};
//]]>
</script>Perhatikan kode yang aku beri Tanda seperti ini.
Kode yang bertanda, silahkan diganti dengan alamat website/blog kamu.
jQuery (Optional)
<script>
jQuery(document).ready(function($) {
$("#feed-input").focus(function(){
$(this).parent().addClass("thing");
$("#search-btn").addClass("thing");
}).blur(function(){
$(this).parent().removeClass("thing").delay(1000);
$("#search-btn").removeClass("thing").delay(1000);
})
});
</script>Script Jquery diatas hanya berfungsi untuk memberi efek 'aktif' jika input search diklik.
Boleh digunakan, boleh juga tidak. Terserah kamu.
File Eksternal (Optional)
jQuery
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>Font Awesome
<link async='async' href='//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>Kalau script diatas sudah terpasang di blog/website mu, kamu tidak perlu menambahkan script diatas lagi.
Cara Pasang
Copy semua kode diatas, lalu Paste di halaman statis blog kamu.
Jangan lupa ubah script yang aku beri tanda.
Setelah itu Save dan Publish halaman statis tersebut.
