Menu com efeito de transição para blog

em 24 de maio de 2016

Menu para blog: por mais que eu publique opções sempre aparece alguém que quer mais um... nunca é demais, né?
Veja aqui os que já foram publicados no blog:

Menus de navegação para blog, vários tipos


Hoje vamos aprender este, azul, que está no blog de Códigos:


Demonstração do tutorial



É claro que você vai poder mudar a cor, o nome das abas e os links do menu.
Ele é totalmente personalizável e bem fácil de instalar.
Vamos aprender?
Antes de mais nada vou dar as dicas básicas para que você consiga sem erros:

1- Eu testo todos os menus em templates nativos do Blogger, modificados ou não. Então, se for tentar em um template baixado da internet não garanto que dará certo, ok?

2- O melhor lugar para instalar esse menu é abaixo do cabeçalho. Para destravar essa área, caso esteja bloqueada em seu layout faça assim: acesse a aba Modelo de seu blog, clique em Editar HTML e dentro da caixa de código tecle Ctrl+F. Na barra de busca digite Cabeçalho e tecle Enter.
Aparecerá um código mais ou menos assim:

<b:section class='header' id='header' maxwidgets='1' name='Header' showaddelement='no'>
        <b:widget id='Header1' locked='true' title='Tsu (Cabeçalho)' type='Header' visible='true'>
          <b:includable id='main'>

Troque a primeira ocorrência da palavra true por false, o número 1 por 4 ou mais e "no" por "yes".
Salve.
Isso vai desbloquear a área abaixo do seu cabeçalho.

3- Edite as cores e links do menu de acordo com sua preferência. Ele vai centralizar onde você o colocar.

4- O efeito legal de transição não funciona no Explorer.

5- Cores são mudadas ao trocar o código hexadecimal precedido do sinal #.  A fonte é verdana; para alterar mude para qual desejar.



Dadas as dicas, copie este código:


Copiar o código


Agora vá ao painel de seu blog, clique na aba Layout e a seguir clique em Adicionar um gadget.
Dentre as opções escolha HTML/JAVASCRIPT e na caixa que expandir cole o código copiado.
Faça as alterações que desejar nas cores e nomes das abas, insira os links para onde deseja que o leitor seja direcionado ao clicar e salve.
Arraste para onde deseja que fique e salve as alterações do Layout.

Mole, mole, né?
E o melhor é que ele não causa conflito caso você tenha um menu fixo, por exemplo. Dá pra tê-lo pois ele usa basicamente CSS e nadinha de javascript. E isso deixa o menu bem mais leve, aliás.
Enjoy!





Alguém que escreve. Especialista em si mesma. Leitora que lê muito menos do que gostaria. Blogueira por paixão e profissão. Propriedade da Princesa e da Menininha, e de um cachorrinho muito levado chamado Bloguinho. Tentando viver. Sempre.

4 comentários , comente também!

  1. Oi, Elaine!!

    Nossa, cheguei junto com o post. Lindo esse menu... Estou andando muito por aqui, essa madrugada consegui uma base de layout responsivo e to penando um pouquinho pra personalizar. Sei lá, queria voltar a vender, ou fazer um pra testar e disponibilizar... Mas, essa onda minimalista tá acabando comigo, eu sofro, gosto de firulas...

    Adoro efeitos como desses menus, e agora tenho que me segurar :)

    Beijosssss

    ResponderExcluir
  2. Show de bola, você sempre arrasa nos seus tutoriais, não é a toa que usei vários seu...estou na onde de alterar o layout e deixá-lo um pouco mais maduro.
    Beijos adoro você!

    Cá Entre Nós

    ResponderExcluir
  3. Por favor Elaine, ensina a fazer igual esse seu preto, que aparece quando rola a barra para baixo e ele aparece, por favorzinhooooooooooooooo....beijos! Meu blog fiz todo com suas dicas http://www.erikamarinho.com.br/

    ResponderExcluir

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…