Como colocar barra de pesquisa personalizada no blog + Vote!

Oii fofuxinhos >.< Hoje a pedido da Rafaela eu vou fazer um tuto de como colocar uma barra de pesquisa personalizada no blog. É bem fácil, simples e curto... Então nada de enrolação, vamos lá.

Vá em Elementos da página no seu blog e adicione um gadget Html / Java Script, dentro dele cole o código a seguir:

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

Nele você não pode modificar nada, a não ser que não queira que a palavra "Search" fique ao lado da barra de pesquisa. Neste caso apague o que está em vermelho!

Agora vá no html do seu blog e procure pela tag: ]]></b:skin> 
ACIMA dela cole o código a seguir:

.search{
float: left; /* Flutuando a esquerda, poderá também mudar para Right (Direita) e Left (Esquerda) */
font-family: Georgia, Tahoma; /* Fonte da letra que será escrita quando procurarmos por algo */
}
.searchbar{
height: 20px;
width: 140px;
color: #FF82AB; /* Cor da fonte da letra que será escrita quando procurarmos por algo */
-moz-border-radius: 6px;-webkit-border-radius: 6px;-goog-ms-border-radius: 6px;background: #FFF; /* Cor de fundo da parte onde escrevemos */
}
.searchbut{
background: url('http://cdn1.iconfinder.com/data/icons/Snow/Snow/snow/Search.png'); /* Link/Url da imagem do botão de pesquisar | tamanho: 30 x 30px */
width:30px;
height:30px;
border: 0;
padding:7px;
}

Se não quiser que as bordas dá parte onde escrevemos fique redonda retire tudo que está em vinho.

Conseguiram fazer o tutorial? Dúvidas?

Votaram? Comente! Beijos e até amanhã