[Blogger - Gadgets] - Formulários de busca customizados com CSS para Blogger

Se você acompanha o blog desde o começo ou se já olhou todos os artigos aqui publicados, deve ter notado que o primeiro artigo que eu escrevi foi um tutorial ensinando como colocar um formulário de busca simples no Blogger. O problema é que o formulário é realmente muito simples. E como muitos leitores não têm conhecimento sobre CSS, acabam não conseguindo customizar o formulário de uma forma que lhes agrade, pensando nisso eu resolvi criar alguns formulários de busca customizados e disponibilizá-los, gratuitamente, para que esses leitores possam utilizá-los em seus blogs.

Logo abaixo você verá um exemplo de cada formulário de busca, e ao lado deles haverá um botão para o obter seus códigos, basta clicar no botão correspondente para visualizar o código do formulário. Após visualizar o código copie-o e cole-o dentro de um gadget do tipo HTML/Javascript.


Ao todo são 42 formulários de busca diferentes para serem utilizados, e os mesmos estão divididos em 3 categorias: Simples, Com lupa e Com CSS3. Você pode alterar a estrutura e/ou as cores do formulário como bem entender, usando essa tabela de cores, desde que você tenha noções básicas de HTML e CSS.

ATENÇÃO: esse artigo sofreu uma atualização no dia 19.06.2013. Antes de clicar no botão de "Obter Código", aconselho que leia a atualização no final do artigo, para que você entenda como obter o código.

Formulários simples (apenas campo de digitação)


Demonstração Instalar
#1
#2
#3
#4
#5
#6
#7
#8
#9
#10
#11
#12
#13
#14

Formulários com lupa (ícone de lupa à esquerda)


Demonstração Instalar
#1
#2
#3
#4
#5
#6
#7
#8
#9
#10
#11
#12
#13
#14

Formulários com CSS3 (fundo gradiente e botão)


Demonstração Instalar
#1
#2
#3
#4
#5
#6
#7
#8
#9
#10
#11
#12
#13
#14

Atualização — 17.08.2011 às 11h10
O código dos botões foram atualizados para uma melhor adaptação aos diversos modelos de template. Dependendo do template que você estiver usando no seu blog, talvez seja necessário aumentar o tamanho da sua sidebar (barra lateral) ou diminuir os valores do formulário de busca. Se você está utilizando um template que seja compatível com a ferramenta Designer de modelo, eu aconselho a primeira opção.

Para aumentar o tamanho da sidebar, faça login no Blogger e acesse o painel de controle do seu blog, depois vá no menu Modelo, em seguida clique no botão Personalizar e utilize a aba Ajustar larguras para aumentar a largura da barra lateral.

Se você não estiver utilizando um template que seja editável pelo Designer de modelo, você poderá ajustar o tamanho da busca editando os valores: width:68% e width:23%. O valor 68 se refere ao tamanho do campo onde o leitor digitará o que busca, e o valor 23 se refere ao tamanho do botão.

Atualização — 08.04.2012 às 01h15
O artigo foi atualizado para remoção dos créditos que ficam junto aos gadgets de busca. A partir dessa data não há mais a necessidade dos créditos. Portanto, se você utiliza algum dos nossos formulários de busca, e o mesmo está com os créditos, delete-o de seu blog e instale-o novamente usando os botões acima.

Atualização — 20.07.2012 às 01h15
Os formulários de busca foram atualizados para adequação da frase padrão que aparece dentro dos campos de busca, para os novos padrões HTML5. Os formulários foram atualizados também para adição da ferramenta de busca por voz.

INFORMAÇÃO: embora todos os formulários possuam os códigos necessários para mostrar a ferramenta de busca por voz, a mesma funciona somente em navegadores que utilizam webkit, como por exemplo o Google Chrome, e não aparecerá em outros navegadores. Caso queira visualizar essa ferramenta em funcionamento, visite este artigo utilizando o navegador Google Chrome.

Atualização — 12.01.2013 às 23h18
Uma falha no sistema da plataforma Blogger, provavelmente devido a alguma atualização, não está permitindo a instalação automática dos gadgets. Portanto, ao escolher uma busca você deverá clicar no botão de instalação referente à ela e, em seguida, na página que se abrir clique no link "Editar conteúdo", copie o código que aparecer e cole dentro de um gadget HTML/JavaScript em seu blog.

Atualização — 19.06.2013 às 00h15
A instalação automática do gadget foi desabilitada devido a uma falha de integração com o Blogger. Agora, para que você possa instalar o formulário de busca em seu blog, você deverá copiar o código fornecido e colar em um gadget do tipo HTML/JavaScript. Como os formulários são fornecidos gratuitamente e sem nenhum tipo de crédito, optamos por adicionar uma publicidade no botão de obtenção do código. Portanto, ao clicar no botão "Obter código", no formulário que você quer, você será direcionado para uma página publicitária. Espere a contagem regressiva que é mostrada no canto superior direito da página e, após a contagem chegar a 0 (zero), clique no botão "Fechar Propaganda". Fazendo isso você será direcionado para a página que contém o código do formulário de busca, bastando copiá-lo.
É terminantemente proibida a cópia de nossos artigos sem nossa expressa autorização!
Plágio é crime previsto no artigo 184 do Código Penal brasileiro e na Lei 9.610/98.
As informações contidas neste artigo estão desatualizadas? Notifique-me! Editar artigo
Igor Sousa é dono e criador do blog Hdblog (antigo Bloggando Na Web). Tem 24 anos, é paulistano e atualmente cursa o 8° Semestre em Ciências Contábeis. Blogar era apenas um modo de melhorar sua redação de texto, mas unida a sua vontade de ajudar as pessoas passou a ser um hobby.

Foram postados 10 comentários neste artigo!

  1. olá, tentei fazer a instalação mais ele não aparece na sidebar. escolhi o numero 14 dos formularios com css3. obrigada

    ResponderExcluir
    Respostas
    1. Olá Camila, infelizmente há um problema no sistema do Blogger, provavelmente alguma atualização que eles estão fazendo, que está impossibilitando a instalação de gadgets automaticamente. Caso ainda queira instalar a busca em seu blog, clique no botão "Instalar busca" referente a busca que você quer, quando a janela de instalação abrir, clique no link "Editar conteúdo", copie tudo o que há dentro do campo que aparecer e cole dentro de um gadget HTML/JavaScript em seu blog. Qualquer dúvida entre em contato novamente, e desculpe a demora em responder!

      Excluir
  2. Igor,

    Como posso visualizar o código deles? queria colocar em uma página html.

    Obrigado

    ResponderExcluir
    Respostas
    1. Rafael Nunes, para visualizar o código dos formulários basta clicar no botão de "Instalar" da busca que você quer, e na página que abrir clique no link "Editar conteúdo" para ver o código da busca. Porém, não sei o que está havendo que o código não está aparecendo completo. Sendo assim, você não estará copiando o código completo da busca. Averiguarei o problema e atualizarei o artigo assim que resolvê-lo. Eu que agradeço a visita e o comentário. Um abraço.

      Excluir
    2. Obrigado, realmente os formulários são perfeitos, muito bom o design. Utilizei no chrome e da pra usar o comando de voz, apesar de estar em inglês. Eu copiei o código porém vem sem a lupa que era o que eu queria. Abs.

      Excluir
    3. Olá Rafael, fico feliz que tenha gostado do design das buscas. Quanto a não aparecer a lupa, foi justamente o que eu falei no comentário acima, não sei o que está havendo com o sistema de adição automática de gadgets do Blogger, que não está mostrando o código completo dos formulários. E o código que gera a lupa está justamente na parte que não é mostrada pelo recurso do Blogger. Estou averiguando o problema para encontrar uma solução! Abraços.

      Excluir
  3. Quando você clica em editar conteúdo, o formulário está vazio. =\

    ResponderExcluir
    Respostas
    1. Olá Sybylla, infelizmente o recurso de instalação automática do Blogger não está adicionando o código completo ao campo de conteúdo do recurso. Não sei ao que se deve essa falha, mas é algo geral, tanto que ao tentar instalar o gadget de "artigos relacionados" de um serviço bem conhecido na web, o recurso de instalação automática também não estava funcionando. Preciso arranjar um tempo para estudar mais a fundo o que pode estar ocorrendo, mas as coisas estão muito corridas. Qualquer dúvida ou se estiver interessada em uma das buscas, é só entrar em contato comigo! Muito obrigado pelas visitas ao blog! Um abraço.

      Excluir
  4. Muito obrigada! Você está me ajudando demais.

    ResponderExcluir
  5. Poh, muito interessante o trabalho de vocês, parabéns pelo trabalho!

    Todos são muito bons!!!

    ResponderExcluir