Caixa de busca personalizada

Oi gente, tudo bom? Hoje o tutorial é de como personalizar a caixa de busca. A padrão é bem simples e hoje vamos aprender a personalizar do seu jeito. Vamos aprender...

Passo a Passo:

1♥ Vá no blogger → modelo → editar html
2♥ no código dê ctrl + f e busque por: ></b:skin> e antes disso cole:

.search{
float: left; /* Flutuando a esquerda, poderá também mudar para Right (Direita) e Left (Esquerda) */
font-family: Calibri, Calibri; /* Fonte */
}
.searchbar{
height: 20px;
width: 140px;
color: #CD7054; /* Cor da fonte */
-moz-border-radius: 6px;-webkit-border-radius: 6px;-goog-ms-border-radius: 6px;background: #D2B48C; /* Cor de fundo da parte onde escrevemos */
}
.searchbut{
background: url('LINK_AQUI'); /* Link da imagem do botão de pesquisar*/
width:30px;
height:30px;
border: 0;
padding:7px;
}

3♥ Vá no layout → adicione um html/java script e cole:

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

4♥ depois só salvar e pronto.

Na hora de colocar o link, muito cuidado ! Não apague as aspas ex: ('http://imagemaqui.com.br')

Espero ter gostado, bjs ♥