Menu Drop Down para Blog - (Menu com abas e sub abas) | Quero Dicas Quero Dicas : Menu Drop Down para Blog - (Menu com abas e sub abas)

Quero Dicas : Menu Drop Down para Blog - (Menu com abas e sub abas)

Menu Drop Down para Blog - (Menu com abas e sub abas)

| |


Acabei de receber outro pedido da visitante Elaine Cristina, solicitando um Menu Drop Down.

É, realmente estou em dividas com vocês neste aspecto, (Menus Drop Down) e por isso estou postando este primeiro estilo de menu para seus blogs.

Ele me acompanha a muito tempo, desde 2011 no meu primeiro blog construído e hoje eu disponibilizo para vocês. Vamos?

Repito: Ele me acompanha a muito tempo, não lembro de onde eu adquiri este código CSS e HTML. Caso, você seja o proprietário, por favor informe!
Antes de começarmos o tutorial, eu sempre recomendo fazer um backup do seu template, ao instalar qualquer tipo de implementação de Códigos dentro do template do seu blog e claro, dê preferências a blogs de teste! Não sabe fazer Backup? Não tem problema, clique e aprenda.

  Tutorial 


- Acesse o "Painel do seu blog", vá em "Modelo" e em "Personalizar"

2 - Siga para Avançado, Plano de fundo das Guias e troque as cores por "Transparente" e clique em Aplicar



3 - Clique para acessar a página para pegar os códigos:


4 - Agora vá em Layout, Adicionar Gadgets, HTML/Javascript e cole o 1º código abaixo e salve.

5 - Vá em "Editar HTML" e procure por:

 ]]></b:skin> 
 

Dica: Para ser mais rápido a procura, 1º clique dentro do HTML, depois use CTRL + F e na caixa de pesquisa cole o código.


6 - Acima do código encontrado cole o 2º código e salve

7 - Pronto! Agora é só personalizar na cor que desejar e colocar seus nomes e links no local indicado.

Tabela de cores: AQUI

Como Personalizar Nomes e Links no Menu DropDown

1 - O código que você implantou no Layout e Gadget é muito simples, veja!

O código está assim ↓
<a href='LINK AQUI'>Nome do Link 1</a>
   <ul>
      <li><a href='LINK AQUI'>Nome do Link </a></li>
      <li><a href=' LINK AQUI'>Nome do Link</a></li>

Vamos supor que você escolha  uma categoria "Blogger" como principal aba do menu e queira definir cada dategoria nas sub-abas ela ficará assim ↓ (Parecida com a minha)

<a href=' #'>Blogger</a>
   <ul>
<li><a href='http://querodicasde.blogspot.com.br/search/label/Personalizar%20Blog'>Personalizar </a></li>
<li><a href=' http://querodicasde.blogspot.com.br/search/label/Redes%20Sociais'>Gadget de Redes Sociais</a></li>

Entendeu como preencher as abas e sub-abas?

Agora, se você quiser adicionar mais abas simples é só acrescentar o código :

<li><a href=" LINK AQUI">Nome do link 5 </a></li>

antes do fechamento:
</ul>
</li>
Caso queira retirar as abas é só apagar o mesmo código

<li><a href=" LINK AQUI">Nome do link </a></li>  

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!


9 comentários:

  1. Obrigada querida, tenho procurado esse menu, e vc me ajudou muito deu tudo certinho, obrigada!

    ResponderExcluir
  2. Olá, quero agradecer muito pela explicação. Sou professor e estou construindo um blog. Você não tem ideia de como esta sua explicação sobre o menu foi fundamental na construção e organização dos menus.
    Obrigado!

    ResponderExcluir
    Respostas
    1. Que bom que tenha gostado. Fico muito feliz =D
      Beijinhos ♥

      Excluir
  3. Olá, seu tutorial me ajudou bastante.

    Só estou com um problema: existe um espaçamento entre os subitens do menu que não consegui resolver.

    Você poderia me informar qual linha de código e onde utilizar para remover esses espaçamentos?

    Obrigado!

    ResponderExcluir
    Respostas
    1. Olá Eric. Altere o código margin
      Espero ter ajudado

      Excluir
  4. Como fazer uma sub aba dentro da aba? Essa que vai para lateral?

    ResponderExcluir
    Respostas
    1. Pode sim Débora. Basta entender um pouquinho de CSS

      Excluir

Amigos do Blog

agenda dos blogs Universo das Dicas

Ganhe Visitantes | Inscreva-se!

GeraLinks Linkicha Atoananet Linkirado
subir