Ditulis oleh: Ditulis pada: 4/07/2016
Sebenarnya untuk membuat search result atau hasil pencarian Google Custom Search melayang sudah disediakan oleh Google dengan tampilan atau layout overlay. Namun saya tertarik dengan kotak pencarian Blogger dari tutorial DTE yang menampilkan hasil pencarian melayang di bawah kotak pencarian (sebenarnya kotak pencarian Blogger dari DTE tersebut cukup keren, namun menurut saya hasil pencarian postingannya dari pencarian Blogger tidak seakurat Google Custom Search). Untuk itu saya tertarik untuk mencoba membuat kotak pencarian Google yang mirip seperti itu.Kemudian saya mencari penyesuaian dari layout yang disediakan oleh Google Custom Search yang kemudian saya modifikasi untuk mendapatkan tampilan seperti tampilan kotak pencarian Blogger dari DTE. Hasilnya bisa Anda coba di blog ini (jika saya belum mengganntinya lagi hehehe) atau bisa dicoba DI SINI.
Bagaimana, tertarik untuk mencobanya? Silahkan ikuti langkah-langkahnya di bawah ini.
1. Silahkan masuk ke Google Custom Search dan silahkan buat kotak pencarian untuk blog Anda dengan memasukan URL blog Anda seperti tampak pada gambar di bawah ini.
2. Setelah Anda klik tombol Create, akan muncul halaman baru lalu klik tombol Control Panel untuk memodifikasi tampilannya.
3. Pada menu di sebelah kiri pilih Look and Feel dengan tab di atas pada Layout lalu pilih tampilan Two Column lalu Save perubahannya.
4. Kemudian beralih pada tab Theme di atas dan pilih tampilan Default lalu Save perubahannya.
5. Silahkan klik menu Setup di samping kiri dengan tab Basics di atas dan klik tombol Search Engine ID untuk mendapatkan ID Google Custom Search blog kita lalu catat ID-nya. Jika Anda publisher Adsense, silahkan hubungkan Google Custom Search dengan Adsense pada tab Make Money dan silahkan ikuti petunjuk selanjutnya.
6. Selanjutnya kita beralih ke blog kita untuk mulai memasang Google Custom Search di blog, Silahkan gunakan kode di bawah ini untuk menampilkan kotak pencariannya. Silahkan simpan kodenya di mana Anda ingin menampilkan kotak pencariannya untuk mengganti kotak pencarian sebelumnya di Edit HTML. Bisa juga di simpan di sidebar pada gadget HTML/JavaScript di tata letak.
<div id='search-box'>
<div id='gcsengine'></div>
<div id='gcsresults'></div>
</div>
7. Copy kode CSS di bawah ini dan simpan di atas kode
</head>
<style type='text/css'>
#search-box{width:100%;padding:0;margin:0 auto}
.gsc-results-wrapper-visible{background:#fff;padding:0 0 10px!important;-webkit-box-shadow:0 3px 5px rgba(0,0,0,.2);-moz-box-shadow:0 3px 5px rgba(0,0,0,.2);box-shadow:0 3px 5px rgba(0,0,0,.2);border:1px solid #ddd!important;width:400px;height:auto;max-height:500px;position:absolute!important;top:100%;right:0;z-index:10000;margin:10px 0 0;overflow:auto}
.gsc-search-box-tools .gsc-search-box .gsc-input{padding-right:5px!important;}
.cse .gsc-search-button input.gsc-search-button-v2,input.gsc-search-button-v2{padding:6px!important}
input.gsc-search-button{margin-top:3px!important;margin-left:0!important}
.cse .gsc-control-cse,.gsc-control-cse{background-color:#fff;border:none!important;padding:0!important}
#gs_cb50,#gs_st50,.gsib_b{vertical-align:middle}
a.gsst_a{line-height:1}
.gsc-result .gs-title{height:auto!important;word-wrap:break-word}
.gsc-results-wrapper-visible table.gsc-search-box{position:relative}
.gsc-results-wrapper-visible table{border-collapse:collapse;border-spacing:0}
.gsc-results-wrapper-visible table.gsc-search-box{border-style:none;border-width:0;border-spacing:0 0;width:100%;margin-bottom:0!important}
.gsc-results-wrapper-visible table.gsc-search-box td.gsc-input{padding-right:5px!important}
.gs-web-image-box-landscape img.gs-image,.gs-web-image-box-portrait img.gs-image{margin-left:7px;max-width:60px!important;max-height:60px!important}
.gs-image-box.gs-web-image-box.gs-web-image-box-portrait{width:80px!important}
.gs-webResult.gs-result a.gs-title:link{padding-left:0!important}
.gs-promotion div.gs-visibleUrl-long,.gs-promotion div.gs-visibleUrl-short,.gs-result .gs-title:hover,.gs-result .gs-title:hover *,.gs-webResult div.gs-visibleUrl-long,.gs-webResult div.gs-visibleUrl-short{color:#e8554e!important;transition:all .4s ease-in-out}
.gs-result .gs-title,.gs-result .gs-title *{color:#333!important;text-decoration:none!important}
.gs-result .gs-snippet{font-weight:400;word-wrap:break-word}
.gsc-control-cse .gsc-table-result b,.gsc-control-cse b{color:000!important;transition:all .4s ease-in-out}
.gsc-orderby-container{padding-right:10px!important;}
@media screen and (max-width:414px){.gsc-results-wrapper-visible{width:100%!important;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
}
</style>
Untuk mengatur lebar kotak pencarian silahkan atur kode
width pada css #search-box8. Kemudian silahkan copy kode javascript di bawah ini dan simpan di atas kode
</body> atau Anda bisa juga men-defer kode javascript ini.
<script type='text/javascript'>
//<![CDATA[
var gcseDiv=document.getElementById("gcsengine");gcseDiv.innerHTML="<gcse:searchbox></gcse:searchbox>",function(){var e="006106396690849460:uexjrtd0osq",t=document.createElement("script");t.type="text/javascript",t.async=!0,t.src=("https:"==document.location.protocol?"https:":"http:")+"//www.google.com/cse/cse.js?cx="+e;var c=document.getElementsByTagName("script")[0];c.parentNode.insertBefore(t,c)}();
function myFunction() {
document.getElementById("gcsresults").innerHTML = "<gcse:searchresults></gcse:searchresults>";
}myFunction();
//]]>
</script>
Nah silahkan ganti kode yang saya tandai di atas dengan Search Engine ID blog Anda yang didapat pada langkah ke-5. Selesai....
Selain kotak pencarian ini menghasikan hasil pencarian melayang di bawah kotak pencariannya, kotak pencarian ini juga sudah valid HTML5. Kita tahu bahwa kotak pencarian Google Custom Search tidak valid HTML5.
Jika sebelumnya Anda sudah memiliki atau menggunakan kotak percarian Google Custom Search, Anda hanya perlu melakukan langkah-langkahnya mulai dari langkah ke-3 di atas.