Personalizar pesquisa (cores e imagens da caixa de busca)

Esse tutorial mostrará como criar e personalizar uma pesquisa dentro do seu blog, vamos usar imagens e cores diferentes para fazer o campo de busca, trocar o botão pesquise por uma imagem a sua escolha e explicar como fazer essa pesquisa dentro do blog combinar com o seu template. Vamos trocar a imagem de fundo, cores do campo de busca e usar uma imagem como botão de pesquisa, mas os resultados dela serão os mesmos da pesquisa google para o seu blog. Mas você pode usar também uma caixa de pesquisa personalizada do Adsense e além de permitir pesquisas dentro do seu blog pode ganhar mais dinheiro com os anuncios google.
Veja também: Colocar Barra/Caixa de Pesquisa Personalizada no Site/Blog

O código da pesquisa pesquisa personalizada está logo abaixo você precisa trocar o endereço que está nele para o do seu blog (note que aparece duas vezes no código), depois disso vamos mostrar como alterar as imagens e tamanho desta pesquisa.

<style type="text/css">
<!--
#barra-busca {
width: 500px;
height: 40px;
background-image: url(pesquisa-fundo.jpg);
background-repeat: no-repeat;
background-position: center top;
margin: 0px;
}
#form-busca {
background: none;
}
#form-busca #sprocura{
height: 20px;
width: 400px;
margin-top: 8px;
margin-left: 8px;
color: #0000CC;
border: 1px solid #000000;
float: left;
padding: 2px;
background-color: #FFFF99;
}
#form-busca #bt-busca {
height: 33px;
width: 37px;
background-image: url(pesquisa-botao.jpg);
border: none;
margin-top: 4px;
float: right;
cursor: pointer;
background-repeat: no-repeat;
background-position: left top;
margin-right: 10px;
}
-->
</style>
<div id="barra-busca">
<FORM id="form-busca" method=GET action="http://www.google.com.br/search"><INPUT id="sprocura" TYPE=text name=q maxlength=255 value="O que você procura?" />
<input name=btnG type=submit id="bt-busca" value="" />
<input type=hidden name=domains value="http://www.dicasparablogs.com.br"><input type=hidden name=sitesearch value="http://www.dicasparablogs.com.br">
</FORM></div>

Entre na pagina designer >> adicionar gadget >> html/javascript e coloque o código acima.


Agora vamos mostrar como personalizar sua pesquisa no começo do código tem a formatação (cores, imagens de fundo, posicionamento) tudo isso feito em CSS, então vamos por partes. Neste primeiro trecho temos a imagem de fundo da pesquisa
#barra-busca {
width: 500px;
height: 40px;
background-image: url(pesquisa-fundo.jpg);

Para usar outra imagem você precisa trocar o endereço da imagem(pesquisa-fundo.jpg) e alterar os valores width: 500px; e height: 40px; para o tamanho da imagem que está usando as dimensões da nova imagem.

Nesta parte é a formatação do campo de texto para digitar o que procuramos no site.
#form-busca #sprocura{
height: 20px;
width: 400px;
margin-top: 8px;
margin-left: 8px;
color: #0000CC;
border: 1px solid #000000;
float: left;
padding: 2px;
background-color: #FFFF99;
}

Aqui podemos fazer qualquer tipo de formação: escolher as cores de fundo, trocar as bordas, formatar o texto, veja nestes links que acabamos de mostrar como fazer cada uma destas coisas

Aqui temos o botão usado na pesquisa.
#form-busca #bt-busca {
height: 33px;
width: 37px;
background-image: url(pesquisa-botao.jpg);

Da mesma maneira que falamos para a imagem de fundo da pesquisa é para trocar a imagem do botão, hospede uma imagem, coloque o endereço dela no lugar onde está pesquisa-botao.jpg e depois altere os valores 33px e 37 px com a largura e altura da imagem que está usando agora.


Apenas um aviso a imagem no inicio da postagem onde o texto fica aparecendo e sumindo é uma animação em flash apenas para ilustrar esse tutorial no seu blog a pesquisa aparecerá com o texto fixo como na imagem logo acima.