Caixa de pesquisa em CSS para Blogger

27 de outubro de 2013

23 comentários:
Ter um campo de busca é muito importante para seu blog. Pois quando um leitor gosta do seu blog, ele não se contenta lendo apenas um artigo. Com a caixa de buscas é possível conseguir muitas visualizações de página e acesso aos seus artigos.



Abaixo, deixo o código desta bela caixa de pesquisa, com personalização simples em CSS:

<style type="text/css">
#pesquisafsm-caixa {
background: #eee; padding:10px; border:0 none; width:170px;
}
#pesquisafsm-botao {
border: 1px solid #222;
color: #eee;
background: url(http://i.imgur.com/cz4sguf.png) no-repeat left #4591fa;
margin-left: -3px;
color:#fff;
font: 'trebuchet ms', trebuchet;
padding:10px 10px 10px 22px;
border:0 none;
font-weight:bold;
border-top-right-radius: 7px;
border-bottom-right-radius: 7px;
}
#pesquisafsm-botao:hover {
cursor: pointer;
background:  url(http://i.imgur.com/cz4sguf.png) no-repeat left #2375E6;
}
</style>
<form action="/search" id="searchthis" method="get" style="display: inline;">
<input id="pesquisafsm-caixa" name="q" placeholder="O que está procurando?" size="40" type="text" /> <input id="pesquisafsm-botao" type="submit" value="Pesquisar" /> </form>

Como inserir em seu blog

  1. Inicialmente, faça login em sua conta e acesse o painel do blogger;
  2. Escolha o blog desejado, e clique no menu "Layout" › "Adicionar um Gadget";
  3. Adicione o gadget "HTML/JavaScript";
  4. Cole o código informado acima, sem modificar nada;
  5. Salve e organize o gadget aonde desejar que a caixe de pesquisa que apareça em seu blog.

Se você entender um pouco de CSS, será possível que faça certas alterações no buscador, como a cor do botão, tamanhos, fontes e muitos mais. Entenda mais sobre o uso do CSS no blogger neste artigo.

23 comentários:

  1. Olá Henrique, estou tendo problemas com o sistema de busca do google e achei este seu código, funciona bem, mas eu gostaria que os resultados não fossem diretamente as postagens e sim a lista de títulos delas, como acontecia com o do google, você teria algum outro código que possa disponibilizar?
    Muito obrigada!
    Camila

    ResponderExcluir
    Respostas
    1. Olá Vinho e Delícias,

      Infelizmente este é o único código em funcionamento quando a questão é as buscas do blogger através de recursos disponibilizados por ele, e não terceirizados. Uma sugestão ao caso seria a criação de uma caixa de pesquisa personalizada, que outro método ao caso: https://www.google.com/cse/all

      Abraços!

      Excluir
  2. Tentei utilizar o código, mas ao pesquisar no meu blog nao retorna resultado e sai para outra página. Tá funcionando?

    Abraço!

    ResponderExcluir
    Respostas
    1. Olá Eduardo,

      Sim, o código funciona. No entanto, o sistema é diferente do anterior, e até por isso, as buscas devem ser precisas para indicar o conteúdo desejado.

      Abraços!

      Excluir
  3. Ola Henrique usei o gadget "HTML/JavaScript"; como você indicou, gostava mais do anterior que listava títulos.
    tem ideia de quando irá funcionar novamente?
    obrigada
    Lucia

    ResponderExcluir
    Respostas
    1. Olá Lucia,

      Até onde sei, a equipe do Google/Blogger está trabalhando para solucionar o problema. Embora pareça ser simples, o problema é algo mais complexo que se imagina.

      É possível que use deste recurso: https://www.google.com/cse/all

      Abraços!

      Excluir
  4. OLá Henrique, aonde digito o "HTML/JavaScript", estou com dificuldade. pode me ajudar? Obrigado.

    ResponderExcluir
    Respostas
    1. Olá Luiz,

      Você deve adicionar o gadget "HTML/JavaScript", para isso, entre no Painel do Blogger, clique em "Layout" > "Adicionar um Gadget" > Procure pelo gadget "HTML JavaScript" > Adicione o código e Salve.

      Abraços!

      Excluir
  5. Muito bom. Ficor perfeito no meu blog - só reduzir o tamanho do box para 130 para se encaixar melhor ao meu site!!! Dad uma Conferida www.precosfranquias.com.br

    ResponderExcluir
  6. Olá, estou tendo um problema com a caixa de pesquisa. Ela aparece no meu blog normalmente mas quando aperto para digitar, não digita nada, então não consigo pesquisar. O que pode ter acontecido?

    ResponderExcluir
  7. Instalei o sistema em meu blog e está funcionando bem, mas não consegui mudar a cor do botão, mesmo alterando os parâmetros. Continua azul. Você sabe a solução?

    ResponderExcluir
  8. funcionou valeu!!!!


    vejam lá!!!

    http://cordeiropedreiro.blogspot.com.br/
    http://letrasecifrasvozeviolao.blogspot.com.br/


    aproveite e deixe seu comentário lá que eu retorno!!!


    obrigado mesmo !!!

    o que seria de nós blogueiros de primeira viagem se não fosse esses tutoriais!!!!

    ResponderExcluir
  9. Funciona perfeitamente, muito obrigado Henrique. Só tive o trabalho de fazer alguns ajuste como a largura pra melhor se adaptar a minha sidebar.

    Mais uma vez muito obrigado.

    ResponderExcluir
  10. Queria saber se tem como fazer essa barra de pesquisa subir mais pois quando uso no meu blog ele fica abaixo do meu menu eu quero que fique na mesma linha. Se souber um comando para fazer a caixa de pesquisa subir me manda. Agradeço o tutorial me ajudou bastante.

    ResponderExcluir
  11. Excelente dica meu caro!
    Deu certo!
    Muito obrigado!

    ResponderExcluir
  12. Muito obrigada!

    Esta barra de pesquisa funcionou perfeitamente! Eu ja tinha tentado o codigo de outro blog e a pesquisa so funcionava da primeira vez e depois nao funcionava mais.

    Agora esta perfeito. Mudei apenas a cor e retirei os cantos arredondados.

    Caso queira olhar esta no canto direito do meu blog:

    http://chovendoarte.blogspot.com/

    Valeu!!!!

    ResponderExcluir