En esta página, se describe cómo personalizar el aspecto de tu motor de búsqueda mediante el archivo de contexto, que es la especificación XML para tu motor de búsqueda.
- Descripción general
- El elemento
LookAndFeel - Atributos del elemento
LookAndFeel - Los elementos secundarios de
LookAndFeel - Cómo agregar un logotipo a una página de resultados alojada en Google
Descripción general
Además de usar el Panel de control del Motor de Búsqueda Programable, puedes controlar el aspecto de tu motor de búsqueda editando el archivo XML de contexto. (Obtén más información sobre las ventajas y desventajas de cada formato en la página Conceptos básicos). Si no estás familiarizado con los archivos de contexto, consulta Contexto: Cómo definir un motor de búsqueda.
Para obtener aún más flexibilidad en la forma en que se muestra tu motor de búsqueda, puedes usar el Elemento de Búsqueda Programable, que te permite incorporar el Motor de Búsqueda Programable en tu página web y otras aplicaciones mediante JavaScript.
Si tus páginas web también incluyen datos estructurados, puedes crear fragmentos con una presentación más enriquecida y contenido personalizado. Obtén más información sobre cómo personalizar los fragmentos de resultados.
Antes de comenzar a diseñar el aspecto de tu Motor de Búsqueda Programable, consulta los Lineamientos para implementar el Motor de Búsqueda Programable. Es un documento breve que te indica cómo debes manejar la marca y la atribución de Google.
El elemento LookAndFeel
En el archivo de contexto, el elemento LookAndFeel en CustomSearchEngine define todas las especificaciones de apariencia y estilo. Este elemento determina si se muestran los anuncios, cómo se muestran la sección de resultados de la búsqueda y cómo se muestran los resultados de la búsqueda individuales. En el siguiente ejemplo, se muestran todos los atributos y elementos secundarios del elemento LookAndFeel.
<CustomSearchEngine ... >
<Title>...</Title>
<Description>...</Description>
<Context>
...
</Context>
<LookAndFeel googlebranding="watermark"
element_layout="1" theme="1" custom_theme="false" text_font="Arial, sans-serif"/>
<Logo />
<Colors url="#3366cc"
background="#FFFFFF"
border="#336699"
title="#0000CC"
text="#000000"
visited="#ffbd10"
title_hover="#0000CC"
title_active="#0000CC"/>
<Promotions title_color="#006600"
title_visited_color="#663399"
url_color="#3366ff"
background_color="#FFFFFF"
border_color="#ffff33"
show_image="true"
show_snippet="true"
snippet_color="#330000"
title_hover_color="#0000CC"
title_active_color="#0000CC" />
<SearchControls input_border_color="#BCCDF0"
button_border_color="#666666"
button_background_color="#CECECE"
tab_border_color="#E9E9E9"
tab_background_color="#E9E9E9"
tab_selected_border_color="#FF9900"
tab_selected_background_color="#FFFFFF" />
<Results border_color="#FFFFFF"
border_hover_color="#FFFFFF"
background_color="#FFFFFF"
background_hover_color="#FFFFFF" />
</LookAndFeel>
<AdSense />
<EnterpriseAccount />
</CustomSearchEngine>
No todos los atributos y elementos de LookAndFeel son relevantes para todos los tipos de motores de búsqueda. Por ejemplo, el atributo googlebranding se usa solo para los motores de búsqueda alojados en Google y se ignora si tu motor de búsqueda usa la opción de hosting "Elemento de búsqueda".
Cuando descargues el archivo de contexto del motor de búsqueda desde la página Descripción general del Panel de control, encontrarás una sección LookAndFeel completamente definida. Incluso los atributos y elementos que no son relevantes para el tipo de motor de búsqueda que elegiste tendrán valores definidos. Estos son solo los valores predeterminados; ignóralos. Presta atención únicamente a los elementos y atributos que afectan el tipo de motor de búsqueda.
En las siguientes secciones, se analiza lo siguiente:
Atributos del elemento LookAndFeel
Todos los atributos LookAndFeel son opcionales. Si no los especificas, el Motor de Búsqueda Programable usará los valores predeterminados. Por ejemplo, si no defines el atributo element_layout del elemento LookAndFeel, Motor de Búsqueda Programable interpretará que el valor de element_layout es "1". No todos los atributos son relevantes para todos los tipos de motores de búsqueda.
Según cómo hayas definido los valores de los atributos, Motor de Búsqueda Programable genera un conjunto de códigos para el cuadro y los resultados de la búsqueda. Puedes obtener una vista previa del código generado en la sección Obtener código de la página Descripción general de tu motor de búsqueda. Puedes copiar el fragmento de código generado e insertarlo en tu página web.
El siguiente es un ejemplo de un elemento LookAndFeel con atributos completamente definidos:
<LookAndFeel googlebranding="watermark"
element_layout="1"
theme="1"
custom_theme="false"
text_font="Arial, sans-serif" />
En la siguiente tabla, se enumeran los atributos de CustomSearchEngine y sus valores.
Nota: Define solo los valores de los atributos relevantes para la opción de hosting que seleccionaste. En la columna Opciones de hosting, se indican las opciones de hosting que se aplican estos atributos.
| Atributo | Opciones de hosting | Descripción | Valor |
|---|---|---|---|
googlebranding |
Alojada en Google | Determina el cuadro de búsqueda de tu motor de búsqueda. | Usa uno de los siguientes valores:
|
element_layout |
Elemento de búsqueda | Determina cómo aparecen el cuadro de búsqueda y los resultados de la búsqueda en la página. Para obtener más información sobre las diferentes opciones de diseño, consulta Diseño del elemento de búsqueda. |
Usa uno de los siguientes valores:
|
theme |
Elemento de búsqueda | Determina el estilo del cuadro de búsqueda y de los resultados de la búsqueda. | Usa uno de los siguientes valores:
|
custom_theme |
Elemento de búsqueda | Para personalizar el tema de modo que muestre diferentes colores y familias de fuentes del estándar, establece el valor en true. De lo contrario, el Motor de Búsqueda Programable ignorará la personalización que realices en los colores y las fuentes, que se definen en los elementos secundarios de LookAndFeel. |
Especifica una de las siguientes opciones:
|
text_font |
All | Establece la familia de fuentes para el texto de tus resultados de búsqueda. |
Aunque el Panel de control te permite seleccionar solo cinco familias de fuentes, puedes elegir un conjunto más amplio de familia de fuentes en el archivo de contexto. Puedes tener una lista separada por comas de familias de fuentes como valor para este atributo, como en el siguiente ejemplo: text_font="Arial, sans-serif" Si incluiste más de una familia de fuentes, el navegador usa la primera fuente. Si el navegador no admite la primera fuente, intenta con la siguiente. Así que comienza con la fuente que quieras y termina con una familia genérica, como serif o san-serif. La familia genérica permite al navegador seleccionar una fuente similar en la familia genérica cuando ninguna de las fuentes que enumeraste está disponible. Si utilizas una familia de fuentes cuyo nombre incluye más de una palabra, debes encerrarla entre las entidades entre comillas ( |
Los elementos secundarios de LookAndFeel
Todos los elementos secundarios de LookAndFeel, excepto el elemento Promotions, pertenecen únicamente al elemento de búsqueda. La mayoría de los atributos del elemento Promotions se aplican a todos los tipos de motores de búsqueda. En su mayor parte, los elementos secundarios controlan los colores de diferentes componentes en tu motor de búsqueda. Los valores de color son notaciones hexadecimales HTML estándar. Si no defines los atributos del elemento, Motor de Búsqueda Programable usará los valores predeterminados.
Nota: Si quieres personalizar un elemento de búsqueda, primero debes establecer el atributo custom_theme del elemento LookAndFeel en true antes de definir los valores en los elementos secundarios. Si no estableces el atributo custom_theme en true, el Motor de Búsqueda Programable ignorará todos los valores que hayas definido en los elementos secundarios (excepto Promotions).
LookAndFeel tiene los siguientes elementos secundarios.
Colors: Determina los colores del elemento de búsqueda.Promotions: Determina el aspecto de las promociones. Esta configuración se aplica a todos los tipos de motores de búsqueda.SearchControls: Determina los colores de los componentes del cuadro de búsqueda de Elementos de búsqueda.Results: Determina los colores de los componentes de la sección de resultados de Elementos de búsqueda.
El elemento secundario Colors
El elemento Colors determina el color del elemento de búsqueda. Para cambiar los colores de los subcomponentes del elemento de búsqueda, como promociones o resultados de la búsqueda individuales, debes establecer los valores en otros elementos del mismo nivel.
El siguiente es un ejemplo de un elemento Colors con atributos completamente definidos:
<Colors url="#3366cc"
background="#FFFFFF"
border="#336699"
title="#0000CC"
text="#000000"
visited="#ffbd10"
title_hover="#0000CC"
title_active="#0000CC"/>
En la siguiente tabla, se enumeran los atributos opcionales de Colors y sus valores.
| Atributo | Color de los componentes |
|---|---|
url |
URL en la parte inferior de cada fragmento de resultado. |
background |
El fondo de toda la sección de resultados. |
border |
Borde alrededor del elemento de búsqueda. |
title |
El título de los fragmentos de los resultados. El título es la primera línea de cada resultado. |
text |
El texto del cuerpo del fragmento del resultado. |
visited |
Es el vínculo después de que el usuario hace clic en él. |
title_hover |
Es el color del título cuando el usuario coloca el cursor sobre el vínculo. |
title_active |
El color del título cuando el usuario hace clic en el vínculo. |
El elemento secundario Promotions
El elemento Promotions controla los colores de la promoción y determina si se deben mostrar las imágenes y las descripciones. Si bien el aspecto de las promociones se define en el archivo de contexto, su contenido se define en el archivo en formato XML de promociones. Para obtener más información, consulta Promociones.
El siguiente es un ejemplo de un elemento Promotions con atributos completamente definidos:
<Promotions title_color="#006600"
title_visited_color="#663399"
url_color="#3366ff"
background_color="#FFFFFF"
border_color="#ffff33"
snippet_color="#330000"
show_image="true"
show_snippet="true"
title_hover_color="#0000CC"
title_active_color="#0000CC" />
En la siguiente tabla, se enumeran los atributos opcionales de Promotions y sus valores.
| Atributo | Color de los componentes |
|---|---|
title_color |
Es el título de cada promoción. |
title_visited_color |
Es el título después de que el usuario hizo clic en él. |
url_color |
La URL que se encuentra en la parte inferior de cada promoción |
background_color |
El color de fondo de toda la sección de promociones |
border_color |
Borde que rodea toda la sección de la promoción. |
snippet_color |
Es la descripción de la promoción. Si tu promoción no tiene una descripción, la configuración no cambiará nada. |
show_image |
Para mostrar una imagen en tu promoción, establece este atributo en La imagen que se mostrará se establece en el archivo de promociones. |
show_snippet |
Para mostrar una descripción en tu promoción, establece este atributo en El contenido de la descripción se define en el archivo de promociones. |
title_hover_color |
Es el título que se muestra cuando el usuario coloca el cursor sobre el vínculo. |
title_active_color |
Es el título cuando el usuario hace clic en el vínculo. |
El elemento secundario SearchControls
El elemento SearchControls controla los colores del cuadro de búsqueda y las pestañas de perfeccionamiento de un elemento de la Búsqueda. Si creaste etiquetas de mejora en el motor de búsqueda, las etiquetas aparecerán como pestañas en el elemento de búsqueda. Si no las tienes, las pestañas no aparecerán y el Motor de Búsqueda Programable ignorará los valores de los atributos.
Si quieres que el Motor de Búsqueda Programable complete automáticamente las búsquedas, consulta la sección en la que se describe el atributo autocompletions del elemento CustomSearchEngine en el archivo de contexto.
El siguiente es un ejemplo de un elemento SearchControls con atributos completamente definidos:
<SearchControls input_border_color="#BCCDF0"
button_border_color="#666666"
button_background_color="#CECECE"
tab_border_color="#E9E9E9"
tab_background_color="#E9E9E9"
tab_selected_border_color="#FF9900"
tab_selected_background_color="#FFFFFF" />
En la siguiente tabla, se enumeran los atributos opcionales de SearchControls y sus valores.
| Atributo | Color de los componentes |
|---|---|
input_border_color |
Borde del campo de entrada para las búsquedas. |
button_border_color |
Borde alrededor del botón de búsqueda. |
button_background_color |
El botón de búsqueda |
tab_border_color |
El borde que rodea las pestañas que no están en foco (no seleccionadas por el usuario). |
tab_background_color |
Las pestañas que no están enfocadas |
tab_selected_border_color |
La pestaña que el usuario acaba de seleccionar haciendo clic. La pestaña en la que el usuario hizo clic más recientemente toma el estado seleccionado. |
tab_selected_background_color |
El color de la pestaña que está seleccionada actualmente |
El elemento secundario Results
El elemento Results controla el color de los resultados individuales en el elemento de la Búsqueda. Cada resultado individual forma una unidad de título, fragmento de resultado y vínculo. Definir este elemento secundario te permite delinear visualmente los resultados individuales o destacar los resultados que seleccionan los usuarios. Si no deseas delinear los resultados individuales o destacar un resultado, puedes configurar los bordes y el fondo de modo que coincidan con el color del fondo de toda la sección de resultados.
Figura 1: Resultados con los resultados individuales descritos y los resultados individuales que se destacan cuando se desplaza el mouse sobre un anuncio.
Los resultados tienen dos estados:
- Estado normal: Apariencia de un resultado individual cuando el mouse no se desplaza sobre él.
- Estado de desplazamiento: Apariencia de un resultado individual cuando el cursor del mouse se coloca sobre él
Este elemento controla el color de los resultados individuales. Para cambiar el fondo de todos los resultados, consulta la sección El elemento secundario de color.
El siguiente es un ejemplo de un elemento Results con atributos completamente definidos:
<Results border_color="#FFFFFF"
border_hover_color="#FFFFFF"
background_color="#FFFFFF"
background_hover_color="#FFFFFF" />
En la siguiente tabla, se enumeran los atributos opcionales de Results y sus valores.
| Atributo | Color de los componentes |
|---|---|
border_color |
El borde de cada individuo da como resultado un estado normal. |
border_hover_color |
Es el borde del resultado cuando un mouse se coloca sobre él. |
background_color |
El color de fondo de los individuos da como resultado un estado normal. |
background_hover_color |
El fondo del resultado cuando un mouse se coloca sobre él. |
Cómo agregar un logotipo a una página de resultados alojada en Google
Si permites que Google aloje tu página de resultados, puedes incluir un logotipo o una imagen pequeña junto al cuadro de búsqueda de la página de resultados. La imagen debe ser un archivo .jpg, .png o .gif alojado en un sitio web (supuestamente, tuyo o de un sitio web que no tiene restricciones de derechos de autor). Puedes asociar una URL a la imagen para que se pueda hacer clic en ella.
Nota: Si usas el elemento de Búsqueda Programable para alojar resultados de la búsqueda, no podrás agregar una imagen con el Panel de control ni el archivo de contexto.
El siguiente es un ejemplo de una página de resultados con un logotipo.
Figura 3: Cuadro de búsqueda con una imagen
La imagen y su URL se definen en los atributos del elemento Logo debajo del elemento LookAndFeel. En el siguiente ejemplo, se muestra cómo agregar un logotipo a tu página de resultados alojada en Google.
<LookAndFeel>
<Logo url="http://www.ascii.com/logo.gif"
destination="http://www.ascii.com/"
height="90"/>
...
</LookAndFeel>
En la siguiente tabla, se enumeran los atributos del elemento Logo.
| Atributo | Descripción y valor |
|---|---|
url |
URL de la imagen. Puede ser un archivo .gif, .png o .jpg. |
destination |
Si quieres que la imagen sea un vínculo, define la URL de destino. |
height |
Es la altura de la imagen en píxeles. La altura máxima es de 100 píxeles. No es necesario que proporcione el ancho, ya que el Motor de Búsqueda Programable conserva la relación de aspecto. No te molestes en proporcionar la altura, a menos que la imagen sea demasiado grande y desees que el Motor de Búsqueda Programable reduzca su tamaño. |