Una barra de búsqueda es necesaria para un buen sitio web. Crear su propio motor de búsqueda desde cero puede ser una tarea difícil, pero esta tarea se puede omitir con la ayuda de Google. Google ha creado un sitio web para crear una barra de búsqueda personalizada, para crear la suya propia, consulte el siguiente enlace.
-
https://programmablesearchengine.google.com/about/
.
Creación de una barra de búsqueda personalizada: en este sitio web, cualquier persona puede programar fácilmente su barra de búsqueda simplemente seleccionando los sitios que desea buscar. Siga los pasos que se explican a continuación.
- Paso 1: Vaya al siguiente sitio y presione el botón Comenzar .
- Paso 2: seleccione el botón Nuevo motor de búsqueda para crear un nuevo motor de búsqueda.
- Paso 3: Complete los detalles como se indica en la página y luego haga clic en el botón Crear.
- Paso 4: Después de presionar crear, obtendrá su código presionando el botón Obtener código en la pantalla que se muestra.
Nota: Puede modificar su configuración sobre la búsqueda de sitios, búsqueda de imágenes, búsqueda segura desde el panel de control y también puede configurar para mostrar anuncios mientras busca a través de su barra de búsqueda.
Incrustar la barra de búsqueda en una página web: después de obtener su código, simplemente puede pegarlo dentro de su página web para ver la barra de búsqueda en funcionamiento.
- Ejemplo: puede ver que la pantalla de salida tiene una barra de búsqueda con una opción de búsqueda que muestra el resultado de los sitios o dominios que ha seleccionado al crear esta barra de búsqueda. Además, esta opción de búsqueda cambiará automáticamente a medida que cambies de sitio desde el panel de control. Actualmente, los resultados de la búsqueda se muestran de forma predeterminada. Aparte de eso, puede manipular la forma de visualización del resultado y mucho más como se indica en los enlaces a continuación.
https://developers.google.com/custom-search/docs/element
.
HTML
<!DOCTYPE html><html><head><title>Custom Search-Bar</title><style>body {background-image: linear-gradient(to left, white, green);color: lawngreen;}</style></head><body><h1style="text-align: center;">GeeksforGeeks</h1><scriptasyncsrc=</script><divclass="gcse-search"></div></body></html> - Producción:
Publicación traducida automáticamente
Artículo escrito por aditya_taparia y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA