Menu responsivo para blog (Drop-down) | Quero Dicas Quero Dicas : Menu responsivo para blog (Drop-down)

Quero Dicas : Menu responsivo para blog (Drop-down)

Menu responsivo para blog (Drop-down)

| |

menu drop-down responsivo para blogger

Nada melhor que adicionar um menu responsivo em nosso template. Afinal, ele se adapta de forma organizada a qualquer dispositivo móvel (notebook, tablet, Smartphone, etc). Sem esquecer de falar que a plataforma Blogger disponibilizou 5 novos modelos responsivos.

Mas apesar do Blogger conceder esses 5 novos modelos, ele tem a mesma função padrão dos antigos modelos. Não dá para criar um menu drop-down diretamente nele. Por isso, se faz necessário recorremos a um menu responsivo externo. Afinal, pra quê um template responsivo com um menu não responsivo, não é mesmo?

Se você é uma das inúmeras pessoas que estão trocando os antigos modelo por esses novos modelos responsivos ou até mesmo começando a criar um e não quer utilizar o menu padrão do Blogger, hoje eu trouxe este menu responsivo drop-down para você.

Este menu foi criado e distribuído pelo site Prodeveloper, infelizmente, já fechado. Este mesmo menu eu mesmo utilizo aqui no Quero Dicas, claro, fiz algumas alterações. mais a função é a mesma.

 Veja na imagem
Imagem original prodeveloper.com.br

Assim como a imagem é original do site, o menu responsivo também será original. Por isso, você deverá seguir os passos e personalizar ao seu gosto, ok? Vamos lá:

Tutorial

Importante!
1. Antes, é preferível que remova todos menus existentes no seu blog.
2. Se você está utilizando os modelos antigos, para que esse menu apareça em dispositivos móveis será necessário que você desabilite a versão móvel básica de seu seu template, para isso siga:

• Vá em "Modelo" e na opção "Celular" clique na engrenagem (configuração).
• Em seguida, marque a opção " Não. Mostrar modelo para celular em aparelhos celulares."
• Depois clique em "Salvar".

Adicionando Menu Responsivo no Blog
Sempre recomendo: Faça um backup do seu template ao instalar qualquer tipo de implementação de códigos dentro do HTML do seu blog e claro, dê preferências a um blog de teste! Não saiba fazer Backup? Não tem problema, acesse: Como fazer um Backup ou restauração do seu blog.

Para começarmos precisamos de alguns códigos. Clique no botão abaixo para acessá-los:


Agora...
1. Acesse seu Blogger,
2. Vá em "Modelo" e depois "Editar HTML"

3. Procure pelas linhas do 1º código ou similares a elas. Normalmente elas ficam bem no início do HTML.

4. Substitua o trecho encontrado pelo 2º código
Caso já tenha esses códigos em seu template, não precisa substituir. Basta prosseguir.

5. Agora, pressione "CTRL+F" e pesquise por ]]></b:skin>


6. Logo ACIMA da tag encontrada, cole o 3º código

7. Agora pesquise agora por <body> ou <body expr:class='&quot;loading&quot; + data:blog.mobileClass'>


8. Logo ABAIXO do trecho encontrado, cole o 4º código

Observação:
Você também poderá adicionar o 4º código logo abaixo do cabeçalho. Para isso, basta procurar por "cabeçalho" e logo abaixo do fechamento (</b:section>) antes de </div> , cole o código do menu.

9. Clique em "Visualizar", não encontrando nenhum erro clique em "Salvar Modelo".

Personalizando o menu

No 3º código você poderá personalizar seu menu como desejar. Para facilitar, deixei ao lado escrito onde e o que personalizar. Não mexa em outros locais caso não saiba o que esteja fazendo. Caso insista é por sua conta e risco!

No 4º código você deverá personalizar:

• Destacado em AMARELO itens do menu, altere como desejar.
• Destacado em AZUL substitua pelos links referentes a cada item.
• Destacado em VERMELHO substitua pelos nomes das sub-categorias.
• Destacado em ROSA substitua pelo nome destaque quando estiver responsivo

► Precisa de ajuda para linkar seu menu? Acesse: Como colocar marcadores no menu do Blog

Depois de tudo pronto. Clique em "Visualizar" e se tudo estiver ao seu gosto clique em "Salvar Modelo".

Gostou do Menu responsivo para blog? Comente!
Beijinhos



Compartilhe

* Você reservou um tempinho para comentar? *

Desde já agradeço!

Devido a falta de tempo, não prometo responder a todos os comentários. Mas farei o possível!


3 comentários:

  1. Este comentário foi removido pelo autor.

    ResponderExcluir
    Respostas
    1. Olá Érica.
      Esse menu é esse da postagem, só que personalizado.
      Beijinhos ♥

      Excluir
    2. Este comentário foi removido pelo autor.

      Excluir

Amigos do Blog

agenda dos blogs Universo das Dicas

Ganhe Visitantes | Inscreva-se!

GeraLinks Atoananet Linkirado
subir