Como editar um menu com abas e sub abas- passo a passo completo - * Blog Elaine Gaspareto *

Como editar um menu com abas e sub abas- passo a passo completo

em 11/09/2017

Como editar um menu com abas e sub abas- passo a passo completo

Quer aprender como colocar em seu blog um menu bem bonito e fácil?
Vou te ensinar hoje como inserir em seu blog um menu simples mas bem completo, com abas e sub abas. E o que é melhor: em apenas um passo, instalado como gadget. Não é demais?
Depois de pronto ele ficará assim (claro que com seus links, personalizado por você, como você desejar) :


Demonstração do tutorial


Quando eu publico algum tutorial que ensina como instalar um menu no blog sempre aparece algum blogueiro ou blogueira que está começando e que ainda se atrapalha na hora de inserir links no menu ou que me pergunta como fazer para os posts irem para a aba certa do menu.
Então vou aproveitar que esse menu é bem simples e nesse mesmo tutorial vou ensinar o passo-a-passo de como fazer o menu funcionar, como editar as abas e como fazer para os posts irem para as abas corretas.
Vamos lá?

Uma dica importante para começarmos é você fazer uma pequena e simples alteração em seu template, para poder colocar o menu abaixo do cabeçalho.
Alguns blogs possuem a área do cabeçalho travada. Vamos resolver isso.
Vá até a aba Tema (ou Modelo) de seu blog e clique em Editar HTML. Dentro do código fonte de seu blog tecle Ctrl+F e na barra de pesquisa digite Cabeçalho. Tecle enter.
Vai aparecer um código semelhante a esse:

<b:section class='header' id='header' maxwidgets='1' name='Header' showaddelement='no'>
        <b:widget id='Header1' locked='true' title='Blog de testes da Elaine 5 (Cabeçalho)' type='Header'>

Aí é só trocar maxwidgets='1' por maxwidgets='4'  e onde aparece 'no' troque por 'yes'
E onde aparece locked='true' troque true por false.
E salve.
Só isso e seu header vai estar destravado e você poderá incluir até 4 gadgets abaixo dele..

Feito isso vá até a aba Layout de seu blog, atualize a página para aplicar a alteração do código-fonte.
A seguir clique em Adicionar um gadget e dentre as opções que aparecem escolha HTML/JAVASCRIPT.
Aí copie o código do menu:


Copiar o código


E cole o código todo dentro da caixinha do gadget.
Salve, arraste para baixo do Cabeçalho e salve a alteração.
Se tudo deu certo seu menu já aparece em seu blog.
Para personalizar itens como fonte e cores basta ler o código. Ele te dirá tudo o que é preciso.
Cores são alteradas trocando o código hexadecimal precedido de # pelo código da cor que deseja.
Aqui tem uma tabela de cores, caso precise.

Também pode usar as cores de seu template: vá ao seu painel, clique em Tema/Personalizar/Avançado e veja suas cores. Elas mostram também os códigos hexadecimais de cada uma. Legal, né?
Personalize seu menu com as cores que deseja, salve e tá feito!
E aí é a hora do show! Vamos aprender o passo-a-passo mais pedido:

Como configurar corretamente um menu para blog- inserir links e nomear as abas


Agora que já instalamos o menu, e deixamos com as cores que queremos, vamos à parte mais importante desse tutorial, que se destina especificamente a iniciantes, ok?
Se você já manja dos paranauês todos de como inserir links no menu, como usar marcadores, etc... então essa parte não é pra ti.
Mas se você quer aprender ou relembrar o básico da configuração de um menu, vem comigo!

Quando instalamos este (ou qualquer outro menu) em geral ele possui a área para inserir os links e os nomes das abas e sub abas. No caso deste menu especificamente a área que vamos editar é essa, que claro, já está em seu menu que você instalou em seu blog:

<div id="nav">
 <ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">Nome da aba</a></li>
  <li><a href="#">Aba com sub abas 1</a>
  <ul>
   <li><a href="#">Sub aba 1.1</a></li>
   <li><a href="#">Sub aba 1.2</a></li>
   <li><a href="#">Sub aba 1.3</a></li>
   <li><a href="#">Sub aba 1.4</a></li>
   <li><a href="#">Sub aba 1.5</a></li>
  </ul>
  </li>
  <li><a href="#">Nome da aba</a></li>
  <li><a href="#">Aba com sub abas 2</a>
  <ul>
   <li><a href="#">Sub aba 2.1</a></li>
   <li><a href="#">Sub aba 2.2</a></li>
   <li><a href="#">Sub aba 2.3</a></li>
   <li><a href="#">Sub aba 2.4</a></li>
   <li><a href="#">Sub aba 2.5</a></li>
  </ul>
  </li>
  <li><a href="#">Nome da aba</a></li>
  <li><a href="#">Nome da aba</a></li>
 </ul>
</div>

Observe que cada linha é específica de uma aba do menu. Assim, essa primeira linha, em geral, é para colocarmos o endereço do blog, da página inicial dele.
Seguindo o exemplo do meu blog de testes ficaria assim:

<li><a href="https://blog-de-testes-do-cliente.blogspot.com.br/">Home</a></li>

Viu o que eu fiz? Coloquei o endereço completo do meu blog de testes no espaço onde havia a #.

Agora, na aba seguinte, vamos supor que eu queira colocar o endereço de uma página estática do meu blog, a página Quem escreve, por exemplo (ou qualquer nome que você queira dar: Autor do blog, Sobre, Quem faz o blog, Autor, A Blogueira, etc...)
Eu vou ao meu painel, clico em Páginas e a seguir, com o botão direito do mouse, clico em Visualizar abaixo da página cujo endereço eu preciso, no caso a minha página Quem faz o blog. Aí selecione Copiar endereço do link.
Este é o endereço que colocaremos no espaço destinado a ele no menu. Assim:

<li><a href="http://blog-de-testes-do-cliente.blogspot.com/p/quem-escreve.html">Quem escreve</a></li>


Aí chegamos em uma aba que tem sub abas. Ela é assim, conforme você pode ver em seu menu:

<li><a href="#">Aba com sub abas 1</a>
  <ul>
   <li><a href="#">Sub aba 1.1</a></li>
   <li><a href="#">Sub aba 1.2</a></li>
   <li><a href="#">Sub aba 1.3</a></li>
   <li><a href="#">Sub aba 1.4</a></li>
   <li><a href="#">Sub aba 1.5</a></li>
  </ul>
  </li>

No caso do meu exemplo eu defini que essa seria a aba onde eu colocaria as categorias mais importantes do blog.
Para isso eu fui ao blog e olhei os marcadores (ou tags, ou categorias, chame como preferir) e escolhi quais iriam nessa aba.
Escolhi Beleza, Make, Moda e Unhas. A aba vai se chamar Feminices pois as categorias que selecionei para ela dizem respeito ao universo feminino.
Ficaria assim:

<li><a href="#">Feminices</a>
  <ul>
   <li><a href="http://blog-de-testes-do-cliente.blogspot.com.br/search/label/Beleza">Beleza</a></li>
   <li><a href="http://blog-de-testes-do-cliente.blogspot.com.br/search/label/Make">Make</a></li>
   <li><a href="http://blog-de-testes-do-cliente.blogspot.com.br/search/label/Moda">Moda</a></li>
   <li><a href="http://blog-de-testes-do-cliente.blogspot.com.br/search/label/Unhas">Unhas</a></li>
   </ul>
  </li>

Viu o que eu fiz?
Coloquei o nome da aba, os nomes das sub abas e no lugar das # eu coloquei o link de cada marcador.
Para copiar o endereço de cada marcador vá ao seu blog, pare o mouse sobre o marcador cujo endereço você quer e com o botão direito do mouse clique em Copiar endereço do link. Esse é o endereço de seu marcador.
Em geral ele será mais ou menos assim:

http://endereçodeseublog.blogspot.com.br/search/label/NOMEDOMARCADOR

Também excluí uma das sub abas, percebeu? Apenas selecionei e deletei isso: <li><a href="#">Sub aba 1.5</a></li>
E a sub aba sumiu.
Se eu quisesse incluir mais uma (ou várias) sub aba bastaria repetir a linha quantas vezes eu quisesse ao invés de excluir.

No código que forneci tem mais uma aba com sub abas. Nela eu defini que ficariam as categorias Dona de casa, com os marcadores Decoração, Receitas e Cozinha.
Fiz o mesmo procedimento da aba Feminices e o resultado é o que você conferiu no blog de testes.

Se não quiser sub abas basta excluir esse trecho todo do menu e as sub abas sumirão.
Se quiser mais abas com sub abas basta copiar o trecho referente a elas e colar antes do fechamento da div do menu, que é assim:
</ul>
</div>
Ou em qualquer lugar que desejar que ela, a aba com sub abas, apareça, entre uma aba e outra.
E só ler o código e ele te mostrará tudo o que deseja saber.

Nas demais abas simples eu defini que uma seria o Sitemap do blog, a página Anuncie e a última seria a página de Contato.
Assim o meu menu ficou pronto e funcionando perfeitamente.


E como os meus posts vão para a aba certa do menu?


Simples!
Toda vez que eu fizer um post em meu blog e ele se encaixar na categoria Receitas, por exemplo, basta eu colocar Receitas na caixinha Marcadores que aparece a direita do editor de postagens (lá onde a gente escreve os nossos posts) e o meu post irá automaticamente para o lugar certo.
Faça o teste: no blog de testes clique em Receitas e você verá que os posts dessa categoria aparecem.
E assim é com todos.

Dica importante:
Para sempre funcionar o marcador precisa ser escrito sempre do mesmo modo. Se eu coloquei no menu o marcador assim:

<li><a href="endereçodeseublog/search/label/Beleza">Beleza</a></li>

E escrever beleza na caixinha Marcadores quando for fazer meu post aí não dará certo.
Percebeu a diferença? Letra maiúscula!
Se eu defini que será Beleza o nome do meu marcador, se é assim que está no endereço http dele então é assim que eu sempre terei que usar.
Se usar beleza em algum post o menu não vai funcionar.
Pontuação e grafia importam, então fique atenta.
Entendido?

E acabamos!
Mega tutorial, né? Bem completo, com as dicas todas para editar qualquer tipo de menu pois em geral a forma de inserir links é a mesma.

Agora é contigo, querido leitor!
Me ajuda? Compartilhe esse tutorial, para que ele chegue a mais pessoas e ajude mais gente.
E se restou alguma dúvida diga nos comentários do post e eu respondo tão logo seja possível.



2 comentários via Blogger
comentários via Facebook

2 comentários:

  1. Que belo post, Elaine! Explicação completa e clara! Parabéns! Muito obrigada pela sua generosidade! Bjs!

    ResponderExcluir
  2. Nossa! Que menu lindo e que blog de testes!!!

    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