Como colocar uma busca no blog

Muitos usuários do Blogger vêm se queixando que a caixa de busca padrão – gadget “caixa de pesquisa” – não é eficiente, pois não mostra todas as postagens. Esse problema já é antigo e, infelizmente, ainda não foi resolvido.

No lugar do gadget “caixa de pesquisa”, é possível usarmos outras três opções de caixa de busca, sendo que duas são do Google:

1. Caixa de busca do Google Adsense;
2. Caixa de busca personalizada do Google;
3. Caixa de busca com CSS .....

Como colocar a busca do Google AdSense

A caixa de busca do AdSense é, de longe, a mais eficiente e ainda pode render uma graninha. Para colocá-la em seu blog, é preciso ser um editor cadastrado. 

1. Clique na aba “configurações do AdSense”
2. Escolha a opção “AdSense para pesquisas”
3. Em “tipo de pesquisa”, escolha “apenas os sites que eu selecionar”
4. Em “sites selecionados”, digite o endereço do seu blog
5. Clique em “continuar” e configure o tamanho da caixa
6. Clique em “continuar” e copie o código
7. No Blogger, cole no gadget HTML/Javascript

Como colocar a busca personalizada do Google

A caixa de busca personalizada do Google também é muito boa.

1. Acesse http://www.google.com/cse/
2. Faça login com sua senha do Google
3. Clique em “criar mecanismo de busca personalizado”
4. Preencha todos os campos
5. Em “site a pesquisar”, digite o endereço do seu blog
6. Clique em avançar e escolha um modelo
7. Copie o código
8. No Blogger, cole no gadget HTML/Javascript

Como colocar uma busca personalizada com CSS

Entre no HTML do template e procure por: ]]></b:skin>

Cole ANTES dessa linha, o seguinte código:

/* BUSCA

----------------------------------------------- */

#search{

border:1px solid #ccc;

-moz-border-radius:6px;

-webkit-border-radius:6px;

-goog-ms-border-radius:6px;

height:28px;

padding:0;

background:#efefef;

text-align:right;

}

#search input{border:0; background:none; color:#575757}

#s{width:230px; padding:4px; margin:2px 0 0 0; background:none}

#topsearch #search{margin-top:15px}

#topsearch #s{width:200px}

Vá em “design” e cole este outro código, dentro do gadget HTML/Javascript

<div id='search'>

<form expr:action='data:blog.homepageurl + &quot;search&quot;' id='searchform' method='get' name='searchform'>

<input class="keyword" id="s" name="q" type="text" value="" />

<input src="http://lh6.ggpht.com/_mcq01yDJ2uY/TSg-kE6t5KI/AAAAAAAAELE/fg2rTdoATqg/search.gif" style="border:0; vertical-align: top;" type="image" />

</form>

</div>

Como se trata de uma caixa feita com CSS, é possível mudar as cores da borda e do fundo, alterando os valores em amarelo. Veja uma tabela de cores.

Para ajustar a largura da caixa, altere os valores em width.