Caixa de busca no cabeçalho do Blogger

Caixa de busca no cabeçalho do Blogger

6 10 99
Caixa de busca no cabeçalho do Blogger 10 6 99

Atendendo a pedidos, irei ensiná-los como colocar uma caixa de busca/pesquisa no cabeçalho do blog. Quero lembrar que a aplicação desta técnica pode não funcionar em todos os templates, mas funciona no Mínima e nos modelos do Dicas Blogger.

Antes de começar, faça um backup do seu template por precaução e aplique a gambiarra técnica primeiro em um blog de testes e só depois em seu blog principal.

Entre no painel do Blogger e na aba layout, clique em editar html. Marque a caixa expandir modelos de widgets e procure por /* ----- HEADER ----- */ ou #header-wrapper ( que é onde começa o código do cabeçalho).

Copie o código abaixo e cole ANTES do código do cabeçalho (header).

/* ----- Busca ----- */

#busca{
width:auto;
height:auto;
z-index:1;
position: absolute;
top: 50px;
left: 660px;
}

Tutorial Dicas blogger. Todos os direitos reservados.
Inserindo o código antes do header

Procure agora por <div id='header-wrapper'>e cole logo abaixo o código de busca:

<div id='busca'>
<form action='/search' id='searchthis' method='get' style='margin:0;padding:0;display:inline;'><input id='search-box' name='q' onblur='clickrecall(this,&apos;Pesquisar&apos;)' onclick='clickclear(this, &apos;Pesquisar&apos;)' size='20' style='color: #999;' type='text' value='Pesquisar '/> <input id='search-btn' type='submit' value='Buscar'/></form> </div>

Caso você queira colocar uma caixa de busca do Google Adsense, substitua a parte em vermelho do código acima pelo código fornecido pelo AdSense.

<div id='busca'>CÓDIGO DO ADSENSE</div>

Colando código do AdSense

Ajuste a posição da caixa de busca, alterando os valores top e left do 1° código.

visualizando o template até ficar legal e só depois clique em salvar modelo.

Este método foi testado em todos os modelos do Blogger e nos nosso templates.

54 Comments
Comments
  1. Legal, queria mesmo aprender a fazer isto!

    ResponderExcluir
  2. Gostei! E viva a gambiarra no Blogger! \o/

    ResponderExcluir
  3. O que é uma caixa de busca do AdSense? Tem algum exemplo online pra ver?

    ResponderExcluir
  4. Tenho sim, Pedro. Olhe no alto desta página e você encontrará uma caixa de busca do AdSense.
    Fica no cabeçalho, a sua direita, em cima de "ANO lll"

    ResponderExcluir
  5. Legal, tava querendo fazer isso a um tempinho já, hj implementei.

    ResponderExcluir
  6. Juliana , a caixa de pesquisa é auto limpante ? ( a palavra pesquise desaparece quando você clica)

    ResponderExcluir
  7. Juliana,

    estou a fazer um artigo, sobre um toturial que estou desenvolvendo, queria saber como você põe o código dentro dessas caixinhas escuras... espero que me consiga compreender...

    Manuel Veloso

    um dos seus leitores de portugal e fã dos seus templates ;)

    ResponderExcluir
  8. Juliana,

    estou a fazer um artigo/tutorial sobre um hank para os artigos do blog e queria saber como você põe o código dentro dessas caixinhas pretas bonitinhas que todo mundo adora, espero que me compreenda,

    Manuel Veloso, um dos seus muitos leitores de Portugal e fã dos seus Templates ;)

    ResponderExcluir
  9. Acabei fazendo no meu blog antes de você postar sobre isso. No meu caso aprendi a fazer "na raça". De curioso, mexendo aqui e ali.
    Ficou igual o seu.

    Marco Damaceno

    ResponderExcluir
  10. Olá Juliana
    Gostei do post, tutorial muito bem explicado, parabéns, mas no meu caso não funcionou de início, não existe no meu template a linha
    div id='header-wrapper'.
    Eu utilizo o template Harbor, mas com algumas leves modificações, então fiz vários testes e encontrei que o local para colar o Google adSense é após o seguinte:
    !--No header image --
    div id='header-inner'
    Existe outro local que tem a linha
    div id='header-inner'
    mas lá não funciona, só funcionou neste aí.
    Obs: não pude colocar os sinais <> no texto html pq o blog está entendendo como um código... rsrsrs
    Parabéns novamente e obrigado pelo ensinamento divina mestra.
    Abraços

    ResponderExcluir
  11. Olha que coisa legal para se estudar: http://code.google.com/intl/pt-BR/apis/ajax/

    Da pra incrementar o blog com esses aplicativos do Google. Se tiver tempo da uma olhada, é muito interessante =P

    Ahh. Ótimo tutorial.

    ResponderExcluir
  12. Ah! Que legal! Tava procurando isso.
    Só achei que ficou um pouco estranho no meu Blog, mas tudo bem.






    http://superdiversidades.blogspot.com/

    ResponderExcluir
  13. Achei muito legal está dica, mas tenho uma dúvida, como faz para se fazer um efeito hover em imagens? eu sei que não tem nada a ver com o que você ensinou neste post mas quando estiver disposta poderia ensinar como fazer, se é que você sabe isso. E me desculpe por lhe incomodar neste comentário.

    Obrigado pela atenção.

    ResponderExcluir
  14. Boa dica, na verdade a "senhora" sempre tem boas dicas que estão me ajudando bastante com meu blog http://armacaseira.blogspot.com/ desculpe o merchandising mas é divulgação é a alma da aparição, hehehehe. Obrigado mesmo!!!!

    ResponderExcluir
  15. Juliana...

    tudo correu bem até... a busca ficou limitada, testei a caixa de busca do AdSense que tenho na lateral, mas retorna um erro: falta encerrar com ";", entre tentativas e erros não encontrei onde fechar. Desisti por hora =(
    Mas guardei a dica.

    Valeu.

    ResponderExcluir
  16. Tekila, a caixa do AdSense é auto limpante, a outra não

    Manuel, isso se chama citação ou blockquote e está disponível em todos os meus templates.
    Por favor, leia os Termos de Uso do blog pois seu comentário não é referente a este post.

    Fábio e Marcos, é isso aí, fuçando é que se aprende ;)

    Bruno, dê uma passada no Templates Novo Blogger

    Aierom, você não usa o Mínima? Aqui deu certo.

    ResponderExcluir
  17. ai juliana este bemeu primeiro comenterio no seu blog, quera dar os parabens entrei nesse universo do blog a um mes, e seu tutoriais estao me sendo muitos uteis para entender como fuciona o blogger.
    ainda nao add a barra de busca como esta citata ai nao... mas me interecei bastante...
    na verdade nao tenho nenhuma duvida sobre a isso. reamente so agradecer
    ate
    +

    ResponderExcluir
  18. Muito obrigado, Ju. Tava precisando muito dessa busca, as que estive tentando implementar do Google não funcionaram nem com reza braba.

    ResponderExcluir
  19. Juliana, ter uma caixa de pesquisa num lugar bem acessível é muito bom para o leitor. Muitas vezes é um exercício de paciência entrar em alguns blogs e sofrer para pesquisar algo. Não porque é difícil, mas porque o lugar onde ela fica (muitas vezes no meio das propagandas) é quase inacessível. Obrigado pela dica. Se eu for fazer um template pro meu "bloguenho" colocarei a caixa diferentemente do que tenho feito.

    ResponderExcluir
  20. Juliana,

    sim é o Mínima, minha esperança é que sei que dá certo! Vou perseverando para contornar:
    " The reference to entity "t13n_langs" must end with the ';' delimiter. "

    Esses póbrema entre o tecrado e a cadeira...

    ResponderExcluir
  21. Compartilhando... em duas linhas que aparecida "langs" eu coloquei ";" depois e funcionou! Visualizava perfeito, ao salvar, "langs;" mudou para "form" e a referência a "t1 3n" sumiu. Não aparece "Google Pesquisa personalizada" na caixa auto limpante, mas faz correta a busca! Resolvido.

    Obrigado.

    ResponderExcluir
  22. conseguir olha ae meu blog

    www.crflamengotv.blogspot.com

    ResponderExcluir
  23. Ola a todos! Só passei aqui para dizer duas coisas:

    1ª--> Adoro este blog, Consegui melhorar cada vez mais o meu blog graças a este blog!
    2ª-->Visitem o meu blog: http://vlpt-ruben.blogspot.com

    ResponderExcluir
  24. Nossa! Ótimo!

    Tava há um tempo já querendo jogar a busca pra cima mas não sabia onde. Tá certo que no meu template tive que colar no wrapper e não no header-wrapper, mas não estou mais tão burra nessas coisas pra não deduzir isso rs

    Beijos!

    ResponderExcluir
  25. seu blog ja me ajudou com varias dicas.
    valeu pelas dicas e que seu blog cresa mais.

    ResponderExcluir
  26. No template Diario De Bordo eu fui procurar div id='header-wrapper'

    so que eu cheguei mais perto disso: div id='outer-wrapper'

    porque?

    ResponderExcluir
  27. Juliana,
    Faz algum tempo que estou pensando em fazer um comentário aqui, mas ainda não tinha feito porque é difícil expressar o quanto as suas dicas me ajudaram. Criei meu primeiro blog do nada, não sabia vírgula a respeito. Mas saiu! Está "no ar" há menos de dois meses e já conta com mais de 1000 pageviews (não sei se é pouco ou muito, mas estou felicíssimo)! Então, deixo aqui aquela reverência oriental (Ojiri) para expressar, ao mesmo tempo, agradecimento e profundo respeito pelo teu trabalho.

    ResponderExcluir
  28. Juliana mais uma vez mandou muito bem!! Se não fosse pelas tuas dicas teria só o meu perfil no template do blog...rsrsrsrsrssr....

    Parabéns mais uma vez!!!!

    ResponderExcluir
  29. Facim,facim...rs
    Bom feriadão minha querida!
    bjos!

    ResponderExcluir
  30. Juliana,

    Eu uso um template do dicas blogger (com os devidos créditos no rodapé). Aconteceu que de repente o formulário de comentários sumiu e agora só abre em popup. Aliás, ao clicar no título de um post, some todo o resto (barra lateral, rodapé, etc).

    Juro que não mexi em nada, alias estava viajando e fui alertado por um leitor a respeito.

    Tem alguma idéia do que pode ter havido e que caminho devo seguir para resolver, pois de fato não queria mudar o templete agora.

    Obrigado pelas dicas, que leio diariamente por email.

    Clovis

    ResponderExcluir
  31. Xi, esqueci de indicar o endereço do blog, caso queira dar uma olhada: Cinco Solas

    Obrigado mais uma vez.

    ResponderExcluir
  32. Eu já gostei disso, agora não gosto mais, mas fico feliz de ver que essa dica...=)

    ResponderExcluir
  33. Juliana, comigo funcionou perfeitamente!
    Muito Obrigado! Tava mesmo querendo saber como fazer isto!

    ResponderExcluir
  34. Oiiii, seu blog eh mara, gostei mto, e pesquisei, pesquisei onde fazer isso, só q encontrava outras coisas, e qndo ia fazer, ficava horroroso, a caixa de busca, ficava em cima do cabeçalho, ficava uma porcaria, mas eu qria colocar no menu horizontal superior, mass com uns ajustes no TOP e no LEFT, finalmente eu consegui. VLW MESM.

    ResponderExcluir
  35. É extremamente util essa dica! Mas só poderia funcionar no meu blog se o meu banner tivesse espaço livre à direita, como o seu. Vou ter que alterar os TOP e LEFT para achar um lugar melhor para a caixinha.

    Abraço, visita meu blog Mini Mania F1

    ResponderExcluir
  36. eu já possuo uma caixa de busca do meu template. Como direcionar, quando o visitante clicar em GO (que é o botão), a pesquisa para o google?

    vlw

    ResponderExcluir
  37. Fica muito show...vlw pela dica.

    ResponderExcluir
  38. Mais uma vez, obrigada Juliana! Graças as suas dicas, o blog da Empório Visual está melhorando.
    Caso queira fazer uma visita: http://emporio-visual.blogspot.com/
    Aceito críticas e sugestões. E não vou chorar no ombro da mamãe.

    ResponderExcluir
  39. Essa dica foi fundamental. Depois de trilhões de tentativas, consegui finalmente combinar o modelo da caixa de pesquisa e a posição em que ela ficaria no cabeçalho. Obrigada, Juliana!

    ResponderExcluir
  40. Adorei a dica! Estava procurando isso a muito tempo, pois é uma coisa que todo blog deve ter!

    ResponderExcluir
  41. VCEIS SÃO SIMPLESMENTE PHODASTICOS! virei fã

    ResponderExcluir
  42. Olá, gostei muitooo da dica, fica perfeita a caixa de busca, mas, NAO FUNCIONA!!! O que pode estar mal??? Obrigado, John.

    ResponderExcluir
  43. John. Você deve ter mudado o URL do Blog ja depois de ele criado. Neste caso você tem que ir nas ferramentas de WEBMASTERS do GOOGLE, para atualizar a sua URL, e assim pode aparacer suas postagens nas pesquisas. O mesmo aconteceu comingo.

    ResponderExcluir
  44. JS, funcionou muito bem. De principio eu estava com dificuldades, mas aí vão 2 dicas.
    Se não encontrar a linha:

    <div id='header-wrapper'>

    Procure por:
    <div id='header-inner'>

    Se ao colocar o código do ad sense seu blogger dar a seguinte mensagem ao compilar o xml:

    Mensagem de erro em XML: The element type "DIV" must be terminated by the matching end-tag "

    Basta retirar a div do meio do código e deixar apenas a tag <div id="busca">

    ResponderExcluir
  45. Valeu por essa dica, Ju. Há tempos queria fazer algo assim e não sabia como. Pensei em dividir cabeçalho, retirá-lo e fazer tabela... bom, entenda que tentei de tudo e nada ficava legal. Faltou apenas pesquisar no lugar que tem todas as respostas, né? Valeu mesmo. Logo coloco no ar o novo template.

    P.s.: que culpa tenho eu se gosto d emexer com meus templates...rs.

    ResponderExcluir
  46. Parabéns muito bom...bom trabalho...abraço

    ResponderExcluir
  47. Ainda não consegui, mas vou seguir tentando.
    ;D

    ResponderExcluir
  48. era isso q eu tanto queria!!! dicaça! muito obrigada!!!

    ResponderExcluir
  49. Aqui não funcionou. Tem outro método?
    Obrigado.

    ResponderExcluir
  50. @Kяαтσร
    Seu blog não ta no mecanismo de busca para bog(http://blogsearch.google.com/). Solução no Forum de Ajuda do Google - http://www.google.com/support/forum/p/blogger/thread?tid=2fd41550198d001a&hl=pt-BR

    Dica:
    Como da para perceber quando você aumenta ou diminui o zoom do navegador a caixa fica se movimentando, para resolver isso Gente usa "position: relative;" no luga de position: absolute;

    ResponderExcluir
 
Dicas Blogger© 2007-2015 | Todos os direitos reservados | Design By Duy Templates
Top