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

Tempo de leitura:

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!





2 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

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…