Tutorial : Colocar caixa de busca

Olá leitores ! Hoje trago um tutorial, como colocar caixa de busca (personalizada). 

Ela é bastante útil, basta o teu leitor chegar lá e escrever o que quer procurar e aparecem uns posts a ver com o que ele pesquisou.

A caixa ficará assim (ou parecida) :

Se quiseres meter, vai ao html e cola o código seguinte acima de ]]></b:skin> (tens que clicar na 1ª seta para veres o código)

.search{

float: left; /* Podes mudar para Right (Direita) */

font-family: Trebuchet ms; /* 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;

}

Depois, cola o código seguinte num gadget html/javascript

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

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

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

</form>

Espero que tenham gostado, kiss.

Créditos ao Jackie Dream.