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

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

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

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

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

अलग-अलग लेआउट आज़माना

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

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

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

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

कंट्रोल पैनल में दो-पेज वाला लेआउट चुनें और सेव करें. एक पेज पर, अलग से खोज बॉक्स लागू करें. साथ ही, उस यूआरएल पर ले जाने के लिए 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> एलिमेंट को पता चलता है कि क्वेरी के कौनसे नतीजे दिखाए जाएंगे.

इसे आज़माएँ

आगे बढ़ें...

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