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:
BORDAS QUADRADAS:
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; }
#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.
