Tutorial- caixa de pesquisa personalisada

Oi pequenos cupcakes de chocolate com creme,hoje eu vou ensinar para vcs como se faz uma caixa de pequisa igual a minha e bem simples esse tutorial eu aprendi no

Cherry Bomb e o botão eu achei no Blog gpurple então aí estão os creditos

então vamos começar logo né
Vá em Layout >>adicionar um gadjet>> html/javascript,e cole esse codigo:

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

depois substitua o texto em roxo pelo que vc quizer com está ali no meu

Agora vá em modelo > editar html e 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('Url da imagem do botão');
width:30px; /*Largura do botão*/
height:30px; /*altura do botão*/
border: 0;
padding:7px;
}

aki estão alguns botões creditos para o blog gpurple
       
espero que tenham gostado e até a proximo tutorial bjuuus!!♥