Arquivo de contexto

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.

1. Visão geral
2. O elemento LookAndFeel
3. Os atributos do elemento LookAndFeel
4. Elementos filhos de LookAndFeel
5. 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.

Voltar ao início

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:

• Atributos do elemento LookAndFeel
• Os elementos filhos do elemento LookAndFeel

Voltar ao início

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.

Voltar ao início

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: watermark: padrão. smnar smwide smwidg smnarg smnarb smwidb
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: 1: padrão. Largura total. 2: compacto. 3: duas colunas. 4: duas páginas. 5 – Hospedado pelo Google: aberto na janela atual. 6 – Hospedado pelo Google: abre em uma nova janela. 7 – Somente resultados.
theme	Elemento de pesquisa	Determina o estilo da caixa de pesquisa e dos resultados da pesquisa.	Use um dos seguintes valores: 1: padrão. Semelhante aos resultados de pesquisa do Google. 2: o estilo minimalista tem uma paleta de cores simples. 3: o céu verde usa Trebuchet como fonte. 4: chiclete usa Arial como fonte. 5: o Espresso usa uma fonte com serifa Georgia, em uma paleta de cores quentes. 6: o Shiny usa a fonte Verdana Sans Serif em uma paleta de cores frias.
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: false: padrão. O Google exibe os temas padrão. true: define o Mecanismo de Pesquisa Programável para aceitar os valores definidos nos elementos filhos de LookAndFeel.
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 ("). Por exemplo, Trebuchet MS deve ser escrito como "Trebuchet MS".

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.

Voltar ao início

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.

Voltar ao início

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 true. O padrão é false. 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 true. O padrão é false. 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.

Voltar ao início

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.

Voltar ao início

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.

Voltar ao início

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.

Voltar ao início