Menu fixo no topo do blog- com abas e sub abas - * Blog Elaine Gaspareto *

Menu fixo no topo do blog- com abas e sub abas

em 02/11/2017

Menu fixo no topo do blog- com abas e sub abas

Vou te mostrar hoje como ter em seu blog um menu com abas e sub abas (ou submenus, se você prefere) fácil de instalar e muito prático de personalizar.
A personalização básica desse menu será feita pelo painel do próprio blog, exatamente como se fosse um menu de páginas nativo. Não é demais?

Isso é possível pois usei, na personalização do menu, as variáveis do Blogger.
Sempre que você observar esse sinal: $ dentro do código quer dizer que ele se refere a uma variável, ou seja: a edição dessa variável pode ser feita via painel do Blogger, sem qualquer dificuldade.
Então, basicamente, esse menu é como se fosse um gadget nativo do Blogger pois usaremos as variáveis da classe Tabs para edita-lo.
Parece confuso? Não é não, é tão simples que você vai ficar impressionad@.
Quer aprender? Vem comigo!
Antes, veja a demonstração do tutorial:


Demonstração do tutorial


Menu com submenus para blog- modo de fazer


Para começarmos o trabalho acesse a página com os 2 códigos necessários à realização do tutorial.


Copiar o código


A seguir vá ao painel administrativo de seu blog (ou do blog no qual deseja instalar o menu; recomendo fazer antes em um blog de testes) e clique na aba Layout. A seguir clique em Adicionar um gadget e dentre as opções que surgirem escolha HTML/JAVASCRIPT.
Dentro da caixinha que expandir cole o CÓDIGO HTML e salve.
Arraste pra qualquer lugar (não vai interferir) e salve.

Calma, não vai aparecer o menu ainda.
Vamos aplicar os estilos que são necessários.
Acesse a aba Tema (ou Modelo, é a mesma coisa) do blog e clique em Editar HTML.
Dentro da caixa do código-fonte tecle Ctrl+F e na barra de busca que aparecer digite ]]></b:skin>
Tecle Enter para localizar.
Acima dessa tag de fechamento cole o CÓDIGO CSS.
Salve.
Está pronto!
Agora se liga nas Dicas extras!


Dicas extras- personalizar e configurar o menu com submenus fixo no topo do blog


Para personalizar coisas como cores e fontes clique de novo em Tema e a seguir clique em Personalizar.
Na página que abrir clique em Avançado. Localize o item Plano de fundo das guias para alterar as cores de fundo do menu e Texto das guias para alterar cor, tamanho e tipo de fonte do menu. Depois de deixar como deseja clique em Aplicar ao blog.
Simples demais, né?

Para configurar as abas do menu você precisa antes de tudo definir o que deseja inserir no menu.
Em geral a primeira aba é a aba Início, ou Home, ou Página inicial. Nela voce coloca o endereço de seu blog, assim ao clicar o leitor será trazido para a página inicial do blog.

Se optar por ter uma aba Sobre (ou Quem escreve, Autor, etc...) pode colocar na url dessa aba o endereço de uma página estática que contenha as informações sobre o autor, ou autores, do blog.
O mesmo vale para a página Contato, Blogroll, Anuncie (ideal para alojar seu mídia kit), etc...

Abas com submenus em geral são indicadas para separar temas do blog. No meu exemplo eu defini que a aba se chamaria Feminilidades e listei os temas "femininos" que se encaixam. Na aba Dona de cada fiz o mesmo.
No campo url você coloca o endereço de seus marcadores escolhidos.
São exemplos pra te ajudar a entender, ok?

Caso queira diminuir ou aumentar o número de sub abas basta repetir o código;deixei exemplificado na página dos códigos.


Importante:
Testei em todos os modelos do Blogger. Funciona em todos, exceto os modelos de visualização dinâmica e os novos modelos responsivos (Soho, Comtempo, etc).

No caso do modelo Watermark precisa editar manualmente cores e fontes pois o modelo não possui as variáveis $(tabs.font).


Caso você não use um modelo nativo do Design de modelo do Blogger pode tentar usar o menu.
Nesse caso substitua todas as ocorrências precedidas do sinal $ por códigos hexadecimais de cores, e por nomes de fontes.
Assim, por exemplo:

$(tabs.background.color)
Substitui por
#000000
que significa deixar o fundo do menu na cor preta.

Aqui tem uma tabela de cores caso precise.

No caso da fonte:
Troque
font: $(tabs.text);
por
font: 15px Arial;
que significa deixar a fonte com 15px de tamanho, do tipo Arial.
Entendeu?


Experimente fazer, é muito gratificante quando tentamos e conseguimos.
Se tiver dificuldades diga nos comentários e eu ajudo se for possível!
Ah, ia esquecendo:
Compartilhe esse tutorial, eu fico muito grata!

4 comentários via Blogger
comentários via Facebook

4 comentários:

  1. Tentei fazer esse tutorial, mas diz que a página de códigos não existe.

    ResponderExcluir
  2. Adorei esse Menu, mas não estou conseguindo finalizar. Devo estar fazendo algo errado... Aparece o fundo do Menu, mas não aparece as palavras contidas nele. Se não for atrapalhar, dê uma olhada! Onde estou errando?
    https://blog--grifos-de-professora.blogspot.com.br/
    Obrigada! Bjs! =D

    ResponderExcluir
    Respostas
    1. Experimente colocar o código html abaixo da área dos posts. Se vc colocou na seção entre colunas ele não vai aparecer...

      Excluir
    2. Uau!! Funcionou! Eu jamais saberia disso! Obrigada pela atenção! Bjs!

      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…



Visualizações

Contando...

Dias online
Postagens
comentários