Como colocar uma busca no blog

Postado por Juliana em 17 Fevereiro 2011

   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.  Acesse http://www.google.com/cse/

1. Faça login com sua senha do Google
2. Clique em “criar mecanismo de busca personalizado”
3. Preencha todos os campos
4. Em “site a pesquisar”, digite o endereço do seu blog
5. Clique em avançar e escolha um modelo
6. Copie o código
7. 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.


Fonte: http://www.dicasblogger.com.br