Esta página descreve como personalizar a aparência do seu mecanismo de pesquisa usando o arquivo de contexto, que é a especificação XML do mecanismo.
- Visão geral
- O elemento
LookAndFeel
- Os atributos do elemento
LookAndFeel
- Elementos filhos de
LookAndFeel
- Adicionar um logotipo a uma página de resultados hospedados pelo Google
Informações gerais
Além de usar o painel de controle do Mecanismo de Pesquisa Programável, você pode controlar a aparência do mecanismo editando o arquivo XML de contexto. Saiba mais sobre as vantagens e desvantagens de cada formato na página Noções básicas. Se você não estiver familiarizado com os arquivos de contexto, leia Contexto: como definir um mecanismo de pesquisa.
Para ter ainda mais flexibilidade na forma como o mecanismo de pesquisa é exibido, use o Elemento de Pesquisa Programável, que permite incorporar o Mecanismo de Pesquisa Programável à sua página da Web e a outros aplicativos usando JavaScript.
Se suas páginas da Web também incluírem dados estruturados, você poderá criar snippets com apresentação mais avançada e conteúdo personalizado. Mais informações sobre como personalizar seus snippets de resultados.
Antes de começar a projetar a aparência do Mecanismo de Pesquisa Programável, leia Diretrizes de implementação do Mecanismo de Pesquisa Programável. É um pequeno documento que explica como você deve lidar com o branding e a atribuição do Google.
O elemento LookAndFeel
No arquivo de contexto, todas as especificações de aparência são definidas pelo elemento LookAndFeel
em CustomSearchEngine
. Esse elemento determina se os anúncios são exibidos, como a seção de resultados da pesquisa é renderizada e como os resultados da pesquisa individuais são mostrados. O exemplo a seguir mostra todos os atributos e elementos filhos do 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>
Nem todos os atributos e elementos LookAndFeel
são relevantes para todos os tipos de mecanismos de pesquisa. Por exemplo, o atributo googlebranding
é usado somente para mecanismos de pesquisa hospedados no Google e será ignorado se o mecanismo estiver usando a opção de hospedagem "Elemento de pesquisa".
Ao fazer o download do arquivo de contexto do mecanismo de pesquisa da página Overview do ControlPanel, você encontra uma seção LookAndFeel
totalmente definida. Até mesmo os atributos e elementos que não são relevantes para o tipo de mecanismo de pesquisa escolhido terão valores definidos. Esses são apenas os valores padrão. Ignore-os. Preste atenção apenas aos elementos e atributos que afetam seu tipo de mecanismo de pesquisa.
As próximas seções abordam o seguinte:
Os atributos do elemento LookAndFeel
Todos os atributos LookAndFeel
são opcionais. Se você não os especificar, o Mecanismo de Pesquisa Programável vai usar os valores padrão. Por exemplo, se você não definir o atributo element_layout
do elemento LookAndFeel
, o Mecanismo de Pesquisa Programável vai interpretar isso como element_layout
o valor "1"
. Nem todos os atributos são relevantes para todos os tipos de mecanismos de pesquisa.
De acordo com a forma como você definiu os valores dos atributos, o Mecanismo de Pesquisa Programável gera um conjunto de códigos para a caixa e os resultados da pesquisa. É possível visualizar o código gerado na seção Obter código da página "Visão geral" do seu mecanismo de pesquisa. Você pode copiar o snippet de código gerado e inseri-lo na sua página da Web.
Veja a seguir um exemplo de um elemento LookAndFeel
com atributos totalmente definidos:
<LookAndFeel googlebranding="watermark" element_layout="1" theme="1" custom_theme="false" text_font="Arial, sans-serif" />
A tabela a seguir lista os atributos de CustomSearchEngine
e os valores correspondentes.
Observação:defina somente os valores dos atributos relevantes para a opção de hospedagem selecionada. A coluna Opções de hospedagem mostra as opções de hospedagem desses atributos.
Atributo | Opções de hospedagem | Descrição | Valor |
---|---|---|---|
googlebranding |
Hospedado pelo Google | Determina a caixa de pesquisa do seu mecanismo. | Use um dos seguintes valores:
|
element_layout |
Elemento de pesquisa | Determina como a caixa e os resultados da pesquisa são dispostos na página. Para saber mais sobre as diferentes opções de layout, consulte Layout do elemento de pesquisa. |
Use um dos seguintes valores:
|
theme |
Elemento de pesquisa | Determina o estilo da caixa de pesquisa e dos resultados da pesquisa. | Use um dos seguintes valores:
|
custom_theme |
Elemento de pesquisa | Para personalizar o tema e mostrar cores e família de fontes diferentes do padrão, defina o valor como true . Caso contrário, o Mecanismo de Pesquisa Programável ignorará a personalização das cores e fontes, que são definidas nos elementos filhos da LookAndFeel . |
Especifique:
|
text_font |
All | Define a família de fontes do texto nos resultados da pesquisa. |
Embora o painel de controle permita selecionar apenas cinco famílias de fontes, você pode escolher um conjunto mais amplo de famílias de fontes no arquivo de contexto. Você poderia ter uma lista separada por vírgulas de famílias de fontes como o valor para esse atributo, como no exemplo a seguir: text_font="Arial, sans-serif" Se você listou mais de uma família de fontes, o navegador usará a primeira fonte. Se o navegador não for compatível com a primeira fonte, ele tentará usar a próxima fonte. Comece com a fonte que você quer e termine com uma família genérica, como serif ou san-serif. A família genérica permite que o navegador selecione uma fonte semelhante na família genérica quando nenhuma das fontes listadas está disponível. se você estiver usando uma família de fontes com um nome com mais de uma palavra, coloque-a entre aspas ( |
Os elementos filhos de LookAndFeel
Todos os elementos filhos de LookAndFeel
, com exceção do elemento Promotions
, pertencem somente ao elemento de pesquisa. A maioria dos atributos do elemento Promotions
se aplica a todos os tipos de mecanismos de pesquisa. Na maioria das vezes, os elementos filhos controlam as cores dos diferentes componentes do mecanismo de pesquisa. Os valores das cores são notações hexadecimais HTML padrão. Se você não definir os atributos do elemento, o Mecanismo de Pesquisa Programável vai usar os valores padrão.
Observação:se você quiser personalizar um elemento de pesquisa, primeiro defina o atributo custom_theme
do elemento LookAndFeel
como true
antes de definir os valores nos elementos filhos. Se você não definir o atributo custom_theme
como true
, todos os valores definidos nos elementos filhos (exceto Promotions
) serão ignorados pelo Mecanismo de Pesquisa Programável.
LookAndFeel
tem os seguintes elementos filhos:
Colors
: determina as cores do elemento de pesquisa.Promotions
: determina a aparência das promoções. As configurações se aplicam a todos os tipos de mecanismos de pesquisa.SearchControls
: determina as cores dos componentes da caixa de pesquisa de elementos de pesquisa.Results
: determina as cores dos componentes da seção de resultados do elemento de pesquisa.
O elemento filho Colors
O elemento Colors
determina a cor do elemento de pesquisa. Para alterar as cores dos subcomponentes do elemento de pesquisa, como um resultado da pesquisa individual ou promoções, é necessário definir os valores em outros elementos irmãos.
Veja a seguir um exemplo de um elemento Colors
com atributos totalmente definidos:
<Colors url="#3366cc" background="#FFFFFF" border="#336699" title="#0000CC" text="#000000" visited="#ffbd10" title_hover="#0000CC" title_active="#0000CC"/>
A tabela abaixo lista os atributos opcionais de Colors
e os valores correspondentes.
Atributo | Cor do componente |
---|---|
url |
O URL na parte inferior de cada snippet de resultado. |
background |
O plano de fundo de toda a seção de resultados. |
border |
A borda ao redor do elemento de pesquisa. |
title |
O título dos snippets dos resultados. O título é a primeira linha de cada resultado. |
text |
O corpo do texto do snippet do resultado. |
visited |
O link após o clique do usuário. |
title_hover |
A cor do título quando o usuário passa o mouse sobre o link. |
title_active |
A cor do título quando o usuário clica no link. |
O elemento filho Promotions
O elemento Promotions
controla as cores da promoção e determina se imagens e descrições devem ser exibidas. Embora a aparência das promoções seja definida no arquivo de contexto, o conteúdo delas é definido no arquivo XML de promoções. Para saber mais, consulte Promoções.
Veja a seguir um exemplo de um elemento Promotions
com atributos totalmente 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" />
A tabela abaixo lista os atributos opcionais de Promotions
e os valores correspondentes.
Atributo | Cor do componente |
---|---|
title_color |
O título de cada promoção. |
title_visited_color |
O título depois de ter sido clicado pelo usuário. |
url_color |
O URL na parte de baixo de cada promoção. |
background_color |
A cor do plano de fundo de toda a seção de promoções. |
border_color |
Borda ao redor de toda a seção de promoção. |
snippet_color |
Descrição da promoção. Se a promoção não tiver uma descrição, a configuração não vai mudar nada. |
show_image |
Para mostrar uma imagem na sua promoção, defina esse atributo como A imagem a ser exibida é definida no arquivo de promoções. |
show_snippet |
Para exibir uma descrição na sua promoção, defina esse atributo como O conteúdo da descrição é definido no arquivo de promoções. |
title_hover_color |
O título quando o usuário passa o mouse sobre o link. |
title_active_color |
O título quando o usuário clica no link. |
O elemento filho SearchControls
O elemento SearchControls
controla as cores da caixa de pesquisa e as guias de refinamentos em um elemento de pesquisa. Se você criou marcadores de refinamento no mecanismo de pesquisa, eles aparecem como guias no elemento de pesquisa. Se você não tiver marcadores de refinamento, as guias não vão aparecer, e o Mecanismo de Pesquisa Programável vai ignorar os valores dos atributos.
Se você quiser que o Mecanismo de Pesquisa Programável preencha automaticamente as consultas, consulte a seção que descreve o atributo autocompletions
do elemento CustomSearchEngine
no arquivo de contexto.
Veja a seguir um exemplo de um elemento SearchControls
com atributos totalmente 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" />
A tabela abaixo lista os atributos opcionais de SearchControls
e os valores correspondentes.
Atributo | Cor do componente |
---|---|
input_border_color |
A borda do campo de entrada para consultas de pesquisa. |
button_border_color |
A borda ao redor do botão de pesquisa. |
button_background_color |
O botão de pesquisa. |
tab_border_color |
A borda ao redor das guias que não estão em foco no momento (não selecionada pelo usuário). |
tab_background_color |
As guias que não estão em foco. |
tab_selected_border_color |
A guia que o usuário acabou de selecionar clicando. A guia em que o usuário clicou mais recentemente assume o estado selecionado. |
tab_selected_background_color |
A cor da guia selecionada no momento. |
O elemento filho Results
O elemento Results
controla a cor de resultados individuais no elemento de pesquisa. Cada resultado individual forma uma unidade de título, snippet de resultado e link. Definir esse elemento filho permite delinear visualmente resultados individuais ou destacar resultados que estão sendo selecionados pelos usuários. Se não quiser delinear resultados individuais ou destacar um resultado, defina as bordas e o plano de fundo de acordo com a cor do plano de fundo de toda a seção de resultados.
Figura 1: resultados com resultados individuais delineados e resultados individuais destacados ao passar o mouse.
Os resultados têm dois estados:
- Estado normal: a aparência de um resultado individual quando o mouse não está passando o mouse sobre ele.
- Estado ao passar o cursor: a aparência de um resultado individual quando o cursor do mouse passa sobre ele.
Esse elemento controla a cor dos resultados individuais. Para alterar o plano de fundo para todos os resultados, consulte a seção O elemento filho de cor.
Veja a seguir um exemplo de um elemento Results
com atributos totalmente definidos:
<Results border_color="#FFFFFF" border_hover_color="#FFFFFF" background_color="#FFFFFF" background_hover_color="#FFFFFF" />
A tabela abaixo lista os atributos opcionais de Results
e os valores correspondentes.
Atributo | Cor do componente |
---|---|
border_color |
A borda de cada indivíduo resulta em estado normal. |
border_hover_color |
A borda do resultado quando um mouse passa sobre ele. |
background_color |
A cor de fundo dos indivíduos resulta no estado normal. |
background_hover_color |
O plano de fundo do resultado quando um mouse passa sobre ele. |
Como adicionar um logotipo a uma página de resultados hospedados pelo Google
Se você está permitindo que o Google hospede sua página de resultados, pode incluir um logotipo ou uma imagem pequena ao lado da caixa de pesquisa na página de resultados de pesquisa. A imagem precisa ser um arquivo .jpg, .png ou .gif hospedado em um site (provavelmente seu próprio ou de um site que não tenha restrições de direitos autorais). É possível associar um URL à imagem, tornando-a clicável.
Observação:se você estiver usando o elemento de Pesquisa Programável para hospedar os resultados da pesquisa, não vai ser possível adicionar uma imagem usando o Painel de Controle ou o arquivo de contexto.
Confira a seguir um exemplo de página de resultados com um logotipo.
Figura 3:caixa de pesquisa com uma imagem
A imagem e o URL dela são definidos nos atributos do elemento Logo
no elemento LookAndFeel
. O exemplo a seguir mostra como adicionar um logotipo à página de resultados hospedada pelo Google.
<LookAndFeel> <Logo url="http://www.ascii.com/logo.gif" destination="http://www.ascii.com/" height="90"/> ... </LookAndFeel>
A tabela a seguir lista os atributos do elemento Logo
.
Atributo | Descrição e valor |
---|---|
url |
URL da imagem. Pode ser um arquivo .gif, .png ou .jpg. |
destination |
Se você quiser que a imagem seja um link, defina o destino do URL. |
height |
Altura da imagem em pixels. A altura máxima é de 100 pixels. Não é necessário informar a largura porque o Mecanismo de Pesquisa Programável preserva a proporção. Só informe a altura se a imagem for muito grande e você quiser que o Mecanismo de Pesquisa Programável diminua. |