Caixinha personalizada 2

Gente hoje vou trazer um tutorial bem úteis para vocês. Como fazer uma caixa de pesquisa Caixinha Personalizada como a minha. Ela vai ficar deste jeito:

 Quer aprender como fazer? 

Primeiro, vá em Layout e adicione um gadgets HTML/JavaScript com este código:

<form action="/search" class="search" method="get">
<input class="searchbar" id="s" name="q" type="text" value="" />
<input class="searchbut" type="submit" value="GO" />
</form>

Você não precisa mudar nada. Salve e agora vá em Modelo > Editar HTML > Prosseguir > Ctrl + F ou F3 e procure por ]]></b:skin> , e acima cole:

.search{ /* Nesta parte não mude NADA */
float: left;
margin-left: 30px;
font-family: Tahoma, Tahoma;
}
.searchbar{
height: 18px;
width: 140px; /* Largura */
margin-left:0px;
margin-top:-45px;
margin-bottom:-18px;
color: #FF84AD; /* Cor que aparece quando digitamos algo */
border:solid 1px #ddd;
padding:3px 5px;
border-radius: 10px;
box-shadow:0 1px 0px rgba(0,0,0,.1);
background: #fff; /* Cor de fundo, não precisa mudar */
background:-webkit-gradient(linear, left top, left bottom,from(#fff),to(#ededed));
background:-moz-linear-gradient(top, #fff, #ededed);
filter:progidXImageTransform.Microsoft.gradient(startColorstr='#ffffff',endColorstr='#ededed');
-ms-filter:progidXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed')
}
.searchbut{
border: 2px solid #FF84AD; /* Borda do botão normal, apague se não quiser*/
float:right;
background: #FFF; /* Fundo do botão normal */
cursor:pointer;
color:#FF84AD; /* Cor da letra do botão normal */
padding:0 5px 2px 5px;
height:26px;
margin-top: -20px;
margin-right: -35px;
font-family: Tahoma, Tahoma;
border-radius:25px;
-webkit-transition-duration: .5s
}
.searchbut:hover {
background:#FFF; /* Fundo do botão Hover */
color: #734836; /* Cor da letra do botão Hover, apague se não quiser */
border: 2px solid #734836 ; /* Borda Hover */
-webkit-transition-duration: .5s
}

Faça as alterações e Salve. Pronto, você tem sua caixa de pesquisa fofinha pronta