Sau khi tạo Công cụ tìm kiếm có thể lập trình, bạn có thể thêm Phần tử tìm kiếm có thể lập trình vào trang web của mình. Để làm việc này, bạn cần sao chép một số mã và dán mã đó vào HTML của trang web nơi bạn muốn công cụ tìm kiếm của mình xuất hiện.
- Trong Bảng điều khiển, hãy nhấp vào công cụ tìm kiếm bạn muốn sử dụng.
- Trong phần Cơ bản của trang Tổng quan, hãy nhấp vào Nhận mã. Sao chép và dán mã vào mã nguồn HTML của trang nơi bạn muốn Phần tử tìm kiếm có thể lập trình xuất hiện.
Phần tử <div class="gcse-search"></div> là một phần giữ chỗ, đây là nơi phần tử tìm kiếm (cả hộp tìm kiếm và kết quả tìm kiếm) sẽ xuất hiện.
<div class="gcse-search"></div>
Thử các bố cục khác nhau
Trong nhiều trường hợp, việc hộp tìm kiếm xuất hiện độc lập với kết quả tìm kiếm là điều hợp lý. Bố cục hai cột cho phép bạn hiển thị hộp tìm kiếm trong một vùng trên trang (ví dụ: trong thanh bên) và hiển thị kết quả trong một vùng khác (ví dụ: khu vực chính của trang).
Để thay đổi bố cục của công cụ, hãy chuyển đến phần Bố cục trên trang Giao diện trong Bảng điều khiển. Sau khi chọn và lưu bố cục 2 cột trong Bảng điều khiển, bạn cũng cần thay đổi mã HTML cho Phần tử tìm kiếm.
<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>
Một bố cục thú vị khác là tuỳ chọn 2 trang. Tính năng này cho phép bạn triển khai hộp tìm kiếm của riêng bạn trên một trang và hiển thị kết quả tìm kiếm chuẩn trên một trang khác bằng cách sử dụng các tham số trong thanh địa chỉ.
Chọn và lưu bố cục hai trang trong Bảng điều khiển. Trên một trang, hãy triển khai một hộp tìm kiếm độc lập, thay đổi thuộc tính resultsUrl để trỏ đến URL mà bạn muốn hiển thị kết quả.
<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>
Để triển khai trang kết quả tìm kiếm độc lập, hãy dán đoạn mã kết quả vào trang kết quả của bạn:
<script async src="https://cse.google.com/cse.js?cx=YOUR_ENGINE_ID"></script>
<div class="gcse-searchresults-only"></div>
Giờ đây, bạn có thể kích hoạt kết quả tìm kiếm trên trang này bằng cách chuyển một đối số "q" vào url:
https://my-results-page-url.com/?q=myQuery
Hãy lưu ý tham số q=myQuery trong thanh địa chỉ – đây là cách phần tử <div class="gcse-searchresults-only"></div> biết sẽ hiển thị kết quả truy vấn nào.
Tiếp theo...
Tiếp tục Bật tính năng tự động hoàn thành.