Caixas de pesquisa personalizadas para blog - * Blog Elaine Gaspareto *

Caixas de pesquisa personalizadas para blog

Publicado em 17/08/2015

caixas de pesquisa personalizadas para blogs

Personalizar um blog, deixa-lo bonito e atrativo, com nossa "cara" e isso tudo sem esquecer da navegabilidade e facilidades para o leitor: esse é grande desafio quando começamos a mexer no blog, adicionar gadgets, inserir funcionalidades...
Sim, personalizar dá trabalho... mas vale a pena!

Uma das coisas mais essenciais ao blog, sem dúvida, é uma boa caixa de busca.
A caixa padrão do Blogger (que funciona mas de vez em quando dá uns tilts) é essa:


Simples e não muito personalizada, né?
Mas, calma!
Vamos aprender alguns modelos bem legais?
Tempos atrás eu mostrei alguns modelos aqui no blog, relembre:

http://www.elainegaspareto.com/2013/11/caixa-de-pesquisa-para-blog.html

Hoje vou mostrar mais alguns, bem modernos e estilosos.
Vem comigo!


Caixa de pesquisa modelo 1



Copiar o código deste modelo


 

Caixa de pesquisa modelo 2



Caixa de pesquisa modelo 5


Copiar o código deste modelo



Como instalar a caixa de pesquisa no blog


Todas possuem o mesmo método de instalação.
Preste atenção, é bem simples!
Vá ao painel administrativo de seu blog e clique em Layout.
Clique em Adicionar um gadget e escolha a opção HTML/JAVASCRIPT.
Dentro da caixa que expandir cole o código do modelo escolhido, salve, arraste para onde deseja que fique e salve as alterações do Layout.
Sim, só isso!

Basicamente é o mesmo modelo, só alterei algumas coisas como cores, bordas, fontes e posicionamento do botão.
Claro que, caso queira mudar cores precisará alterar o código do modelo escolhido, e nesse caso precisa ter um conhecimento básico em CSS.
Leia o código do modelo que escolher, ele te dirá o que alterar.
Mas se não quiser não precisa alterar nada, e estará funcionando.

Escolha seu modelo e bora ser feliz com uma caixa de pesquisa linda?
Diz pra mim, nos comentários, de qual modelo você mais gostou, e qual escolheu?






45 comentários via Blogger
comentários via Facebook

45 comentários:

  1. Deixo o que você colocou. Está ótimo rsrs.
    Boa semana.
    joturquezzamundial
    Beijos.

    ResponderExcluir
  2. acabei de colocar o modelo três no meu blog... e adorei...
    como sempre você lacrando nas dicas! :*

    ResponderExcluir
  3. Ah, obrigada. Estava procurando uma caixa de pesquisa legal. (:

    ResponderExcluir
  4. Oi Elaine,
    Mais um modelinho adicionado lá no blog, e mais um agradecimento a você pela disponibilidade em nos ensinar essas coisas lindas.

    Beijos
    patriciaaprendendo.com

    ResponderExcluir
  5. Sempre postando coisas bastante interessantes. Parabéns.

    ResponderExcluir
  6. Postagem interessante. Parabéns ao você e teu blog.

    ResponderExcluir
  7. Eu achei lindo o modelo 2, mas como não consigo trocar a cor de fundo, vou ficar com um que também foi dica sua.

    Obrigada!

    ResponderExcluir
  8. Por favor me ajuda! Eu não tenho nada a dizer layout no meu painel só tenho a dizer esquema!

    ResponderExcluir
  9. Parabéns pelo blog e pelo post. Deu tudo certinho, Thanks...

    ResponderExcluir
  10. Obrigada pela ajuda,só fiquei na duvida em qual usar!
    Bom esse é meu http://www.luvieira.com.br/ se poder da uma passadinha por lá, será muito bem vinda! Bjks

    ResponderExcluir
  11. Obrigado, ajudou muito. Mas estou com uma invejinha branca da sua caixa de pesquisas.
    (づ。◕‿‿◕。)づ Quais as chances de me passar o cod?

    ResponderExcluir
  12. Olá, eu coloquei um dos modelos no meu site e esta aparecendo uma propaganda uma vez por dia no primeiro clique, e quando tiro e entro em outro computador não aparece a propaganda, a propaganda é a da adultfinder, pode esse código ter sito infectado por virus dentro do site, ou só fica com virus se eu ja estiver colocado o código com virus ? me ajude, não vou divulgar meu site enquanto essa propaganda subir.

    Fale comigo por e-mail pra me ajudar pfv

    Rai Staz

    E-mail Raistaz@outlook.com.br

    ResponderExcluir
    Respostas
    1. Seu blog possui muitos gadgets, creio que um deles pode estar fazendo aparecer as propagandas.
      Com certeza não é a caixa de busca pois elas são, basicamente, CSS sem nada de script...

      Excluir
  13. Preciso de ajuda, pois eu preciso da caixa modelo 2 em no máximo 250px, mas só dá erro quando redimensiona...

    ResponderExcluir
    Respostas
    1. Kel, dá erro porque antes precisa redimensionar a imagem.
      Ela mede 280px, então tem que redimensionar para o tamanho que deseja, hospedar e aí tentar.

      Excluir
  14. Que show !!

    Meu blog www.oespaco.net é 99% Elaine Gaspareto, sou grato demais!!

    Só uma perguntinha, é possível adicionar algum destes modelos em um dos menus horizontais que vc ensina? Ficaria ótimo pra mim!

    Obrigadão Elaine
    E parabéns pelo trabalho!!

    ResponderExcluir
    Respostas
    1. Lucas, acho que sim, experimente colocar dentro do código do menu, antes de fechar a div.

      Excluir
  15. Olá, gostei muito dos modelos só não consigo deixar onde eu quero a caixa de pesquisas, pretendo deixar ele junto com o menu no lado direito... :( E preciso muito colocar o modelo 3
    S-O-C-O-R-R-O!!!

    ResponderExcluir
  16. Amei e super ajudou <3
    Usei um dos códigos e minha caixinha de pesquisa ficou um amour. Obrigada pelo tutorial!

    Beijinhos :*
    www.vidadebloguette.com

    ResponderExcluir
  17. Elaine gostaria de te dizer o quanto sou grato por todas as dicas que aproveitei do seu blog, e essa de personalizar a caixa de pesquisa foi mais uma delas. Muito obrigado mesmo! Deus te abençoe!

    ResponderExcluir
  18. Beleza meu amor!!!
    Amei a Dica. A minha caixa e' a n0 1.
    Valeuuu...!!!

    ResponderExcluir
  19. Deu certo meu problema é que se alguém procura a palavra por exemplo : hidratação sem acento não aparece na pesquisa

    ResponderExcluir
  20. Oi Elaine!
    Gostaria de agradecer por seus tutoriais tão informativos. Sou nova como blogueira e não posso por hora encomendar um template, mas suas dicas e tutoriais estão me auxiliando muito, pois sou leiga em HTML. Useis seus tutorais para montar um blog mais apresentável e gostei do resultado. E já sei encomendarei com você quando puder.

    Muito obrigada mesmo!
    bjss

    ResponderExcluir
  21. Amei o modelo 5. Obrigado por fazer esses tutorias maravilhosos ^_^

    ResponderExcluir
  22. Como personalizar a caixa de pesquisa com o Adsense?

    ResponderExcluir
  23. a caixa fico boa mais nao da pra pesquisa nada

    ResponderExcluir
  24. Gostei, ficou perfeito.
    http://aprendendocomasorquideas.blogspot.com.br/

    ResponderExcluir
  25. não funciona nem com reza brava no wix!

    ResponderExcluir
  26. Fiquei em dúvida entre o 2 e o 3 haha
    Escolhi o três *-*

    ResponderExcluir
  27. Olá Elaine :)
    Sou português...
    Antes de mais, parabéns pelo seu site, excelente!
    Precisava saber, se é possível criar ou editar código de uma caixa de pesquisa buscando apenas os títulos das páginas (e não das postagens), ou em segundo plano apenas os títulos de ambas (páginas e postagens). É que as caixas não buscam nada das páginas e vão buscar tudo das postagens, não sendo últil para o que pretendo. Obrigado Beijos ;)

    ResponderExcluir
    Respostas
    1. Ed, por padrão páginas estáticas não aparecem na pesquisa de blogs. Infelizmente não sei como contornar isso...

      Excluir
  28. Porque quando pesquiso com seus botoes personalizados eles nao captam nada? :(

    Achei bem legal eles :3

    ResponderExcluir
  29. Adoreiiiiiiii Elaine minha Flor <3 amo suas dicas o que seria do meu blog sem elas? SUPER BEIJO

    ResponderExcluir
  30. Adoreiiiiiiii Elaine minha Flor <3 amo suas dicas o que seria do meu blog sem elas? SUPER BEIJO

    ResponderExcluir
  31. ola , boa tarde conseguir colocar a barra de pesquisa mas agora ninguem consegue digitar o que faço?

    ResponderExcluir
    Respostas
    1. Camila, caso seu template seja modificado pode ser isso.
      Testei agora pra conferir e funciona normalmente: https://novo-blog-testes.blogspot.com.br/

      Excluir

Olá! Muito obrigada por ler meu blog e obrigada também por se dispor a comentar meus posts. Seja muito bem-vindo(a)!

Importante!
Devido à falta de tempo hábil eu não me comprometo a responder perguntas referentes aos tutoriais postados neste blog.
Pedidos de ajuda individual serão respondidos conforme o meu tempo e disponibilidade permitirem.
Por favor, entenda: comentários sem relação alguma com o post não serão liberados e nem respondidos.

Para saber mais sobre a melhor forma de utilizar este blog leia Termos de uso do blog.



Muito obrigada, fique à vontade para interagir.
Mas lembre-se:
Gentileza, educação e boas maneiras servem também para a vida nos blogs…