Una vez que hayas creado tu Motor de Búsqueda Programable, puedes agregar el elemento de Búsqueda Programable a tu sitio. Para ello, deberás copiar una parte del código y pegarlo en el código HTML de tu sitio donde quieres que aparezca el motor de búsqueda.
- En el Panel de control, haz clic en el motor de búsqueda que deseas utilizar.
- En la sección Básico de la página Descripción general, haga clic en Obtener código. Copia el código y pégalo en el código fuente HTML de tu página donde quieras que aparezca el elemento de Búsqueda Programable.
El elemento <div class="gcse-search"></div> es un marcador de posición, donde se renderizará el elemento de búsqueda (tanto del cuadro como de los resultados de la búsqueda).
<div class="gcse-search"></div>
Probar diferentes diseños
En muchas ocasiones, tiene sentido que el cuadro de búsqueda aparezca independientemente de los resultados de la búsqueda. Un diseño de dos columnas te permite renderizar un cuadro de búsqueda en un área de tu página (por ejemplo, en la barra lateral) y mostrar los resultados en otra (por ejemplo, el área principal de la página).
Para cambiar el diseño del motor, ve a la sección Diseño de la página Aspecto del Panel de control. Después de seleccionar y guardar el diseño de 2 columnas en el Panel de control, también debes cambiar el código HTML del elemento de búsqueda.
<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>
Otro diseño interesante es la opción de dos páginas. Te permite implementar tu propio cuadro de búsqueda en una página y mostrar los resultados de la búsqueda estándar en otra con los parámetros de la barra de direcciones.
Selecciona y guarda el diseño de dos páginas en el Panel de control. En una página, implementa un cuadro de búsqueda independiente y cambia el atributo resultsUrl para que apunte a la URL en la que deseas mostrar los resultados.
<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>
Para implementar una página de resultados de búsqueda independiente, pega el fragmento de código de resultados en tu página de resultados:
<script async src="https://cse.google.com/cse.js?cx=YOUR_ENGINE_ID"></script>
<div class="gcse-searchresults-only"></div>
Ahora puedes activar los resultados de la búsqueda en esta página pasando un argumento "q" en la URL:
https://my-results-page-url.com/?q=myQuery
Observa el parámetro q=myQuery en la barra de direcciones; así es como el elemento <div class="gcse-searchresults-only"></div> sabe qué resultados de la consulta mostrar.
Siguiente...
Continúa con la habilitación de la función de autocompletar.