Tutorial - Caixa de Pesquisa Personalizada

 

Yoo !

Esse tutorial é fácil: Como personalizar a caixa de pesquisa.

Vai fazer com que ela não fique com a logo do Google abaixo da área de texto e muito mais fofa.

Seu resultado será igual ou parecido com este:

1. Vá em Design > Elementos da página e adicione um novo gadget de HTML/Javascript. Cole nele:

<form action="/search" class="search" method="get">

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

<input class="searchbut" type="submit" value="" />

</form>

2. Agora vá em editar HTML e procure por "]]></b:skin>"

3. Acima dessa tag cole o código abaixo e modifique como desejar:

.search{

float: left; /* Flutuando a esquerda, poderá também mudar para Right (Direita) e Left (Esquerda) */

font-family: Tahoma, Tahoma; /* Fonte */

}

.searchbar{

height: 20px;

width: 140px;

color: #FF82AB; /* Cor da fonte */

-moz-border-radius: 6px;-webkit-border-radius: 6px;-goog-ms-border-radius: 6px;background: #FFF; /* Cor de fundo da parte onde escrevemos */

}

.searchbut{

background: url('http://i39.tinypic.com/25ezh8z.png'); /* Link da imagem do botão de pesquisar*/

width:30px;

height:30px;

border: 0;

padding:7px;

}

 Salve e pronto (: