![[ Ferramentas Blog ]](/wordpress/wp-content/themes/fb5/images/logo.png){kind=logo}
A caixa de busca ajuda os leitores a encontrar qualquer conteúdo em seu blog com muita facilidade, obtendo assim exatamente o que eles querem. E lembre-se de uma coisa que tornar as coisas mais fáceis para os seus leitores é muito importante para a fidelização desse público. Vou mostrar aqui como adicionar um modelo simples e bonito, seguindo os padrões do Blogger.
Hoje estamos compartilhando uma caixa de busca muito elegante para blogger, esta caixa de busca tem um design simples, mas elegante, sem contar que você pode alterar o tamanho e as cores para melhor se adaptar ao seu blog.
Como sempre mantive a instalação mais fácil possível, você pode adicionar essa elegante caixa de busca em uma única etapa.
Agora vamos ver como adicionar a caixa de busca elegante no blogger
1. Acesse o painel do seu blog
2. Clique na guia “Layout”
3. Clique em ‘Adicionar um gadget’ → Escolha tipo’HTML/Javascript’ e cole o seguinte código:
<style>#search {float:right; height: 30px; margin:10px 0 0 0; }
#search input.field {font-family: "Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif; background-position:top right; background-repeat:no-repeat; width: 160px; padding:7px; outline: none; font-size: 13px; border: none; z-index: 1; height:16px; float:left; padding-right:30px;}
#search input.field:focus {background-position:top right; background-repeat:no-repeat;}
#search input.submit {width:70px; height:30px; font-weight:bold; float:left; border:none; font-family: Arial, Helvetica, sans-serif; font-size: 13px; cursor:pointer; margin:0 0 0 1px;}
#search input.field {background-image:url(https://lh4.googleusercontent.com/-kWepQUL6ypo/T_bcpvbb5nI/AAAAAAAACFo/OhezBRoj15E/s30/search_icon.png); background-color:#2c2c2c; color: #FFF;}
#search input.field:focus {background-image:url(https://lh4.googleusercontent.com/-kWepQUL6ypo/T_bcpvbb5nI/AAAAAAAACFo/OhezBRoj15E/s30/search_icon.png); background-color:#404040;}
#search input.submit {background-color:#b60002; color:#fff;}</style>
<div id='search'>
<form action='/search' id='searchform' method='get'>
<div><input class='field' id='s' name='q' onblur='if (this.value == '') {this.value = 'Enter keywords..';}' onfocus='if (this.value == 'Enter keywords..') {this.value = '';}' type='text' value='Enter keywords..'/>
<input class='submit' name='submit' type='submit' value='Buscar'/></div>
</form>
</div>
Você pode alterar as cores e tamanho se desejar, conhecendo um pouco de CSS para modificar o estilo.
Salve e veja o gadget adicionado em seu Blog.
vlw por ter postado ^^
Obrigado colega.
Valeu!
Cara muito obrigado, só me responde uma pergunta onde altero os valores da altura e lagura
valeu.
Para alterar o tamanho: width: 160px;
Para alterar a altura: height:16px;
Altere os valores conforme a sua necessidade.
Qualquer duvida ou problema relacionado a esse gadget, não hesite em perguntar.
Valeu!
e o efeito hover da caxa botão como coloca ? Kemuel Stefano
testei no meu blog e no Firefox o botao funciona, mas a caixa de texto nao aceita entrada de valores. Já testei diversos códigos e nenhum funciona, nem a propria caixa de pesquisa padrao do blogger funciona. A unica caixa de pesquisa que funciona é aquela barrinha feia no Top do blogger.
Alguem sabe me dizer porque o firefox bloqueia isso e onde eu desbloqueio isso.
**Obs.: Nos outros navegadores funciona OK
Tem como trocar a cor vermelha por outra ?
Leonardo,
Sim. Basta trocar os códigos das cores que aparecem na linha: background-color:#b60002; color:#fff;
A primeira é o vermelho e a segunda é o branco do texto.
Aqui você pode encontrar todos os códigos de corres: http://www.mxstudio.com.br/Conteudos/Dreamweaver/Cores.htm
Muito Bom o tutorial de vcs, porem estou com um probleminha, todos os buscadores que eu adiciono no meu blog, eles não escrevem e nem faz a busca, o que será? Ficarei muito agradecido se alguém poder me ajudar.
Pode ser algum conflito com outro código e recurso de seu layout.
quando eu uso a caixa de pesquisa, a busca é feita e o endereço nao muda (continua o mesmo), o problema é quando esta na pagina inicial, faz a busca e quando quer voltar para a pagina inicial, o home nao sai da pagina e continua a mesma (sem sair da busca). como reparar
Valew , queria saber como faz pra ficar arredondado
Como fazer para que quando a pessoa click dentro da caixa a descrição desapareça??
Quando fui testar percebi que a descrição ”enter key..” não desaparece e quando voce digitar neter ou clica em buscar as palavras vão junto…
Valew, ficou exatamente do jeito que eu queria depois de alguns ajustes de tamanho e cor…