Caixas de pesquisa personalizadas para blog

em 17 de agosto de 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?

Alguém que escreve. Especialista em si mesma. Leitora que lê muito menos do que gostaria. Blogueira por paixão e profissão. Propriedade da Princesa e da Menininha, e de um cachorrinho muito levado chamado Bloguinho. Tentando viver. Sempre.

28 comentários , comente também!

  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

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…