Blog 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!

Mas, devido a falta de tempo, não prometo responder a todos os comentários.

Mais, farei o possível, ok? Beijinhos!


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
  4. Como fazer uma sub aba dentro da aba? Essa que vai para lateral?

    ResponderExcluir
subir