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 :  

Comentários
9 Comentários

9 comentários

avatar
admin
terça-feira, 06 outubro, 2015 ×

Olá Genix.
Troque left por center

Resposta
avatar
admin
domingo, 13 março, 2016 ×

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

Resposta
avatar
admin
domingo, 03 julho, 2016 ×

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!

Resposta
avatar
admin
domingo, 03 julho, 2016 ×

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

Resposta
avatar
admin
sábado, 15 outubro, 2016 ×

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!

Resposta
avatar
admin
sábado, 15 outubro, 2016 ×

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

Resposta
avatar
admin
quinta-feira, 26 janeiro, 2017 ×

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

Resposta
avatar
admin
quinta-feira, 26 janeiro, 2017 ×

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

Resposta


Que bom você reservou um tempinho para vir comentar. Você me deixa super feliz e desde já agradeço por seu comentário e por sua presença!

Apenas peço que leia:

1 - Devido a falta de tempo, não prometo responder a todos os comentários. Mais farei o possível.

2 - Educação sempre! Comentários com palavras de baixo calão, não serão publicados ou respondidos.

3 - Comentários não relacionados ao titulo, não serão publicados.

4 - Comente a vontade, deixe sua opinião, crítique, esclareça suas dúvidas e dê suas sugestões ou dicas sobre o assunto referente à postagem.


Beijinhos ♥
Abrir Conversa em CódigoFechar Conversa em Código Abrir EmoticonFechar Emoticon

Obrigada por seu comentário! Ele é muito importante para mim.

É proibida a reprodução total ou parcial dos artigos deste blog sem autorização|Somente terá o direito de republicar os códigos publicados dando os devidos créditos.