13 de outubro de 2012

17

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



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.
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.

Lembrando: dependendo da altura e largura do topo do seu template é preciso que você ajuste a localização da caixa de busca:
top: 50px; 
left: 660px;

17 comentários:

  1. Adorei essa dica.
    Dá uma olhadinha no que fiz. Espero que não te desagrade.

    veja: detudoumpoucotracomais.blogspot.com.br/2012/10/caixa-de-busca-ao-lado-do-cabecalho-do.html

    ResponderExcluir
    Respostas
    1. olá Leni Beatiz!!
      agradeç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 ;)

      Excluir
    2. pk não estou acachando a tag ??

      Excluir
  2. Cara só tenho uma palavra. Obrigado, valeu mesmo pela dica.

    ResponderExcluir
  3. Cara só uma duvida. Como eu faço para deixa-lo fixo. Tipo quando eu dou um zoom ou minimizo no navegador ele mudar de lugar. Existe alguma possibilidade de ajusta-lo de acordo com o navegador que o usuários esta usando. Fico no aguardo.

    ResponderExcluir
  4. Muito bacana o seu tutorial Kelven.
    Só gostaria de saber como deixar essa caixa de busca com uma largura maior e também com uma altura.

    ResponderExcluir
  5. Opa! Perfeito! Deu super certo! Obrigado!

    ResponderExcluir
  6. Respostas
    1. não consegue achar o que digita da caixa!!

      Excluir
  7. E n e necessário isso tudo basta vc abrir
    Modelo>Personalizar>avançado> Adiciodar Css>Colocar Codigo Java Scrip.

    ResponderExcluir
  8. Show de bola cara... seus tutoriais não são 10...!

    são 1000!!!

    ResponderExcluir
  9. Muito bom. olha o resultado ai. www.controleabsoluto.com.br. Obrigado.

    ResponderExcluir
  10. Por que o meu não dá certo, fica acima do cabeçalho, assim como ficou o banner, alguém pode dá uma luz!!!!

    ResponderExcluir
  11. Não encontro esses códigos no meu HTML.

    ResponderExcluir
  12. Obrigada por mais essa dica, adorei!
    Abraços!

    ResponderExcluir
  13. Funcionou super bem. Valeu pela dica.
    Sucesso!

    ResponderExcluir

Observe:
Faça seu comentário dentro do assunto tratado na postagem.
Não pode divulgar endereço de Sites ou Blog.
Comentário que conterem divulgação serão moderados, somente serão aceitos links caso necessite de informar alguma fonte.


Copyright © - Todos os Direitos Reservados: Várias Dicas para Blogs |
Design by Kelven Pedro | Tecnologia do Blogger - É Proibido a copia do conteúdo deste blog sem autorização
    Twitter Facebook