Criar caixa de pesquisa para blog - CSS

18 comentários
caixa de busca

Caixa de pesquisa

Ter uma caixa de pesquisa no blog é de extrema importância para manter seu leitor por mais tempo em seus artigos, além de oferecer conforto para se achar o que quer com facilidade.

A maioria dos templates já vem com caixa de pesquisas (busca), porém, nem sempre atende as nossas necessidades ou estão em locais que gostaríamos de mudar.

Por isso, disponibilizamos algumas caixas de pesquisas para você colocar em seu blog.

Algumas foram desenvolvidas por nós, outras trouxemos dos mais variados locais da web.

Não é complicado, basta copiar os códigos referentes à caixa de busca, ,mais abaixo.

Para esta caixa de busca, basta ir no painel do seu blog e na opção layout, clicar em gadgets e escolher a opção html/javascript. Feito isso, insira o código da caixa de pesquisa, abaixo, e salve.

caixa de busca


caixa de busca

Para esta caixa de busca, vá ate o painel do seu blog, clique na opção modelo e, em seguida, editar html.

Dentro da caixa de código, aperte ctrl+f e procure pelo comando ]]></b:skin>

Logo acima dele, cole o código de estilo css de uma das caixas abaixo:

Bordas arredondadas

Bordas quadradas


Após ter inserido a css de uma das caixas acima, vamos inserir o html, que fará com sua caixa funcione. Para isto, clique em layout, gadgets, escolha a opção html/javascript e insira o código abaixo:



Agora, basta salvar e visualizá-lo em funcionamento.

[image[41].png]
Para esta caixa de pesquisa, também iremos trabalhar em duas etapas seguindo o mesmo procedimento da anterior. Vá até o painel do seu blog, escolha a opção modelo e, em seguida, editar html. Ao abrir a caixa com o código fonte do seu blog, procure pelo comando ]]></b:skin> e acima deste comando, insira o código css da caixa de auto seleção abaixo:



Após aplicar a css dentro do código fonte do seu blog, vamos inserir o html para dar vida à caixa de pesquisa. O que deve ser feito em layout, gadgets, html/javascript.



caixa de busca

Esta caixa de pesquisa é um pouco diferente das outras, pois funciona como um popup automático flutuante. Não é necessário fazer nenhuma alteração, nem mudar a estrutura do código fonte do seu blog. Basta copiar o código, abaixo, e inserir em um gadget na aba layout.


O que achou? Deixe sua opinião!

18 comentários :

  1. VLW ESTA CAIXA DE PESQUISA ME AJUDO MUITO

    ResponderExcluir
    Respostas
    1. Olá, thiago, obrigado pela visita ao BG!

      volte sempre, Abraços Andrew Silva do BG!

      Excluir
  2. Respostas
    1. Olá, Gabriel, ficamos felizes com sua visita, que bom que o artigo tenha sido útil para você.

      Abraços... Andrew silva do BG!

      Excluir
  3. Respostas
    1. Olá, Matheus, agradecemos a visita, abraços Andrew Silva do BG!

      Excluir
  4. oi mas eu coloquei um négocio para não copiar os posts e agora nenhuma caixa de pesquisa funciona no meu blog você poderia me ajudar ?

    ResponderExcluir
  5. queria colocar uma caixa de pesquisa em outro site, mas quando o usuário pesquisasse fosse redirecionado pra o blog, é possível?

    ResponderExcluir
  6. cara posso add você no meu blog como parceiro ?

    ResponderExcluir
  7. Obrigado. Depois de procurar muito, finalmente consegui um que funcione no meu novo R2Portal.com

    ResponderExcluir
  8. BG, gostaria que me ensinasse a atribuir os resultados nessa caixa de pesquisa.
    Tenho um site simples criado no WIX, porém não existe ainda esta tecnologia, é preciso inserir um código de HTML.
    Sem o menor conhecimento a respeito, copiei e colei, em seguida a caixa apareceu perfeitamente, mas sem nenhuma utilidade já que não sei como ligar minhas paginas WIX nesta caixa.
    Fico muito grata de puder me ajudar.
    Att. Jade Maccione

    ResponderExcluir
    Respostas


    1. Olá Jade esta caixa se baseia em script, não sei como funciona na wix mas se o sistema da plataforma do seu blog trabalhar com php é pouco provável que estas caixa de busca funcione. aconselho a fase uma pesquisa na web a respeite de caixa de busca com php, provavelmente irá lhe atender bem.

      Excluir
  9. Respostas
    1. Sério :O Brayan!??? é seu nome real mesmo chará?

      Excluir
  10. olá boa noite, nossa achei um bem legal, muito obg, abços

    ResponderExcluir
  11. Olá, boa noite.

    Com esses gadgets consegui personalizar minha caixa de busca... Obrigado!

    ResponderExcluir
  12. perfeito fico o primeiro obrigado!!!

    ResponderExcluir

O BG entrará em contato com você em até 24 horas! Para deixar seu link, escolha a opção Nome/URL. Spans ou links para pedidos de visita serão excluídos imediatamente. Para mais informações, leia a Política BG.