Caixa de pesquisa personalizada

Oi meninas e meninos hoje resolvi trazer um tutorial que procurava há tempos, e acho que vocês vão gostar. Esse tutorial é pra ensinar vocês a trocarem aquela caixa de busca horrenda do google por uma caixa personalizada como a do GI. É bem mais bonitinha não acham? (: Ah, mais uma coisa: Você pode personalizar as cores, o botão e o texto que aparece dentro da caixa.
Então só pra adiantar vou mostrar qual é o resultado:

Clique em Leia Mais para ver o tutorial *-*

Abra o seu blog, vá em Design -> Elementos da página -> Adicionar um gadget -> escolha o de HTML/Java Script e cole o código abaixo:

   <style type="text/css">

   <!--

   #form-busca {

   background: none;

   }

   #form-busca #sprocura{

   height: 18px; 

   width: 150px; 

   margin-top: 4px;

   margin-left: 0px;

   color: #453830; 

   border: 1px solid#FFC6FF;

   float: left;

   padding: 2px;

   background-color: #FFE4E1; 

   }

   #form-busca #bt-busca {

   height: 20px;

   width: 23px;

   background-image: url ( url );

   border: none;

   margin-top: 6px;

   float: right;

   cursor: pointer;

   background-repeat: no-repeat;

   background-position: left top;

   margin-right: 35px;

   }

   -->

   </style>

   <div id="barra-busca">

   <form id="form-busca" method=get       

 action="http://goimagines.blogspot.com/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://goimagines.blogspot.com " /><input type="hidden" name="sitesearch" value="http://goimagines.blogspot.com " />

</form></div>

 Note que a url do GI aparece 3 vezes (destacada em negrito) e troque-as pela url do seu blog.
A frase destacada em lilás você pode alterar, é a frase que fica dentro da caixa.

Lembra que eu disse que você pode personalizar a caixa? Para isso vamos entender a parte que refere-se a caixa em si:

  #form-busca #sprocura{

  height: 18px; (trata-se da altura da caixa, quanto maior o numero mais alta fica AVÁ)

  width: 150px; (trata-se da largura da caixa)

  margin-top: 4px;

  margin-left: 0px;

  color: #453830; (é a cor do texto)

  border: 1px solid#FFC6FF; (é a cor da borda da caixa)

  float: left;

  padding: 2px;

  background-color: #FFE4E1; (é a cor do fundo da caixa)

  }

Para alterar as cores use uma tabela, clique aqui para acessar uma.
Para esclarecer:
- Quanto maior o valor do numero de "margin-left" mais para a direita a caixa fica. Se quiser que a caixa fique mais para a esquerda use um numero negativo por exemplo: -4px
-Quanto menor o valor do numero de "margin-top" mais para cima fica. Se quiser que a caixa fique mais para baixo aumente o valor do numero.

Agora vamos entender a parte do código que trata-se ao botão que fica ao lado da caixa:

  #form-busca #bt-busca {

  height: 20px; (altura do botão)

  width: 23px; (largura do botão)

  background-image: url(url do seu botão);

  border: none;

  margin-top: 6px;

  float: right;

  cursor: pointer;

  background-repeat: no-repeat;

  background-position: left top;

  margin-right: 35px;

  }

Detalhes:
-O valor de "height" e "widht" você deve alterar conforme o tamanho da imagem do seu botão.
-Quanto maior o valor do numero de "Margin-top" mais pra baixo o botão fica, se quiser por ele mais pra cima diminua o valor do numero.
-Margin-right: É complicado dizer ao certo as "coordenadas" de quanto maior o numero mais pra baixo ou pra cima fica. Eu fui testando e se colocava um numero muito baixo (- negativo) ou muito alto o botão ficava longe da caixa. Então vá alterando o valor do numero até ficar como você deseja.
-Url: Acho que não preciso explicar o que é né? -rs É só colocar entre os (parenteses) a url da imagem que você escolher. Como sou muuito boazinha (não) eu fiz 2 botões pra vocês e uma base para fazerem os seus próprios botões, espero que de pro gasto haha.

Espero que tenha gostado do tutorial, fiquei a tarde toda montando ele pra ficar bem explicadinho rs. Espero que tenham entendido e qualquer duvida é só comentar e se não tiver duvida comente também rs