Caixa de pesquisa personalizada no blog

Oi amores, eu sei que o blog não está sendo atualizado como deveria. Mas esse ano estou trabalhando e fazendo faculdade de Design Gráfico, saio de casa ás 08:00 e só volto 00:00. Então não tenho tempo para postar como antes. Estou postando hoje porque estou de ferias da faculdade, mas daqui uma semana já volta as aulas.
Estou com um notebook comigo, então dá pra postar um pouco enquanto estou de repouso. Peço que tenham paciência, estou cursando Design Gráfico e isso vai ser bom pra mim e para vocês, porque vou poder postar tutoriais melhores para vocês mas vocês precisam ter um pouco de paciência e da cooperação de vocês. Eu já disse varias vezes mas vou dizer de novo: Eu não vou fechar o blog ou algo do tipo, vou deixar ele aqui disponível para vocês acessarem os tutoriais antigos.

Tutorial:

Vá em Layout > Adicionar um Gadget e adicione  HTML/Javascript e cole isso:

<form action="/search" class="search" method="get">
<input class="searchbar" id="s" name="q" placeholder='Digite o que procura' type="text" value="" />
<input class="searchbut" type="submit" value="" />
</form>

Você pode substituir a frase em roxo e escrever o que quiser .

Agora vá em Modelo > Editar HTML clique na caixa de codigos e dê Ctrl+F e procure por ]]></b:skin>
Cole antes de ]]></b:skin>  o código abaixo:

.search{
float: left;
font-family: Century Gothic !important; /* Fonte do campo de texto*/
}
.searchbar{
height: 20px; /*Altura da caixa*/
width: 190px; /*largura da caixa*/
border-radius:15px;
background:#fff;
text-align:center;
color:#ff048c !important; /*cor do texto*/
font: 12px Century Gothic !important; /*fonte do texto*/
}
.searchbut{
background: url('Coloque o link da imagem do botão');
width:30px; /*Largura do botão*/
height:30px; /*altura do botão*/
border: 0;
padding:7px;
} 

Agora é só personalizar, substitua apenas o que está em negrito e salve.
Pronto!