Caixa de busca Elegante para Blogger

Siga o Ferramentas Blog: Canal no Youtube | Facebook | Twitter | Google+
Acesse AGORA: https://blogueiro.pro e se torne um Blogueiro de Elite.

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.

Caixa de busca elegante

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 == &apos;&apos;) {this.value = &apos;Enter keywords..&apos;;}' onfocus='if (this.value == &apos;Enter keywords..&apos;) {this.value = &apos;&apos;;}' 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.

Já pensou em ser um(a) Blogueiro(a) mais Profissional?

Está cansado(a) de ser um blogueiro mediano(a) e que não tem resultados com seu Blog, não ganha dinheiro e não recebe as visitas que gostaria?

Você chegou aqui procurando como aprofundar seus conhecimentos em Blog, como Ganhar Dinheiro com seu Blog, aplicar as melhores técnicas de SEO, divulgar seu Blog e fidelizar seu público alvo. E posso te ajudar com essas coisas e muito mais, elevando o nível de qualidade do seu projeto.

Desenvolvi um curso completo, totalmente online, cobrindo tudo o que é necessário para um Blog atingir seu potencial máximo, detalhe por detalhe, que vão te tornar um Blogueiro de Elite:
  • Técnicas de produção de conteúdo
  • Fidelização do Público alvo
  • Divulgação e Técnicas de SEO
  • Métodos e técnicas de Monetização
Acesse AGORA: https://blogueiro.pro e se torne um Blogueiro de Elite.

Esta é sua chance de ser mais profissional e ter um blog eficiente, completo e que pode ser sua fonte de renda permanente. Sou Blogueiro desde 2007 e condensei todo este conhecimento dentro do curso Blogueiro de Elite para entregar a você.

14 Comentários

    • 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!

      Responder

  1. 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

    Responder

  2. 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.

    Responder

  3. 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

    Responder

  4. 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…

    Responder

Deixe um comentário

Ao comentar você concorda com nossa Política de Comentários.