HTML - Caixa de Pesquisa personalizada no Blog

Oi meus cheirosos u3333u sz 

Fiquei um tempinho sem postar por causa da escola, trabalho. Então fica meio difícil de arrumar as coisas, mais como eu prometi, aqui estou eu pra vocês. Trazendo um tutorial bem fácil e bem legal pra quem não quer aquelas caixas de pesquisa feiosinhas do blogger u.u 

Vou ensinar a vocês a deixar a caixa de pesquisa assim:

u3u gostou? Então vamos começar! xox

~x~

1 Vá em Layout > Crie um Gadged de html/javascript, e cole:

<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>

- Onde está escrito de vermelho " Digite aqui o que procura ". Você pode escrever qualquer coisa. u-u como na imagem que eu mostrei, o meu estava escrito " Procure no blog =3 ". U-U mais ai é a hora, pode escrever o que você quiser sz

Agora vá em Modelo > Editar Html , e cole o seguinte código, ANTES de:  ]]></b:skin> (ctrl+F pra procurar)

.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;
}

Agora personalize o que está em vermelho como preferir! u.u achei uns botões legaizinhos (www)

u33u eeee, espero que tenham gostado, por hoje é só. u-u bjos da Pão-chan!