Caixa de busca personalizada no cabeçalho

Até que enfim (ou seria "em fim"?) tem tutorial novo, né? Não é muito complicado não, vamos lá:

1. Vá em Design, depois em Editar HTML, dê Ctrl+F e procure por:

<header>

Observação: Se não encontrar o código acima, procure por <div id='header-wrapper'> (o código é outro em diferentes modelos).

2. Cole ACIMA dele o código:

<div id='searchbox'> 
<form action='/search' id='searchthis' method='get'> 
<div class='content'> 
<input class='textfield' name='q' size='24' type='text' value=''/> 
<input class='button' type='submit' value=''/> 
</div> 
</form></div> 

3. Dê Ctrl+F de novo, e procure agora por:

]]></b:skin>

4. Cole ACIMA dele o seguinte código:

#searchbox {

border: 0 none;
-moz-background-inline-policy: continuous;
background: url("http://evelynregly.com/images/nada.gif") no-repeat scroll 0 0 transparent;
display: block;
float: right;
height: 56px;
margin-right: 5px;
margin-top: 100px;
padding-left: 57px; }

#searchbox .textfield {
border: 0 none;
-moz-background-inline-policy: continuous;
background: #fff;
border: 0 none;
float: left;
height: 25px;
margin: 0px 0 0 -23px;
width: 143px; }

#searchbox .button {
background: url("http://img710.imageshack.us/img710/3599/okbymeninanerd.png") no-repeat;
border: 0 none;
cursor: pointer;
float: left;
height: 28px;
margin-left: 7px;
margin-top: 0px;
width: 30px; }

Visualize. Se estiver desalinhado, altere os números que eu destaquei em vermelho até ficar no lugar que você deseja.

Detalhes:

Margin-top: define a margem superior. Quanto maior o número, mais "pra baixo" fica.
Margin-right: define a margem direita. Quanto maior o número, mais "pra esquerda" fica. (Se quiser ir mais "pra direita" é só colocar o número negativo. Ex: margin-top:-15px; )

Você também pode mudar a imagem do "Ok", é só editar uma imagem de tamanho 30x28, assim como a área do texto, de tamanho 143x28.

Beijos.