खोज बॉक्स लागू करना

Programmable Search Engine बनाने के बाद, अपनी साइट में Programmable Search Element को जोड़ा जा सकता है. इसके लिए, आपको कुछ कोड कॉपी करके अपनी साइट के एचटीएमएल में, उस जगह पर चिपकाना होगा जहां आपको अपना सर्च इंजन दिखाना है.

  1. कंट्रोल पैनल में, उस सर्च इंजन पर क्लिक करें जिसका आपको इस्तेमाल करना है.
  2. खास जानकारी पेज के बुनियादी सेक्शन में जाकर, कोड पाएं पर क्लिक करें. कोड कॉपी करें और उसे अपने पेज के एचटीएमएल सोर्स कोड में वहां चिपकाएं, जहां आपको Programmable Search Element दिखाना है.

<div class="gcse-search"></div> एलिमेंट एक प्लेसहोल्डर है - यह वह जगह है जहां खोज एलिमेंट (खोज बॉक्स और खोज के नतीजे, दोनों) को रेंडर किया जाएगा.

<!-- अपना Programmable Search Engine आईडी यहां डालें --> <script async src="https://cse.google.com/cse.js?cx=017643444788069204610:4gvhea_mvga"></script>
<div class="gcse-search"></div>

अलग-अलग लेआउट आज़माए जा रहे हैं

कई मौकों पर, खोज बॉक्स को खोज नतीजों से अलग दिखाना सही रहता है. दो कॉलम वाले लेआउट की मदद से, अपने पेज के एक हिस्से (उदाहरण के लिए, साइडबार में) खोज बॉक्स को रेंडर किया जा सकता है. साथ ही, नतीजों को किसी दूसरे हिस्से में दिखाया जा सकता है, जैसे कि पेज का मुख्य हिस्सा.

अपने इंजन का लेआउट बदलने के लिए, कंट्रोल पैनल में रंग-रूप पेज के लेआउट सेक्शन पर जाएं. कंट्रोल पैनल में 2-कॉलम वाला लेआउट चुनने और सेव करने के बाद, आपको Search Element के लिए एचटीएमएल कोड भी बदलना होगा.

<!-- अपना Programmable Search Engine आईडी यहां डालें --> <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>

दो पेज वाला विकल्प एक और दिलचस्प लेआउट है. इसकी मदद से, एक पेज पर अपना खोज बॉक्स डाला जा सकता है और पता बार में मौजूद पैरामीटर का इस्तेमाल करके, स्टैंडर्ड खोज नतीजों को दूसरे पेज पर रेंडर किया जा सकता है.

कंट्रोल पैनल में दो पेज वाला लेआउट चुनें और सेव करें. किसी एक पेज पर एक अलग खोज बॉक्स लागू करें. इसमें resultsUrl एट्रिब्यूट को बदलकर, उस यूआरएल पर ले जाएं जहां आपको नतीजे दिखाने हैं.

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

इसे आज़माएँ

एक स्टैंड-अलोन खोज परिणाम पेज लागू करने के लिए, अपने परिणाम पेज में परिणाम कोड स्निपेट चिपकाएं:

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

अब आप यूआरएल में "q" तर्क भेजकर, इस पेज पर खोज के नतीजे ट्रिगर कर सकते हैं:

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

पता बार में q=myQuery पैरामीटर का इस्तेमाल करें - इसी से <div class="gcse-searchresults-only"></div> एलिमेंट को पता चलता है कि कौनसे क्वेरी के नतीजे दिखाने हैं.

इसे आज़माएँ

अगला...

ऑटोकंप्लीट की सुविधा चालू करना पर जाएं.