تنظيم صفحاتك في مجموعات
يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.
بعد إنشاء "محرك البحث المبرمَج"، يمكنك إضافة "عنصر البحث المبرمَج" إلى موقعك الإلكتروني. لإجراء ذلك، عليك نسخ بعض الرموز ولصقها في ملف HTML لموقعك الإلكتروني حيث تريد أن يظهر محرك البحث.
في لوحة التحكم، انقر على محرك البحث الذي تريد استخدامه.
في القسم أساسي من صفحة نظرة عامة، انقر على الحصول على الرمز.
انسخ الرمز والصقه في رمز مصدر HTML لصفحتك في المكان الذي تريد ظهور "عنصر البحث المبرمَج" فيه.
العنصر <div class="gcse-search"></div> هو عنصر نائب، وهذا هو المكان الذي سيتم فيه عرض عنصر البحث (كل من مربّع البحث ونتائج البحث).
<!-- أدخِل معرّف محرك البحث المبرمَج هنا -->
<script async src="https://cse.google.com/cse.js?cx=017643444788069204610:4gvhea_mvga"></script>
<div class="gcse-search"></div>
تجربة تخطيطات مختلفة
في كثير من الأحيان، يكون من المنطقي أن يظهر مربع بحث بشكل مستقل عن نتائج البحث. يسمح لك التخطيط من عمودين بعرض مربّع البحث في منطقة واحدة من صفحتك (على سبيل المثال في الشريط الجانبي) وعرض النتائج في منطقة مختلفة (مثل المنطقة الرئيسية من الصفحة).
لتغيير تنسيق المحرّك، انتقِل إلى قسم التنسيق في صفحة الشكل والأسلوب في لوحة التحكّم. بعد تحديد وحفظ التخطيط المكون من عمودين في لوحة التحكم، تحتاج أيضًا إلى تغيير رمز HTML لعنصر البحث.
<!-- أدخِل معرّف محرك البحث المبرمَج هنا -->
<script async src="https://cse.google.com/cse.js?cx=017643444788069204610:4gvhea_mvga"></script>
تخطيط آخر مثير للاهتمام هو خيار الصفحتين. تسمح لك هذه الأداة بتنفيذ مربّع البحث الخاص بك على إحدى الصفحات وعرض نتائج البحث العادية على صفحة أخرى باستخدام مَعلمات في شريط العناوين.
اختَر تنسيق الصفحتين واحفظه في لوحة التحكّم. على إحدى الصفحات، نفِّذ مربّع بحث مستقلاً، وغيِّر السمة resultsUrl للتوجيه إلى عنوان URL الذي تريد عرض النتائج فيه.
أما الآن، فيمكنك عرض نتائج البحث في هذه الصفحة من خلال تمرير "q" الوسيطة في عنوان URL:
https://my-results-page-url.com/?q=myQuery
لاحظ المعلَمة q=myQuery في شريط العناوين، وهذه هي الطريقة التي يعرف بها العنصر <div class="gcse-searchresults-only"></div> نتائج طلب البحث المطلوب عرضها.
تاريخ التعديل الأخير: 2025-07-25 (حسب التوقيت العالمي المتفَّق عليه)
[[["يسهُل فهم المحتوى.","easyToUnderstand","thumb-up"],["ساعَدني المحتوى في حلّ مشكلتي.","solvedMyProblem","thumb-up"],["غير ذلك","otherUp","thumb-up"]],[["لا يحتوي على المعلومات التي أحتاج إليها.","missingTheInformationINeed","thumb-down"],["الخطوات معقدة للغاية / كثيرة جدًا.","tooComplicatedTooManySteps","thumb-down"],["المحتوى قديم.","outOfDate","thumb-down"],["ثمة مشكلة في الترجمة.","translationIssue","thumb-down"],["مشكلة في العيّنات / التعليمات البرمجية","samplesCodeIssue","thumb-down"],["غير ذلك","otherDown","thumb-down"]],["تاريخ التعديل الأخير: 2025-07-25 (حسب التوقيت العالمي المتفَّق عليه)"],[[["\u003cp\u003eImplementing AdSense Custom Search Ads involves creating a custom search style, configuring the code, and implementing it on your webpage.\u003c/p\u003e\n"],["\u003cp\u003eOnly one ad request should be made per page, regardless of the number of ad blocks.\u003c/p\u003e\n"],["\u003cp\u003eEnsure your AdSense account has active permission for Custom Search Ads before implementation.\u003c/p\u003e\n"],["\u003cp\u003eRelated Search on Search pages requires using the \u003ccode\u003equery\u003c/code\u003e parameter, while Related Search on Content pages should use the \u003ccode\u003erelatedSearchTargeting\u003c/code\u003e parameter set to \u003ccode\u003econtent\u003c/code\u003e and omit the \u003ccode\u003equery\u003c/code\u003e parameter.\u003c/p\u003e\n"],["\u003cp\u003eAvoid practices like multiple ad calls, hiding ad blocks, manipulating ad block DOM, and using the \u003ccode\u003equery\u003c/code\u003e parameter with Related Search on Content pages to prevent issues.\u003c/p\u003e\n"]]],[],null,["# Implementing search box\n\nOnce you've created your Programmable Search Engine, you can add the Programmable Search Element to your site. To do this, you'll need to copy some code and paste it into your site's HTML where you want your search engine to appear.\n\n1. In the [Control Panel](https://programmablesearchengine.google.com/controlpanel/all) click the search engine you want to use.\n2. In the **Basic** section of the **Overview** page, click **Get code**. Copy the code and paste it into your page's HTML source code where you want the Programmable Search Element to appear.\n\nThe `\u003cdiv class=\"gcse-search\"\u003e\u003c/div\u003e` element is a placeholder - this is where the search element (both search box and search results) will be rendered. \n\\\u003c!-- Insert your own Programmable Search Engine ID here --\\\u003e \\\u003cscript async src=\"https://cse.google.com/cse.js?cx=017643444788069204610:4gvhea_mvga\"\\\u003e\\\u003c/script\\\u003e \n\n \u003cdiv class=\"gcse-search\"\u003e\u003c/div\u003e\n\nTrying out different layouts\n----------------------------\n\nOn many occasions, it makes sense to have a search box appear independently from search results. A two-column layout allows you to render a search box in one area of your page (for instance in the sidebar) and display results in a different one (for instance the main area of the page).\n\nTo change the layout of your engine go to the **Layout** section of the **Look and feel** page in the [Control Panel](https://programmablesearchengine.google.com/controlpanel/all). After selecting and saving the 2-column layout in the Control Panel, you also need to change the HTML code for the Search Element. \n\\\u003c!-- Insert your own Programmable Search Engine ID here --\\\u003e \\\u003cscript async src=\"https://cse.google.com/cse.js?cx=017643444788069204610:4gvhea_mvga\"\\\u003e\\\u003c/script\\\u003e \n\n \u003cdiv style=\"border: 1px solid blue;\"\u003e\n Area 1 (for example a sidebar)\n \u003cdiv class=\"gcse-searchbox\"\u003e\u003c/div\u003e\n \u003c/div\u003e\n\n \u003cdiv style=\"border: 1px solid red;\"\u003e\n Area 2 (for example main area of the page)\n \u003cdiv class=\"gcse-searchresults\"\u003e\u003c/div\u003e\n \u003c/div\u003e\n\nAnother interesting layout is the two-page option. It allows you to implement your own search box on one page and render the standard search results on another page using parameters in the address bar.\n\nSelect and save the **two-page layout** in the Control Panel. On one page, implement a stand-alone search box, changing the `resultsUrl` attribute to point to the url where you want to display the results. \n\n \u003cscript async src=\"https://cse.google.com/cse.js?cx=YOUR_ENGINE_ID\"\u003e\u003c/script\u003e\n \u003cdiv class=\"gcse-searchbox-only\" data-resultsUrl=\"YOUR_RESULTS_PAGE_URL\"\u003e\u003c/div\u003e\n\n[Try it](https://jsfiddle.net/gtpqzhac/)\n\nTo implement a stand-alone search results page, paste the results code snippet into your results page: \n\n \u003cscript async src=\"https://cse.google.com/cse.js?cx=YOUR_ENGINE_ID\"\u003e\u003c/script\u003e\n \u003cdiv class=\"gcse-searchresults-only\"\u003e\u003c/div\u003e\n\nNow you can trigger search results on this page by passing a \"q\" argument in the url: \n\n https://my-results-page-url.com/?q=myQuery\n\nNote the *q=myQuery* param in the address bar - this is how the `\u003cdiv class=\"gcse-searchresults-only\"\u003e\u003c/div\u003e` element knows what query results to display.\n\n[Try it](https://programmablesearchengine.google.com/docs/element/results-only_url.html?q=test)\n\nNext...\n-------\n\nContinue to [Enabling autocomplete](/custom-search/docs/tutorial/autocomplete)."]]
