Menu horizontal abaixo do cabeçalho, que fica fixo ao rolar a página - * Blog Elaine Gaspareto *

Menu horizontal abaixo do cabeçalho, que fica fixo ao rolar a página

em 09/10/2017

Menu horizontal abaixo do cabeçalho, que fica fixo ao rolar a página

Não é de hoje que me pedem pra ensinar como colocar no blog aquele menu especial que a gente posiciona abaixo do cabeçalho mas que fica fixo no topo ao rolar a página.
Não sabe do que eu tô falando? Veja:


Demonstração do tutorial


No meu exemplo, além de ter o efeito Fixar no topo ele também é responsivo e pode ser usado em templates responsivos ou adaptados para a versão mobile. No acaso do meu blog de testes ele está adaptado para a versão mobile.
Vou te mostrar como colocar em seu blog, tá?


Como instalar no blog o menu que fica fixo ao rolar a página


Dica importante:
Para começar eu sugiro que você teste antes em um blog de testes.
Coloque o mesmo template de seu blog real e faça o tutorial nesse blog de testes. Assim você sentirá mais segurança para realizar o tutorial em seu blog real.
Ok?

Copiar os códigos


Acesse o painel do blog onde deseja inserir o menu e clique em Tema.
A seguir clique em Editar HTML e dentro da caixa de código que expandir digite ]]></b:skin> e tecle Enter para localizar.
ACIMA disso cole o CÓDIGO CSS.
Esse é o código que define a aparência do menu, coisas como cores e fontes.
Como quero te ver feliz fiz de um jeito que essas alterações de cor e fonte podem ser feitas via painel do Blogger, na guia Tema/Personalizar/Avançado.
Inseriu o CÓDIGO CSS?
Salve.

Agora,na barra de busca, digite </head> e tecle Enter.
ACIMA da tag localizada cole o CÓDIGO JAVASCRIPT.
Salve.

Importante: observe o valor 359 que aparece nesse código.
Ele se refere à altura que o menu vai percorrer antes de se fixar no topo.
Essa é a largura exata do meu cabeçalho de testes.
Então, se seu cabeçalho mede um valor diferente (claro que deve medir, né?) altere esse valor 359 que está no código pela altura de seu cabeçalho.
Compreendeu? Assim a transição fica mais suave e harmônica.
Feito isso, salve.

Agora, na barra de busca, digite </header> e localize.
ABAIXO de </header> cole o CÓDIGO HTML.
Este é o código que você precisa necessariamente editar, ok?
No código você verá que deixei marcado onde é para colocar o link e onde é para colocar o nome das abas e sub abas.

Caso deseje inserir mais abas simples basta repetir o código abaixo tantas vezes quantas desejar aumentar o número de abas:

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

Caso deseje inserir mais abas multinível basta repetir o código abaixo tantas vezes quantas forem as abas multinível que desejar:

<li><a href='#'>NOME DA ABA<font size='2'>&#9660;</font></a>
<ul class='menus'>
<li><a href='LINK'>NOME DA SUB ABA</a></li>
<li><a href='LINK'>NOME DA SUB ABA</a></li></li>
<li><a href='LINK'>NOME DA SUB ABA</a></li>
<li><a href='LINK'>NOME DA SUB ABA</a></li>
<li><a href='LINK'>NOME DA SUB ABA</a></li>
</ul>
</li>


Aí é só editar, colocar o link para onde cada aba deve direcionar, colocar o nome de cada aba e sub aba e salvar.

Leitura recomendada:




Dicas extras:
Caso seu template não seja responsivo ative a versão mobile dele e o menu aparecerá automaticamente no celular.
Para ativar a versão mobile basta clicar em Tema e a seguir marcar Sim na caixinha Celular que aparece na tela.
A seguir escolha a opção Personalizar e salve. O menu vai aparecer.

Recomendo que você leia para entender melhor:



Importante:
Peço que você não reposte este tutorial ou os códigos em seu blog; caso ache que ele pode ser interessante para seus leitores indique através de um link como chegar aqui.
Falou, querido leitor?


E terminamos!
Espero que você aproveite e consiga fazer, mas se tiver qualquer pergunta por favor diga nos comentários e eu respondo assim que possível.
E se puder curtir o post ou compartilha-lo em suas redes sociais eu fico muito grata!



2 comentários via Blogger
comentários via Facebook

2 comentários:

  1. Ah querida Elaine, leio seus post e acho super simples de fazer mas ............
    O medinho bate e não faço. Acho que ainda (depois de 200 anos rsrsr) não tenho segurança.
    Eu tenho um blog de teste, mas não posso ver como fica, é um blog simples que tem que publicar para ver como fica, então não dá.
    Estou querendo abrir abas .... um dia chego lá ......
    Beijos.
    blogjoturquezzamundial

    ResponderExcluir
  2. Oi Elaine, faz um post pra explicar pra gente que diabos é esse tal Search Console do Google? Dá dicas de como usar esse troço em nosso benefício, rsrsrsr. Beijo, sua sempre fã.

    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…



Visualizações

Contando...

Dias online
Postagens
comentários