Caixa de Pesquisa visível apenas ao clicar

A navegação dentro de um blog é fundamental para o leitor, conseguir achar as postagens que precisa é fundamental e deve ser uma tarefa fácil. Uma caixa de pesquisa sempre será um forte aliado durante a busca.

Muitas vezes, a caixa de pesquisa acaba sendo algo grande e que ocupa um grande espaço, mas fazê-la ser flexível é algo possível. Observe o exemplo abaixo:


Aprenda a como fazê-la neste tutorial!

1 Vá em Tema > Editar HTML > Clique na caixa de códigos > Aperte Ctrl + F ou F3 > Procure por ]]></b:skin> > Acima cole:

2 Faça as alterações e salve.

3 Vá até a parte do blog que deseja colocar a caixa de pesquisa e adicione o seguinte código:

4 Não é necessário realizar nenhuma alteração.

5 Salve.
Compartilhe no Facebook
Compartilhe no Twitter
Compartilhe no Google+

2 comentários, comente também!

  1. Hey, Alan!
    Estou tentando utilizar a caixa de pesquisa em um menu fixo, parecido com o seu, entretanto ele é centralizado e tem drop-down; o problema é que não estou conseguindo fazer a caixa de pesquisa ficar no lado direito após o último link. No início pensei que era somente o tamanho e o padding do menu, aí tentei ajeitar, porém não tinha arrumado. Tentei ajeitar o tamanho da caixa de pesquisa, mudei para 100px, porém - apesar de ter ficado no lugar que eu quero - ao ser ativa (para digitar a pesquisa) ela volta a ficar embaixo e "flutuando" fora da linha do menu.
    Como ajeitar isso?
    Att,
    Milena.
    E-mail: agamaqueen@gmail.com

    ResponderExcluir
  2. adoreeeei, me ajudou demaisss!
    descobri esse blog há pouco tempo e já está me ajudando muiiito!
    obrigadaaa ♥

    beijão,
    https://floresnoluar.blogspot.com.br/

    ResponderExcluir

• Peça tutoriais em 'Contato'
• Comente com o link do seu blog para que eu posso visita-lo
• Você pode usar as Tags negrito, itálico, links...

Créditos



O Projeto Aurora foi criado completamente, com tutoriais disponíveis no blog, por mim, Alan Felipe Jantz.

Para as postagens 'reblogadas', os créditos do local de origem dos tutoriais está no final da postagem.

Todos os ícones utilizados neste template foram pegos no flaticon.com, todos os direitos reservados para os autores dos mesmos.





Algo que é seu está aqui, mas não foi creditado?
Entre em contato clicando na aba 'Contato' do menu para receber seus créditos!
BouquetNOVO
The Only ExceptionNOVO
Wide AwakeNOVO
Simple BaseNOVO
NatureNOVO
Why so Pink?NOVO
Why So Blue?NOVO