Cara Membuat Search Result Google Custom Search Melayang

Cara Membuat Search Result Google Custom Search Melayang

Cara Membuat Search Result Google Custom Search Melayang

Cara Membuat Search Result Google Custom Search Melayang

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

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.

Cara Membuat Search Result Google Custom Search Melayang
Cara Membuat Search Result Google Custom Search Melayang

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

Cara Membuat Search Result Google Custom Search Melayang
Cara Membuat Search Result Google Custom Search Melayang

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

Cara Membuat Search Result Google Custom Search Melayang
Cara Membuat Search Result Google Custom Search Melayang

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

Cara Membuat Search Result Google Custom Search Melayang
Cara Membuat Search Result Google Custom Search Melayang

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.

Cara Membuat Search Result Google Custom Search Melayang
Cara Membuat Search Result Google Custom Search Melayang

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-box

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

sumber : http://www.kompiajaib.com/2016/04/membuat-search-result-google-custom.html

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Blogger
Disqus
Pilih Sistem Komentar Yang Disukai

0 Comment

Add Comment

Berkomentarlah dengan baik, Kepribadian anda tercemin saat berkomentar.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like CIDOSHARE? Keep us running by whitelisting CIDOSHARE in your ad blocker.

This is how to whitelisting CIDOSHARE in your ad blocker.

Thank you!

×
×
×