Caixa de pesquisa incrível em CSS3 no Blogger

    Instale em seu blog uma caixa de pesquisa com um visual agradável e totalmente personalizável. 

       Para instalar esta caixa de pesquisa css basta escolher um dos modelos (com bordas redondas ou com bordas quadradas ) e realizar os passos citados abaixo.



1 - Acesse a página Editar HTML ;

2 - Encontre a linha ]]></b:skin> ;

3 - Escolha um dos modelos abaixo e cole o código acima da linha citada no passo 2;

BORDAS REDONDAS:

#pesquisafsm-caixa { background: #eee; padding:10px; border-radius:10px 0 0 10px; border:0 none; width:150px; } #pesquisafsm-botao { border: 1px solid #222; color: #eee; padding-left:10px; padding-top:10px; background: #4591fa; border-radius: 6px; margin-left: -3px; color:#fff; font: 'trebuchet ms', trebuchet; padding:10px 20px; border-radius:0 10px 10px 0; border:0 none; font-weight:bold; } #pesquisafsm-botao:hover { color: #eee; border: 2px solid #bbb; padding-left:8px; padding-top:8px; background: #4591fa; border-radius: 6px; margin-left: -3px; color:#fff; font: 'trebuchet ms', trebuchet; padding:8px 18px; border-radius:0 10px 10px 0; font-weight:bold; }

BORDAS QUADRADAS:

#pesquisafsm-caixa { background: #eee; padding:10px; border:0 none; width:150px; } #pesquisafsm-botao { border: 1px solid #222; color: #eee; padding-left:10px; padding-top:10px; background: #4591fa; margin-left: -3px; color:#fff; font: 'trebuchet ms', trebuchet; padding:10px 20px; border:0 none; font-weight:bold; } #pesquisafsm-botao:hover { color: #eee; border: 2px solid #bbb; padding-left:8px; padding-top:8px; background: #4591fa; margin-left: -3px; color:#fff; font: 'trebuchet ms', trebuchet; padding:8px 18px; font-weight:bold; }

4 - Para finalizar esta etapa clique em Salvar Modelo;

5 - Agora vá para página Layout e adicione um gadget(widget)  HTML/JavaScript

6 - No gadget HTML/JavaScript adicione o código:

<form action="/search" id="searchthis" method="get" style="display: inline;">

<input id="pesquisafsm-caixa" name="q" placeholder=" Faça sua busca aqui...." size="40" type="text" />

<input id="pesquisafsm-botao" type="submit" value="Buscar" />

</form>

PS: Para mudar a cor do botão substitua a cor destacada em vermelho.

      Para mudar a cor do botão com o mouse sobre substitua a cor destacada em azul.

      Para mudar a cor da caixa de texto substitua a cor destacada em verde.