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;
}
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,'Pesquisar')' onclick='clickclear(this, 'Pesquisar')' 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>
Ajuste a posição da caixa de busca, alterando os valores top e left do 1° código.
Vá visualizando o template até ficar legal e só depois clique em salvar modelo.
54 Comments
Legal, queria mesmo aprender a fazer isto!
ResponderExcluirGostei! E viva a gambiarra no Blogger! \o/
ResponderExcluirO que é uma caixa de busca do AdSense? Tem algum exemplo online pra ver?
ResponderExcluirTenho sim, Pedro. Olhe no alto desta página e você encontrará uma caixa de busca do AdSense.
ResponderExcluirFica no cabeçalho, a sua direita, em cima de "ANO lll"
Legal, tava querendo fazer isso a um tempinho já, hj implementei.
ResponderExcluirJuliana , a caixa de pesquisa é auto limpante ? ( a palavra pesquise desaparece quando você clica)
ResponderExcluirJuliana,
ResponderExcluirestou 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 ;)
Juliana,
ResponderExcluirestou 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 ;)
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.
ResponderExcluirFicou igual o seu.
Marco Damaceno
Olá Juliana
ResponderExcluirGostei 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
Olha que coisa legal para se estudar: http://code.google.com/intl/pt-BR/apis/ajax/
ResponderExcluirDa pra incrementar o blog com esses aplicativos do Google. Se tiver tempo da uma olhada, é muito interessante =P
Ahh. Ótimo tutorial.
Ah! Que legal! Tava procurando isso.
ResponderExcluirSó achei que ficou um pouco estranho no meu Blog, mas tudo bem.
http://superdiversidades.blogspot.com/
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.
ResponderExcluirObrigado pela atenção.
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!!!!
ResponderExcluirJuliana...
ResponderExcluirtudo 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.
Tekila, a caixa do AdSense é auto limpante, a outra não
ResponderExcluirManuel, 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.
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.
ResponderExcluirainda 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
+
Muito obrigado, Ju. Tava precisando muito dessa busca, as que estive tentando implementar do Google não funcionaram nem com reza braba.
ResponderExcluirJuliana, 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.
ResponderExcluirJuliana,
ResponderExcluirsim é 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...
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.
ResponderExcluirObrigado.
conseguir olha ae meu blog
ResponderExcluirwww.crflamengotv.blogspot.com
Ola a todos! Só passei aqui para dizer duas coisas:
ResponderExcluir1ª--> 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
Nossa! Ótimo!
ResponderExcluirTava 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!
seu blog ja me ajudou com varias dicas.
ResponderExcluirvaleu pelas dicas e que seu blog cresa mais.
No template Diario De Bordo eu fui procurar div id='header-wrapper'
ResponderExcluirso que eu cheguei mais perto disso: div id='outer-wrapper'
porque?
Juliana,
ResponderExcluirFaz 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.
Juliana mais uma vez mandou muito bem!! Se não fosse pelas tuas dicas teria só o meu perfil no template do blog...rsrsrsrsrssr....
ResponderExcluirParabéns mais uma vez!!!!
Facim,facim...rs
ResponderExcluirBom feriadão minha querida!
bjos!
Juliana,
ResponderExcluirEu 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
Xi, esqueci de indicar o endereço do blog, caso queira dar uma olhada: Cinco Solas
ResponderExcluirObrigado mais uma vez.
Eu já gostei disso, agora não gosto mais, mas fico feliz de ver que essa dica...=)
ResponderExcluirJuliana, comigo funcionou perfeitamente!
ResponderExcluirMuito Obrigado! Tava mesmo querendo saber como fazer isto!
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É 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.
ResponderExcluirAbraço, visita meu blog Mini Mania F1
Esplendoso!
ResponderExcluirlegal, legal
ResponderExcluir=D
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?
ResponderExcluirvlw
Muito obrigada!
ResponderExcluirFica muito show...vlw pela dica.
ResponderExcluirMais uma vez, obrigada Juliana! Graças as suas dicas, o blog da Empório Visual está melhorando.
ResponderExcluirCaso 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.
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!
ResponderExcluirAdorei a dica! Estava procurando isso a muito tempo, pois é uma coisa que todo blog deve ter!
ResponderExcluirVCEIS SÃO SIMPLESMENTE PHODASTICOS! virei fã
ResponderExcluirOlá, gostei muitooo da dica, fica perfeita a caixa de busca, mas, NAO FUNCIONA!!! O que pode estar mal??? Obrigado, John.
ResponderExcluirJohn. 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.
ResponderExcluirJS, funcionou muito bem. De principio eu estava com dificuldades, mas aí vão 2 dicas.
ResponderExcluirSe 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">
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.
ResponderExcluirP.s.: que culpa tenho eu se gosto d emexer com meus templates...rs.
Parabéns muito bom...bom trabalho...abraço
ResponderExcluirAdore cara ja vo por nos meus 3 blogs
ResponderExcluir=]
Ainda não consegui, mas vou seguir tentando.
ResponderExcluir;D
era isso q eu tanto queria!!! dicaça! muito obrigada!!!
ResponderExcluirAqui não funcionou. Tem outro método?
ResponderExcluirObrigado.
@Kяαтσร
ResponderExcluirSeu 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;