Caixa de Busca com puro css3

E ai galerinha, com truques de CSS3 podemos criar coisas muito interessantes tal como uma caixa de busca com puro CSS3, com gradientes, border-radius... sem usar nenhuma imagem (adoro...rsrs). Nesse tutorial aprenderemos a instalar uma caixa de busca muito sofisticada e fácil de instalar, criada por Nick La do Web Designer Wall.

Demonstração

1º - Vá em >> Design >> Editar HTML >>, e procuro por:

]]></b:skin>
Adicione acima da tag citada o seguinte css3:

/* Caixa De Busca
 -------------------------------------- */
#searchthis {
display: inline-block;
zoom: 1; 
*display: inline;
border: solid 1px #d2d2d2;
padding: 3px 5px;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
-webkit-box-shadow: 0 1px 0px rgba(0,0,0,.1);
-moz-box-shadow: 0 1px 0px rgba(0,0,0,.1);
box-shadow: 0 1px 0px rgba(0,0,0,.1);
background: #f1f1f1;
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));
background: -moz-linear-gradient(top,  #fff,  #ededed);
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed'); 
-ms-filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed'); 
}
#searchform input {
font: normal 12px/100% Arial, Helvetica, sans-serif;
}
#searchBox{
background: #fff;
padding: 6px 6px 6px 8px;
width: 202px;
border: solid 1px #bcbbbb;
outline: none;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
}
#submit-button {
color: #fff;
border: solid 1px #494949;
font-size: 11px;
height: 27px;
width: 27px;
text-shadow: 0 1px 1px rgba(0,0,0,.6);
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
background: #5f5f5f;
background: -webkit-gradient(linear, left top, left bottom, from(#9e9e9e), to(#454545));
background: -moz-linear-gradient(top,  #9e9e9e,  #454545);
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#9e9e9e', endColorstr='#454545'); 
-ms-filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#9e9e9e', endColorstr='#454545'); 
}

*Caso você entenda um pouco de css3, você poderá adapta-la ao seu template, mudando cores, lagura, altura, etc... caso não entenda nada, recomendo este post:Curso Online CSS3

2º - Vá em >> Layout >>, adicione o seguinte html dentro de um gadget:

<form action='/search' class='right' id='searchthis' method='get'><input class="input-text" id="searchBox" name="q" onblur="if(this.value=="")this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value="";" type="text" value="Pesquisar..." vinput="" /> <input class="searchbutton" id="submit-button" type="submit" value="Go" /></form>
Pronto galera espero que tenham gostado, até o próximo post.