Inscrever-se para atualizações grátis!

Inserir Caixa de Busca ao lado do cabeçalho do blog

Caixa de busca no cabeçalho

Vocês já devem ter visto que alguns blogs possui uma caixa de busca no topo, ao lado do cabeçalho do blog. Então hoje irei ensinar a colocar uma caixa de busca no topo do blog.

Exemplo:


Teste a pesquisa no site/blog
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;
}

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.


Compartilhar esta postagem!!
SOCIALIZE →
COMPARTILHE →
Powered By: BloggerYard.Com

0 comentários:

Postar um comentário

Comete aqui o que achou das postagens.