Menerapkan kotak penelusuran

Setelah membuat Programmable Search Engine, Anda dapat menambahkan Elemen Programmable Search ke situs Anda. Untuk melakukannya, Anda harus menyalin beberapa kode dan menempelkannya ke HTML situs tempat Anda ingin menampilkan mesin telusur.

  1. Di Control Panel, klik mesin telusur yang ingin Anda gunakan.
  2. Di bagian Dasar di halaman Ringkasan, klik Dapatkan kode. Salin kode dan tempelkan ke kode sumber HTML halaman tempat Anda ingin menampilkan Elemen Programmable Search.

Elemen <div class="gcse-search"></div> adalah placeholder - di sinilah elemen penelusuran (baik kotak penelusuran maupun hasil penelusuran) akan dirender.

<!-- Masukkan ID Programmable Search Engine Anda di sini --> &lt;script async src=&quot;https://cse.google.com/cse.js?cx=017643444788069204610:4gvhea_mvga&quot;&gt;&lt;/script&gt; 
<div class="gcse-search"></div>

Mencoba tata letak yang berbeda

Di banyak kesempatan, kotak penelusuran harus muncul secara terpisah dari hasil penelusuran. Tata letak dua kolom memungkinkan Anda merender kotak penelusuran di satu area halaman Anda (misalnya di sidebar) dan menampilkan hasil di area yang berbeda (misalnya, area utama halaman).

Untuk mengubah tata letak mesin Anda, buka bagian Tata Letak di halaman Tampilan dan nuansa di Panel Kontrol. Setelah memilih dan menyimpan tata letak 2 kolom di Control Panel, Anda juga perlu mengubah kode HTML untuk Elemen Penelusuran.

<!-- Masukkan ID Programmable Search Engine Anda di sini --> &lt;script async src=&quot;https://cse.google.com/cse.js?cx=017643444788069204610:4gvhea_mvga&quot;&gt;&lt;/script&gt; 
<div style="border: 1px solid blue;">
    Area 1 (for example a sidebar)
    <div class="gcse-searchbox"></div>
</div>

<div style="border: 1px solid red;">
    Area 2 (for example main area of the page)
    <div class="gcse-searchresults"></div>
</div>

Tata letak menarik lainnya adalah opsi dua halaman. Dengan demikian, Anda dapat menerapkan kotak penelusuran Anda sendiri di satu halaman dan merender hasil penelusuran standar pada halaman lain menggunakan parameter di kolom URL.

Pilih dan simpan tata letak dua halaman di Control Panel. Di satu halaman, terapkan kotak penelusuran mandiri dengan mengubah atribut resultsUrl agar mengarah ke URL tempat Anda ingin menampilkan hasil.

<script async src="https://cse.google.com/cse.js?cx=YOUR_ENGINE_ID"></script>
<div class="gcse-searchbox-only" data-resultsUrl="YOUR_RESULTS_PAGE_URL"></div>

Cobalah

Untuk menerapkan halaman hasil penelusuran mandiri, tempelkan cuplikan kode hasil ke halaman hasil Anda:

<script async src="https://cse.google.com/cse.js?cx=YOUR_ENGINE_ID"></script>
<div class="gcse-searchresults-only"></div>

Sekarang Anda dapat memicu hasil penelusuran di halaman ini dengan meneruskan "q" di url:

https://my-results-page-url.com/?q=myQuery

Perhatikan parameter q=myQuery di kolom URL - ini adalah cara elemen <div class="gcse-searchresults-only"></div> mengetahui hasil kueri yang akan ditampilkan.

Cobalah

Berikutnya...

Lanjutkan ke Mengaktifkan pelengkapan otomatis.