Menu responsivo com caixa de pesquisa para usar no blog - Elaine Gaspareto- Dicas para blogs e inspirações para a vida

Menu responsivo com caixa de pesquisa para usar no blog

Publicado em 17/07/2018

Tempo de leitura:

Menu responsivo com caixa de pesquisa para usar no blog
E sim, vamos aprender mais um menu! Além dos vários que tem aqui no blog (veja aqui todos os menus que já ensinei) sempre acho que precisa de mais, e que vale a pena testar, editar, testar de novo e postar quando está redondinho!
O que vamos aprender hoje tem caixa de busca integrada, possui submenus, pode ser editado facilmente, fica fixo no topo após rolar a página e o melhor: é responsivo!
Depois de pronto ficará assim:


Demonstração do tutorial


Configurei de um jeito que você consegue realizar as edições no CSS (que é a parte do código que comanda coisas como cor de fundo, fontes, etc) direto no painel do Blogger, sem precisar entrar no código fonte pra editar. Apenas para instalar precisa acessar o código fonte, mas é mega tranquilo.
Depois de instalado só precisa editar com seus links e tá feito!
Vamos aprender?

Como configurar e instalar o menu responsivo com caixa de busca no blog


Comece acessando a página com os códigos necessários ao tutorial:


Copiar o código


A seguir vá ao painel do blog onde vai instalar o menu (teste sempre em um blog de testes, ok?) e clique na aba Tema.
Escolha HTML/JAVASCRIPT e dentro do código fonte tecle Ctrl+F.
Na barra de busca digite ]]></b:skin> e tecle Enter para localizar.
Acima de ]]></b:skin> cole o CÓDIGO CSS
Salve.
Não se preocupe, depois você pode alterar a aparência do seu menu direto pela aba Personalizar do painel.

Agora vamos instalar o menu: na barra de busca digite <body expr:class='&quot;loading&quot; + data:blog.mobileClass'> e localize.
Abaixo disso cole o CÓDIGO HTML e salve.
Seu menu já estará aparecendo no blog.
Chegou a hora de editar as abas e sub abas.


Passo a passo de como editar as abas e sub abas de um menu


Já expliquei algumas vezes aqui no blog como fazer isso, mas sempre tem gente que se perde ou se equivoca, então vamos de novo?

Via de regra os menus de navegação horizontais como os que eu ensino aqui no blog possuem a mesma forma de serem editados.
A aba simples é assim:

<li><a href='#'>NOME DA ABA</a></li>

E a aba com submenu é assim:

<li><a>Aba com submenu</a>
  <ul class='menus'>
   <li><a href='LINK AQUI'>Sub aba 1</a></li>
   <li><a href='LINK AQUI'>Sub aba 2</a></li>
   <li><a href='LINK AQUI'>Sub aba 3</a></li>
   <li><a href='LINK AQUI'>Sub aba 4</a></li>
   <li><a href='LINK AQUI'>Sub aba 5</a></li>
  </ul>
</li>

Se quiser acrescentar mais abas simples repita o código <li><a href='#'>ABA</a></li>
Se quiser acrescentar mais abas com sub abas repita o 2º código.

Para que as abas funcionem é bem simples:
Onde marquei LINK AQUI você coloca o link para onde a aba direcionará ao ser clicada.
Pode ser o link para uma página estática exemplo de página estática);
Pode ser o link para um marcador/categoria/tag do blog (exemplo de marcador/categoria/tag);
Pode ser link para alguma rede social, algum outro blog ou site, etc...

Onde marquei NOME DA ABA você coloca o nome que quer que a aba tenha.
Onde marquei NOME DA SUB ABA você coloca o nome que deseja, algo que identifique o que o menu vai entregar.

Para ficar mais claro veja como eu editei uma aba de exemploo código do meu blog de testes:

<li><a>Categorias</a>
  <ul class='menus'>
   <li><a href='https://novoteste-10.blogspot.com/search/label/Beleza'>Beleza</a></li>
   <li><a href='https://novoteste-10.blogspot.com/search/label/Decora%C3%A7%C3%A3o'>Decoração</a></li>
   <li><a href='https://novoteste-10.blogspot.com/search/label/Receitas'>Receitas</a></li>
   <li><a href='https://novoteste-10.blogspot.com/search/label/Moda'>Moda</a></li>
  </ul>
</li>

Entendeu o que eu fiz?
Eu copiei o endereço url de alguns marcadores e coloquei no lugar de LINK AQUI e o nome do marcador/categoria eu coloquei no lugar de Sub aba 1, Sub aba 2 e assim por diante.

Se eu quisesse colocar uma página estática eu copiaria o endereço url dessa página (Contato, por exemplo) e colocaria no campo indicado.
E assim fazemos com todas as abas.
Não é nada complicado, basta pensar com lógica e dará certo, afinal tudo é lógico nesse menu.


Dicas extras adicionais


  1.  Eu usei em meu blog de testes um modelo Simples que tem a área útil abaixo do cabeçalho ocupando a largura total da página. Se usar outros modelos o menu não assumirá a largura total da página mas sim a largura útil total da área onde estiver inserido. Espetacular e 2 modelos do tema Simples possuem a área útil da largura total da página.
  2. Caso queira que o menu fique fixo no topo desde sempre e não apenas ao rolar a página como está em meu blog de testes basta colar o CÓDIGO HTML abaixo de <body expr:class='&quot;loading&quot; + data:blog.mobileClass'> ao invés de colar abaixo de </header> como explico no tutorial. Deixei explicado na página de códigos.
  3. No caso de não querer o menu fixo apenas ao rolar não use o CÓDIGO JAVASCRIPT.
  4. Não funciona nos modelos do Blogger Soho, Contempo, Notável e Empório, e nem nos modelos Visualizações Dinâmicas.
  5. Se houver em seu blog algum elemento de página que use a biblioteca Jquery pra funcionar (tipo alguns slides) pode haver conflito; teste antes, ok?
  6. Caso seu template não seja responsivo mas apenas adaptado para a versão mobile ainda assim você pode mostrar esse menu no celular. Siga esse passo a passo:


Tutorial longo e completo, né?
Mas se tiver alguma dúvida que não esteja contemplada no texto ou no código explicado diga nos comentários e eu respondo assim que possível.
Enjoy!





4 comentários via Blogger
comentários via Facebook

4 comentários:

  1. Oi Elaine, eu gostei muito do menu, mas queria que ele aparecesse somente na versao mobile, tem algum código que complemente este para que o menu fique oculto na versao desktop ?
    Me ajude por favor <3 desde ja eu agradeço ...

    ResponderExcluir
    Respostas
    1. Jane, tem um post aqui no blog que ensina sobre as condicionais do Blogger, creio que algo lá pode ajudar.
      Pesquise ali na barra de pesquisa por Condicionais do Blogger :)
      bjsss

      Excluir
  2. Oi Elaine, amei demais o menu, só que tem um porém: ele deu aquele conflito no slider. Tem como concertar? Desde já muito obrigada.

    ResponderExcluir
    Respostas
    1. Infelizmente não, se o template tiver muitos scripts pode conflitar mesmo e aí é questão de optar :(

      Excluir

Olá! Muito obrigada por ler meu blog e obrigada também por se dispor a comentar meus posts. Seja muito bem-vindo(a)!

Importante!
Devido à falta de tempo hábil eu não me comprometo a responder perguntas referentes aos tutoriais postados neste blog.
Pedidos de ajuda individual serão respondidos conforme o meu tempo e disponibilidade permitirem.
Por favor, entenda: comentários sem relação alguma com o post não serão liberados e nem respondidos.

Para saber mais sobre a melhor forma de utilizar este blog leia Termos de uso do blog.



Muito obrigada, fique à vontade para interagir.
Mas lembre-se:
Gentileza, educação e boas maneiras servem também para a vida nos blogs…