Membuat Kotak Pencarian Keren Di Blog Menggunakan (JSON)

Posted by at

Kotak Pencarian 

Kotak pencarian, bidang pencarian atau bilah pencarian adalah elemen kontrol grafis yang digunakan dalam program komputer, seperti manajer file atau browser web, dan di situs web. Kotak pencarian biasanya kotak teks baris tunggal atau ikon pencarian (yang akan berubah menjadi kotak pencarian pada aktivitas klik) dengan fungsi khusus menerima input pengguna untuk dicari dalam database. Kotak pencarian pada halaman web biasanya digunakan untuk memungkinkan pengguna memasukkan kueri untuk dikirimkan ke skrip sisi server mesin pencari Web, di mana database indeks ditanyai untuk entri yang berisi satu atau lebih kata kunci penelitian pengguna.

Pengertian JSON

JSON (JavaScript Object Notation) adalah suatu format ringkas pertukaran data komputer. Formatnya berbasis teks dan terbaca-manusia serta digunakan untuk merepresentasikan struktur data sederhana dan larik asosiatif. 

Format JSON sering digunakan untuk mentransmisikan data terstruktur melalui suatu koneksi jaringan pada suatu proses yang disebut serialisasi. Aplikasi utamanya adalah pada pemrograman aplikasi web AJAX dengan berperan sebagai alternatif terhadap penggunaan tradisional format XML.

Membuat Kotak Pencarian

1. Login ke blogger.com

2. Di laman dashboard, klik Tema >> Edit Tema

3. Copy kode CSS di bawah ini, lalu paste setelah <style> atau sebelum </style>

.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}
}

4. Klik Simpan Tema

5. Masih di dashboard blogger, klik Halaman >> Laman Baru , di bagian Text Editor klik HTML , copy kode-kode di bawah ini , lalu paste

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

 BACA JUGA : Cara Membuat Breadcrumb di blog (JSON-LD)

<script type='text/javascript'>
//<![CDATA[
var searchFormConfig = {
   url: "https://wenxploit.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/AVvXsEgG4hv2uAGvNxJcCSXYYZZ96d1Tb4cEUv7hyphenhyphenAny7O_wXxOdvyqUhkit6J6OthWm2EM72sYItzGeMf3D3pOQiXJ03XTtbOgHA0a0Hj8BdEkfSNaaJCvhLZDl9kICkDijuuEEEfDgzu_tRHtU/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>

Ganti https://wenxploit.com dengan URL blog anda

JQuery

<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 di atas berfungsi untuk memberi efek "AKTIF" jika input search diklik.

File Eksternal (Optional)

Kalau link file eksternal (JQuery & Font Awesome) di bawah ini sudah ada di tema blog , maka tidak perlu ditambahkan lagi.

jQuery

<script src='//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'/>

6. Selanjutnya, beri judul halaman nya sesuai keinginan, setelah itu klik Publikasikan

7. Masih di dashboard blogger, klik Tema >> Edit Tema , cari kode yg berkaitan dengan kotak pencarian di blog , seperti

<form action='/search' id='search-form' method='get' role='search'>

Kalau sudah ketemu, ganti '/search' dengan URL dari halaman yg sudah dibuat tadi, maka hasilnya

<form action='https://www.DOMAIN.com/p/search.html' id='search-form' method='get' role='search'>

8. Terakhir klik, Simpan Tema

Sampai di sini aja tutorial Membuat Kotak Pencarian Keren Di Blog Menggunakan (JSON) yg mungkin bisa dicoba di blog. Terima Kasih!

Labels: