Caixa de Pesquisa Personalizada

Heey princess

((amo esse filme))

Hoje eu vou ensinar um tutorial suuuper útil, de como fazer a caixa de pesquisa como esta que temos aqui no blog,preview 

1.Vá em Design>>Layout>>Adicionar um Gadget>>HTML JavaScript

Cole o seguinte:

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

2.Vá em Editar HTML e procure por :]]></b:skin>

3.Acima da Tag cole:

/*caixa de perquisa*/
search{
float: left; /* Lado da Barrinha - Right (Direita) e Left (Esquerda) */
font-family: Tahoma; /* Fonte */
}
.searchbar{
height: 20px;/*altura da caixa*/
width: 200px;/*largura da caixa*/
color: #FF82AB; /* Cor da fonte */
-moz-border-radius: 6px;-webkit-border-radius: 6px;-goog-ms-border-radius: 6px;background: #fdd5ed; /* Cor de fundo da parte onde escrevemos */
}
.searchbut{
background: url('http://i.imgur.com/2fgCBuq.png'); /* Link da imagem do botão de pesquisar*/
width:28px;
height:30px;
border: 0;
padding:7px;
}
/*caixa de pesquisa*/

Visualize e salve!!

Eu fiz umas imagens para vocês colocarem no botão:

Kissi