" Colocar caixa de pesquisa personalizada"
..." como criar uma caixa de pesquisa interna dentro do seu blog, que facilitará muito a procura de artigos específicos. Está caixa de pesquisa é muito simples de ser criada e muito bonita, veja o resultado final abaixo" ...
" Aviso: Antes de fazer modificações em seu blog faça um Backup do template"
2 - Procure por ]]></b:skin> (use Ctrl+F para encontrar),
e logo ACIMA do código encontrado cole o código abaixo:
<!-- formatação da caixa de pesquisa -->
#form-busca {
background: none;
}
#form-busca #sprocura{
height: 20px; /* Altura da caixa de pesquisa*/
width: 205px; /* Largura da caixa de pesquisa */
margin-top: 4px;
margin-left: 0px;
color: #000000; /* Cor do texto */
border: 3px solid #5e5e5e; /* Largura e cor da borda */
float: left; /* Alinhamento da caixa de pesquisa */
padding: 2px;
background-color: #ffffff; /* Cor de fundo */
}
#form-busca #bt-busca {
height: 32px;
width: 32px;
background: url(http://img62.imageshack.us/img62/9982/searchlb.png);
border: none;
margin-top: 3px;
float: left;
cursor: pointer;
background-repeat: no-repeat;
background-position: left center;
margin-right: -10px;
}
#form-busca:hover #bt-busca:hover{
height: 32px;
width: 32px;
background: url(http://img202.imageshack.us/img202/7799/searchhover.png);
border: none;
margin-top: 4px;
float: left;
cursor: pointer;
background-repeat: no-repeat;
background-position: right center;
margin-right: -10px;
}
<!-- formatação da caixa de pesquisa -->
" Obs: Os links em vermelho são referentes ao botão de busca, caso queira você pode trocá-los, além de modificar outros atributos, como largura e altura."
3 - Entre na pagina Design >> Adicionar gadget >> Html/Java script e coloque o código:
<!-- Caixa de pesquisa --><form action='/search' id='form-busca'><input id='sprocura' maxlength='255' name='q' type='text' value=''/><!-- Caixa de pesquisa -->
<input id='bt-busca' name='btnG' type='submit' value=''/></form>
4 – " Pronto, sua caixa de pesquisa já está finalizada e agora seus visitantes tem mais uma ferramenta ao seu favor."
" Veja também uma alternativa a este tutorial:
fonte e créditos do presente post:
0 comentários:
Postar um comentário
Mensagem do formulário de comentário:
obrigada por comentar,
volte sempre!