Como personalizar a caixa de pesquisa do blogger

Criado por : Unknown quarta-feira, 17 de julho de 2013

A caixa de pesquisa é um elemento muito significativo para os blogueiros, seu objetivo é manter o visitante mais tempo em nosso blog, e como muitos não gostam do modelo padrão do blogger, vamos ensinar a personalizar !

* - Como colocar caixa de pesquisa padrão do blogger.

1° - Entrar na administração do seu blog

2° - Ir opção Layout

3 - Adicionar um gadget

4° - Escolha "caixa de pesquisa" clicando no "+"

5° - Marque as opções desejadas e salve

* - Como personalizar a caixa de pesquisa.

O padrão da caixa de pesquisa é este:

Para deixar-la com uma aparência que se combina com seu blog, vamos fazer algumas mudanças no HTML.

Vamos Lá

1° - Vá para a Área Modelo.

2° - Editar HTML

3° - Pressione CTRL + F e pesquise por:

</b:skin>

4° - Agora EM CIMA de </b:skin vamos adicionar o código abaixo:

/* BUSCA ----------------------------------------------- */ td.gsc-input input { background: #fff; /*Cor de fundo do campo de texto*/ border: 1px solid #ddd; /*Estilo e cor da borda do campo de texto*/ color: #666; /*Cor do texto do campo de texto*/ font-size: 11px; /*Tamanho do texto do campo de texto*/ height: 15px; padding: 4px; } td.gsc-input input:hover { border: 1px solid #999; /*Estilo e cor da borda quando o mouse estiver em cima do campo de texto*/ } input.gsc-search-button { padding:4px; background: #eee; /*Cor de fundo do botão*/ border: solid 1px #ddd; /*Estilo e cor da borda do botão*/ font-size: 12px; /*Tamanho do texto do botão*/ text-shadow: #fff 1px 1px 0px; } input.gsc-search-button: hover { border:1px solid #999; /*Estilo e cor da borda quando o mouse estiver em cima do botão de pesquisa*/ background:#ddd; /*Cor de fundo quando o mouse estiver em cima do botão de pesquisa*/ color:#000; /*Cor do texto quando o mouse estiver em cima do botão de pesquisa*/ }

Salve o modelo, e o resultado final será: