Eu já havia visto essa caixinha no cabeçalho de vários blogs mas não tinha idéia que era possível colocar nos templates simples. Fique entusiasmada quando encontrei o variasdicasparablogs.blogspot.com.br , que disponibiliza um código bem simples e fácil para colocar no HTML do Blog.
Kelven Pedro ensina assim:
Pra colocar a caixa de busca vamos precisar acrescentar alguns códigos no HTM do Blog.
Primeiro vá no painel de edição do seu blog, depois vá em Modelo >>> em Editar HTML >> e em Prosseguir.
Agora você vai usar as teclas de pesquisa Ctrl + F para lhe ajudar a procurar esse Tag no HTML
]]></b:skin>
Quando localizar o Tag, Antes dele você vai acrescentar esse código CSS:
/* ----- Busca ----- */
#busca{
width:auto;
height:auto;
z-index:1;
position: absolute;
top: 50px;
left: 660px;
}
width:auto;
height:auto;
z-index:1;
position: absolute;
top: 50px;
left: 660px;
}
E agora procure esse outro segundo Tag:
</header>
A baixo dele acrescente esse código:
<div id='busca'><form action='/search' id='searchform' method='get' style='display:inline;'><input id='search-box' name='q' type='text'/><input id='search-btn' type='submit' value='Buscar'/></form></div>
Prontinho, agora é só clicar em Visualizar e vê se você fez tudo certo, e Salve.
Ajuste a localização da Caixa de busca
No primeiro código, a parte que eu destaquei em Vermelho: 50px é a distancia em que ficará a caixa de busca no topo.
E a parte que está destacado em cor azul 660px é para deslocar a caixa de busca para esquerda ou para direita.
_________________________
Se ao visualizar aparecer erro, clique em limpar edições e tente novamente.
Como a minha caixinha ficou em cima do rosto da imagem do cabeçalho, eu fui trocando as medidas até chegar a esta:
top: 40px;
left: 710px;
}
left: 710px;
}
Então, coloque o código e visualize, se não ficou na posição que você quer, vá alterando.
left: 710px; Quanto maior esse número, mais para a direita.
Alterei as medidas para
top: 30px;
left: 420px;
}
Entre nesta página para você observar a imagem do corpo do novo Blogger
Abaixo vou colocar o código do banner do blog para você colar em um gadget. Quando quiser fazer suas pesquisas é só clicar nele.
<a href="http://variasdicasparablogs.blogspot.com/?utm_source=gadget&utm_medium=codigo&utm_campaign=frases" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbWuTr67PNY6F3DLii1MUoX8w2n7mgPmreUbZAsa6LFWKy_PCzF6_-Hxs4g0_kNewhMMfnkKE0vqC6XyC11HSIGek5waXGkMcR77m1L96cByhHI4VTNKw4uOg4M0951df4k_gsgN8uKeY/s1600/hgjhgjgj.gif" border="0" /></a>
olá Leni Beatiz!!
ResponderExcluiragradeço por te lhe ajudado, pois colocar uma caixa de busca no topo do blog é uma coisas que muitos procuram e poucos sabem, mas eu estou tirando essa duvida... Valeu ;)
http://variasdicasparablogs.blogspot.com.br
Muito boa essa tua ajuda. Eu não entendo de HTML e estou conseguindo colocar alguns códigos. Acredito que você já tenha notado a minha ignorância no assunto. Estou fazendo esse blog para ser o meu arquivo. Aqui vou colocar os códigos que acertei e também os que não deram certo no meu blog. Ele é feito para pessoas como eu, que não sabem nada, e a ajuda de vocês é muito importante.
ExcluirMais uma vez, obrigada.
Bom trabalho para você!