Caixa de pesquisa personalizada no blog

 

 Oi denovo amores, agora vou ensinar como fazer e como fazer aquela caixa de pesquisa personalizada tipo essa aqui:

  

Então vamos lá:

 1. Vá no Design >> Elementos da Página >> Adiconar gadget >> HTML/Javascript e cole o código abaixo sem modifica-lo.

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

              2. Vá no seu HTML, e usando o CTRL+F ou F3, procure por:

              

              ]]></b:skin>

     
              Cole acima da tag, o código abaixo

search{
float: left; /*Posicionamento esquerdo */
font-family: Tahoma, Tahoma; /* Fonte */
}
 .searchbar{
height: 20px;
width: 140px;
color: #FF82AB; /* Cor da fonte */
-moz-border-radius: 6px;-webkit-border-radius: 6px;-goog-ms-border-radius: 6px;background: #FFF; /* Cor de fundo da parte onde é escrito */
} .searchbut{
background: url('URL DO BOTÃO'); /* Link da imagem do botão de pesquisar*/
width:30px;
height:30px;
border: 0;
padding:7px;
}

*Você pode mudar a cor da fonte, de acordo com essa tabela.
*Onde está escrito de vermelho, você coloca a URL de alguma imagem ou você pode fazer a sua