Menu responsivo com abertura lateral em celulares - Elaine Gaspareto- Dicas para blogs e inspirações para a vida

Menu responsivo com abertura lateral em celulares

Publicado em 11/02/2019

Menu responsivo com abertura lateral em celulares
Vou ensinar hoje como configurar e instalar um menu especial, responsivo e que apresenta uma moderna forma de expansão na versão mobile. É o mesmo menu que instalei no Tema Make up, que disponibilizei aqui no blog. Recorde (e baixe gratuitamente!):
Tema editável grátis para Blogger- baixe e use o Tema Make up!
Viu que menu legal? Ele abre-se lateralmente na versão mobile. Abra em seu celular pra ver como fica legal!

Quer aprender como faz? Vem comigo que é muito, muito simples!
E, claro, esse menu pode ser inserido em qualquer template nativo do Blogger (menos os de Visualizações dinâmicas e os novos responsivos tipo Soho, Notável, etc) mas fica melhor em templates responsivos, ok?
Não testei em nenhum tema baixado da internet pois não gosto. Mas se quiser tentar vá em frente.
E a dica principal é: teste antes em um blog de testes. Assim você ganha familiaridade com o menu e fica com mais segurança na hora de instalar em seu blog real.

Menu responsivo com abertura lateral em celulares- como instalar no blog


Para começar vá ao painel do blog de testes e clique na aba Tema.
A seguir clique em Editar HTML e dentro da caixa do código fonte tecle Ctrl+F.
Na barra de busca que expandir digite ]]></b:skin> e tecle Enter para localizar.
Acima de ]]></b:skin> cole o CÓDIGO CSS do menu.
Salve.

Agora, na barra de busca digite <body expr:class='&quot;loading&quot; + data:blog.mobileClass'> e tecle Enter para localizar.
Abaixo dessa tag cole o CÓDIGO HTML.
Salve.
Seu menu já está aparecendo.
Ah, claro, os códigos:

Copiar o código


Para visualizar a forma como ele ficará ao ser acessado via celular copie o endereço de seu blog de testes e cheque a responsividade dele aqui ou, claro, abra-o no celular.

Agora é só editar o menu, corrigir cores e fontes conforme deixei marcado no próprio código, inserir os seus links e nome de cada casa do menu e salvar.
Ah, não esqueça dos links de suas redes sociais, ok?
Se precisar ajustar algo mais está tudo marcado no CÓDIGO CSS, ok? Ele te dirá o básico da edição.

E tá feito. Simples e bem rápido, além de muito fofo, né?
Aproveite, espero que seja útil!





6 comentários

  1. Bom dia Amiga sei que seu tempo é curto, se não puder responder entenderei, teria uma maneira para vc que é incrivelmente inteligente e tem centenas de coisas legais para melhorar um blog, criar algo para que no blogger não precisasse carregar a cada 200 comentários e seguisse adiante normalmente, esse carregamento é ruim para muita gente.

    ResponderExcluir
    Respostas
    1. Eduardo, creio que isso não seja possível.
      Anos atrás, quando o Blogger lançou o sistema de Thread até tentei mas não deu certo.
      E como é raro um post com mais de 200 comentários achei que não valia a pena.
      Mas conheço um jeito de inverter a ordem dos comentários, colocando os mais recentes no começo da Thread, ao invés dos mais antigos como é padrão.
      Vou ajustar o código e assim que der eu publico.
      Não é o que vc quer mas ao menos colocamos os comentários mais recentes para aparecerem primeiro, antes dos mais antigos...

      Excluir
  2. Olá, Elaine. Gostei muito do tutorial, bem explicado e fácil de fazer. Gostaria que você, se puder, porque tenho certeza que é muito ocupada, explicasse como criar um menu responsivo do lado esquerdo, com logo no centro e a caixa de pesquisa do lado direito, como o site do g1 (https://g1.globo.com/). No caso ficaria o menu do lado esquerdo, o logo no centro e a caixa de pesquisa do lado direito. Será que é muito complicado de fazer? Procurei nas varias opções de menus que você disponibiliza nos tutoriais, mas não encontrei, talvez a mais próxima foi a do menu com caixa de pesquisa (https://www.elainegaspareto.com/2018/07/menu-responsivo-com-caixa-de-pesquisa.html), tentei modificar alguma coisa, porém não consegui, pois entendo pouco de html, css e muito menos ainda de javascript. Não sei esse tipo de pergunta tem haver com a postagem, mas não sabia se perguntava individualmente, por isso me desculpe se fiz a pergunta no lugar errado.

    ResponderExcluir
    Respostas
    1. Olha, complicado não é, mas eu nunca tentei.
      Em tese dá pra fazer, mas preciso me debruçar nuns códigos e ver se funciona.
      Se resultar eu faço o tutorial, mas não prometo, tá?
      #oremos rsrsrsrs

      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.
Deixe sua pergunta ou solicitação sempre nos comentários, eu infelizmente não tenho como responder pedidos de ajuda por email.
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…