Translate

Pesquisar

Marcadores


aprenda :..."como criar uma caixa de pesquisa interna dentro do seu blog"

"  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"    ...
busca
"  Aviso: Antes de fazer modificações em seu blog faça um Backup do template"


1  - Entre em Design >> Editar HTML, não marque a opção ‘Expandir modelos de widgets’.


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=''/>
<input id='bt-busca' name='btnG' type='submit' value=''/></form>
<!-- Caixa de pesquisa -->
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!