Membuat Search Result Google Custom Search Melayang

Sebenarnya untuk menciptakan 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 berdasarkan saya hasil pencarian postingannya dari pencarian Blogger tidak seakurat Google Custom Search). Untuk itu saya tertarik untuk mencoba menciptakan kotak pencarian Google yang ibarat mirip itu.

Kemudian saya mencari pembiasaan dari layout yang disediakan oleh Google Custom Search yang kemudian saya modifikasi untuk mendapat tampilan ibarat tampilan kotak pencarian Blogger dari DTE. Hasilnya sanggup Anda coba di blog ini (jika saya belum mengganntinya lagi hehehe) atau sanggup 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 ibarat tampak pada gambar di bawah ini.


2. Setelah Anda klik tombol Create, akan muncul halaman gres kemudian klik tombol Control Panel untuk memodifikasi tampilannya.


3. Pada sajian di sebelah kiri pilih Look and Feel dengan tab di atas pada Layout kemudian pilih tampilan Two Column kemudian Save perubahannya.


4. Kemudian beralih pada tab Theme di atas dan pilih tampilan Default kemudian Save perubahannya.


5. Silahkan klik sajian Setup di samping kiri dengan tab Basics di atas dan klik tombol Search Engine ID untuk mendapat ID Google Custom Search blog kita kemudian 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 arahan 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 arahan CSS di bawah ini dan simpan di atas arahan </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 arahan width pada css #search-box

8. Kemudian silahkan copy arahan javascript di bawah ini dan simpan di atas arahan </body> atau Anda sanggup juga men-defer arahan 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 arahan 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 mempunyai atau memakai kotak percarian Google Custom Search, Anda hanya perlu melaksanakan langkah-langkahnya mulai dari langkah ke-3 di atas.


Sumber https://www.kompiajaib.com/

Share this post