Menu Drop Down para Blog - (Menu com abas e sub abas) | Quero Dicas | Tutoriais para seu blogs


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


Acabei de receber um 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 blog. 
Ele me acompanha a muito tempo, desde 2011 no meu primeiro blog construído e hoje eu disponibilizo para vocês.
Venha e aprenda, Siga-me os bons!


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 me 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.
Clique no botão e saiba seu estilo

Agora que você já fez seu backup e visualizou o Menu Drop Down, vamos ao tutorial.

  Tutorial 



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

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


3 - Vá em Layout, Adicionar Gadgets, HTML/Javascript e cole o código abaixo e salve.
(Coloque no local desejado a ser visto)

<div id='NavbarMenu'>
<div id='NavbarMenuleft'>
<ul id='nav'>
<li><a href='data:blog.homepageUrl'>Home</a></li>
<li>
<a href=' LINK AQUI'>Nome Link 1</a>
<ul>
<li><a href=' LINK AQUI'>Nome do Link </a></li>
<li><a href=' LINK AQUI'>Nome do Link</a></li>
<li><a href=' LINK AQUI'>Nome do Link</a></li>
<li><a href=' LINK AQUI'>Nome do Link</a></li>
<li><a href=' LINK AQUI'>Nome do Link</a></li>
</ul>
</li>
<li><a href=' LINK AQUI'>Nome Link 2</a>
<ul>
<li><a href=' LINK AQUI'>Nome do Link </a></li>
<li><a href=' LINK AQUI'>Nome do Link</a></li>
<li><a href=' LINK AQUI'>Nome do Link</a></li>
<li><a href=' LINK AQUI'>Nome do Link</a></li>
<li><a href=' LINK AQUI'>Nome do Link</a></li>
</ul>
</li>
<li><a href=' LINK AQUI'>Nome do Link 3</a>
<ul>
<li><a href=' LINK AQUI'>Nome do Link </a></li>
<li><a href=' LINK AQUI'>Nome do Link</a></li>
<li><a href=' LINK AQUI'>Nome do Link</a></li>
<li><a href=' LINK AQUI'>Nome do Link</a></li>
<li><a href=' LINK AQUI'>Nome do Link</a></li>
</ul>
</li>
<li><a href=' LINK AQUI'>Nome do Link 4</a>
<ul>
<li><a href=' LINK AQUI'>Nome do Link </a></li>
<li><a href=' LINK AQUI'>Nome do Link</a></li>
<li><a href=' LINK AQUI'>Nome do Link</a></li>
<li><a href=' LINK AQUI'>Nome do Link</a></li>
<li><a href=' LINK AQUI'>Nome do Link</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div style='clear:both;'/>
</div>

 

4 - Agora, 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.


4 - Acima do código encontrado cole

/* NavbarMenu
--------------------------- */
#NavbarMenu {
background: #0093d3; /*--cor de fundo--*/
url(http://2.bp.blogspot.com/_kMUpUqMmduA/SVU82PLeYMI/AAAAAAAAA6c/R8Ip5ZMFIh8/s1600/navbar.png);
width: 100%; height: 35px;
font-size: 16px;
font-family: Arial, Tahoma, Verdana;
color: #FFF;/*--cor do link--*/
font-weight: bold; margin: 0;padding: 0;text-transform: capitalize;
}
#NavbarMenuleft {
width: 100%; float: left;margin: 0;padding: 0;
}
#nav {
margin: 0;
padding: 0;
}
#nav ul {
float: left;list-style: none;margin: 0;padding: 0;
}
#nav li {
list-style: none;margin: 0;padding: 0;
}
#nav li a, #nav li a:link, #nav li a:visited {
color: #FFF; /*--edite cor do link--*/
display: block;
font-size: 18px;/*--tamanho da fonte do link--*/
font-family: Georgia, Times New Roman;font-weight: normal;text-transform: capitalize;
margin: 0;padding: 9px 15px 8px;border-right: 1px solid #fff;
}
#nav li a:hover, #nav li a:active {
background: #25CABD; url(http://1.bp.blogspot.com/_kMUpUqMmduA/SVU-vl5H-bI/AAAAAAAAA68/U4rkLsg0HqE/s1600/navhov.png);
color: #FFF;  /*--edite cor do link hover--*/
margin: 0;padding: 9px 15px 8px;text-decoration: none;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #0093d3;/*--cor de fundo--*/
width: 200px;
color: #FFF; /*--cor do link--*/
font-size: 14px;font-family: Georgia, Times New Roman;font-weight: normal;text-transform: capitalize;
float: none;margin: 0;padding: 7px 10px;border-bottom: 1px solid #FFF;border-left: 1px solid #FFF;border-right: 1px solid #FFF;
}
#nav li li a:hover, #nav li li a:active {
background: #25CABD;/*--cor de fundo hover--*/
color: #FFF; /*--cor do link--*/
padding: 7px 10px;
}
#nav li {float: left;padding: 0;
}
#nav li ul {z-index: 9999;position: absolute;left: -999em;height: auto;width: 170px;margin: 0;padding: 0;
}
#nav li ul a {width: 140px;
}
#nav li ul ul {margin: -32px 0 0 171px;}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {left: auto;}
#nav li:hover, #nav li.sfhover {position: static;}   

5 - Pronto! Agora é só personalizar na cor que desejar e colocar seus nomes e links no local indicado.
Tabela de cores: Erikasarti

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>  

Gostou? Espero que sim! E não se esqueça de deixar seus comentários! Beijinhos
Me Contrate!

7 comentários

Clique e deixe seu comentários
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


Que bom você reservou um tempinho para vir comentar. Você me deixa super feliz e desde já agradeço por sua colaboração.

Comente. Mais peço que leia antes:

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 xingamentos entre outros, não serão publicados ou respondidos.

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

4 - Comentários somente URLs de terceiros, não serão publicados.

♥ - Caso queira divulgar seu blog gratuitamente, Acesse, Galeria de Blogs
♥ - Eu terei o maior prazer em colocar o link ou seu banner nesta galeria.

Muito obrigada por seu comentário e por sua vista.
Beijinhos ♥
Abrir Conversa em CódigoFechar Conversa em Código Abrir EmoticonFechar Emoticon

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