Menerapkan kotak penelusuran

Setelah membuat Programmable Search Engine, Anda dapat menambahkan Programmable Search Element 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 digunakan.
  2. Di bagian Dasar di halaman Ringkasan, klik Dapatkan kode. Salin kode dan tempelkan ke kode sumber HTML halaman tempat Anda ingin Programmable Search Element muncul.

Elemen <div class="gcse-search"></div> adalah placeholder - ini adalah tempat elemen penelusuran (kotak penelusuran dan hasil penelusuran) akan dirender.

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

Mencoba tata letak yang berbeda

Terkadang, masuk akal jika kotak penelusuran muncul secara terpisah dari hasil penelusuran. Tata letak dua kolom memungkinkan Anda untuk 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, buka bagian Tata Letak halaman Tampilan dan nuansa di Panel Kontrol. Setelah memilih dan menyimpan tata letak 2 kolom di Panel Kontrol, Anda juga perlu mengubah kode HTML untuk Elemen Penelusuran.

<!-- Masukkan ID Programmable Search Engine Anda sendiri di sini --> <script async src="https://cse.google.com/cse.js?cx=017643444788069204610:4gvhea_mvga"></script> 
<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. Fitur ini memungkinkan Anda menerapkan kotak penelusuran sendiri di satu halaman dan merender hasil penelusuran standar di 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 argumen "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.