Caixa de busca

E ai pessoal,sejam bem vindos á mais um tutorial de como colocar caixa de busca personalizada.
VEJA O EXEMPLO >>>                                             CLIQUE AQUI
Procure pela seguinte tag:

]]></b:skin>

Cole acima dela o seguinte código:

/* Busca

----------------------------------------------- */

.buscador {

margin:0pt;

padding:0pt;

}

.buscador span {

margin:0pt;

padding:0pt;

}

#search{

display: none;

}

#sidebar form {

margin:0;

padding:1px 0;

clear:both;

}

.searchtitle {

font:bold 14px "Aldo", sans-serif, "Lucida Sans", Tahoma!important;

color:#fff;

}

#searchform {

margin: 5px auto ;

padding: 0;

}

#searchform #s {

height:20px;

width:180px;

margin-left:10px;

font:14px Verdana, Arial, Helvetica, sans-serif;

border:1px solid #272727;

-moz-border-radius-topleft: 4px;

-moz-border-radius-topright: 4px;

-moz-border-radius-bottomleft: 4px;

-moz-border-radius-bottomright: 4px;

-webkit-border-top-left-radius: 4px;

-webkit-border-top-right-radius: 4px;

-webkit-border-bottom-left-radius: 4px;

-webkit-border-bottom-right-radius: 4px;

}

#searchsubmit {

padding:0;

background:#272727;

color:#fff;

text-shadow: 0px 1px 2px #000;

border:1px #000;

width:60px;

height:22px;

font:14px "Arial", "Lucida Sans Unicode", Verdana;

font-weight:normal;

-moz-border-radius-topleft: 6px;

-moz-border-radius-topright: 6px;

-moz-border-radius-bottomleft: 6px;

-moz-border-radius-bottomright: 6px;

-webkit-border-top-left-radius: 6px;

-webkit-border-top-right-radius: 6px;

-webkit-border-bottom-left-radius: 6px;

-webkit-border-bottom-right-radius: 6px;

}

#searchsubmit:hover {

background:#ccc;

color:#000;

text-shadow: 0px 1px 2px #fff;

-moz-border-radius-topleft: 6px;

-moz-border-radius-topright: 6px;

-moz-border-radius-bottomleft: 6px;

-moz-border-radius-bottomright: 6px;

-webkit-border-top-left-radius: 6px;

-webkit-border-top-right-radius: 6px;

-webkit-border-bottom-left-radius: 6px;

-webkit-border-bottom-right-radius: 6px;

}

Edite os seguintes campos:

height:20px;/* altura do campo de busca */

width:180px;/* largura do campo de busca */

font:14px/* tamanho da fonte */

background:#272727;/* cor do button de pesquisa */

width:60px;/* largura do button de pesquisa */

height:22px;/* altura do button de pesquisa */

Agora vá em adicionar um novo Gadget, e adicione o seguinte html:

<div class='buscador'>
<span>
<form action='/search' id='searchform' method='get'>
<table border='0' cellpadding='0' cellspacing='3'>
<tbody>
<tr>
<td><input id='s' name='q' type='text' value='Pesquisar...'/></td>
<td><input id='searchsubmit' type='submit' value='Buscar'/></td>
</tr>
</tbody>
</table>
</form>
</span></div>

Pronto! Seu campo de busca está adicionado... se gostou comente!