Tutorial: Menu Dropdown


     Boa noite, gurias! À pedido de algumas leitoras, eu trouxe um tutorial muito procurado na internet, mas a maioria deles não funciona ou o blogueiro não deixa bem claro onde se deve aplicar os códigos. Foi por causa disso que eu demorei um baita tempo para aprender a colocar o tal menu aqui no blog. O tutorial é bem mais fácil do que você imagina, a parte mais chatinha é a de substituir os links. Bem, então vamos lá! Para quem não conhece, o menu Dropdown é esse:


     Primeiro, você deve ir em Modelo > Editar HTML. Dê Ctrl + F e procure por ]]></b:skin>. Cole o código abaixo acima do código encontrado (wh?) fazendo as alterações necessárias:

/* Menu com sub-menus
--------------------------- */
#Menucomsub-menus {
background: none repeat-x; /* COR DE FUNDO DO MENU */
width: 146%; /* LARGURA AUTOMÁTICA, NÃO MEXER */
height: 39px; /* ALTURA */
font-size: 12px; /* TAMANHO DA FONTE DO MENU */
font-family: Verdana,Arial, Tahoma; /* FONTE DO MENU */
color: #000; /* COR DA FONTE DO MENU */
font-weight: bold; /* FONTE EM NEGRITO */
margin: -350px; /* NÃO ALTERE */
padding: 0; /* NÃO ALTERE */
}
#Menucomsub-menusleft {
width: 100%;
float: left; /* NÃO ALTERE */
margin: 0; /* NÃO ALTERE */
padding: 0; /* NÃO ALTERE */
}
#nav {
margin: 0; /* NÃO ALTERE */
padding: 0; /* NÃO ALTERE */
}
#nav ul {
float: left; /* NÃO ALTERE */
list-style: none; /* NÃO ALTERE */
margin: 0; /* NÃO ALTERE */
padding: 0; /* NÃO ALTERE */
}
#nav li {
list-style: none; /* NÃO ALTERE */
margin: 0; /* NÃO ALTERE */
padding: 0; /* NÃO ALTERE */
}
#nav li a, #nav li a:link, #nav li a:visited {
color: #ff0040; /* COR DO LINK */
display: block; /* NÃO ALTERE */
font-size: 16px;/* TAMANHO DA FONTE DO LINK */
font-family: Verdana, Arial, Times New Roman;
font-weight: bold; /* FONTE EM NEGRITO */
margin: 0; /* NÃO ALTERE */
padding: 9px 15px 8px; /* NÃO ALTERE */
}
#nav li a:hover, #nav li a:active {
background: none ; /* COR DO FUNDO HOVER */
color: #ff0040;  /* COR LINK EM HOVER */
opacity:0.8; /* opacidade do fundo */
margin: 0; /* NÃO ALTERE */
padding: 9px 15px 8px; /* NÃO ALTERE */
text-decoration: none; /* NÃO ALTERE */
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #330033; /* COR DO FUNDO HOVER */
width: 200px; /* LARGURA DO SUBMENU */
color: #FFF; /* COR DO LINK DO SUBMENU */
font-size: 14px;
font-family: Verdana, Georgia, Times New Roman;
font-weight: normal; /* ALTERE PARA ITÁLICO (ITALIC), NEGRITO (BOLD) OU OUTROS */
float: none; /* NÃO ALTERE */
margin: 0; /* NÃO ALTERE */
padding: 7px 10px; /* NÃO ALTERE */
}
#nav li li a:hover, #nav li li a:active {
background: #330033; /* COR DO SUBMENU HOVER  */
color: #000; /* COR DO LINK DO SUBMENU HOVER */
padding: 7px 10px; /* NÃO ALTERE */
}
#nav li {float: left;padding: 0; /* NÃO ALTERE */
}
#nav li ul {z-index: 9999;position: absolute;left: -999em;height: auto;width: 170px;margin: 0;padding: 0; /* NÃO ALTERE */
}
#nav li ul a {width: 140px; /* NÃO ALTERE */
}
#nav li ul ul {margin: -32px 0 0 171px; /* NÃO ALTERE */}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em; /* NÃO ALTERE */}
#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; /* NÃO ALTERE */}

/* Fim do Menu com sub-menus --------------------------- */

Visualize e se tudo estiver certo, salve. Agora, vá no seu layout, adicione um gadget de HTML/Javascript e cole o código a seguir, fazendo as alterações necessárias:

<div id='Menucomsub-menus'>
<div id='Menucomsub-menusleft'>
<ul id='nav'>
<li><a href='LINK 1'>NOME 1</a></li>
<li>
<a href='LINK 2'>NOME 2</a>
</li>
<li><a href='#'>NOME 3</a>
<ul>
<li><a href='SUBLINK 1'>NOME SUBLINK1</a></li>
<li><a href='SUBLINK 2'>NOME SUBLINK 2</a></li>
<li><a href='SUBLINK 3'>NOME SUBLINK 3</a></li>
<li><a href='SUBLINK 4'>NOME SUBLINK 4</a></li>
</ul>
</li>
<li><a href='#'>NOME 4</a>
<ul>
<li><a href='SUBLINK 1'>NOME SUBLINK1</a></li>
<li><a href='SUBLINK 2'>NOME SUBLINK 2</a></li>
<li><a href='SUBLINK 3'>NOME SUBLINK 3</a></li>
<li><a href='SUBLINK 4'>NOME SUBLINK 4</a></li>
</ul>
</li>
<li><a href='#'>NOME 5</a>
<ul>
<li><a href='SUBLINK 1'>NOME SUBLINK1</a></li>
<li><a href='SUBLINK 2'>NOME SUBLINK 2</a></li>
<li><a href='SUBLINK 3'>NOME SUBLINK 3</a></li>
<li><a href='SUBLINK 4'>NOME SUBLINK 4</a></li>
</ul>
</li>
<li><a href='#'>NOME 6</a>
<ul>
<li><a href='SUBLINK 1'>NOME SUBLINK1</a></li>
<li><a href='SUBLINK 2'>NOME SUBLINK 2</a></li>
<li><a href='SUBLINK 3'>NOME SUBLINK 3</a></li>
<li><a href='SUBLINK 4'>NOME SUBLINK 4</a></li>
</ul>
</li>
<li><a href='#'>NOME 7</a>
<ul>
<li><a href='SUBLINK 1'>NOME SUBLINK1</a></li>
<li><a href='SUBLINK 2'>NOME SUBLINK 2</a></li>
<li><a href='SUBLINK 3'>NOME SUBLINK 3</a></li>
<li><a href='SUBLINK 4'>NOME SUBLINK 4</a></li>
</ul>
</li>
<li><a href='#'>NOME 8</a>
<ul>
<li><a href='SUBLINK 1'>NOME SUBLINK1</a></li>
<li><a href='SUBLINK 2'>NOME SUBLINK 2</a></li>
<li><a href='SUBLINK 3'>NOME SUBLINK 3</a></li>
<li><a href='SUBLINK 4'>NOME SUBLINK 4</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div style='clear:both;'/></div>

*Não esqueça de mover o gadget para baixo do cabeçalho e excluir o menu padrão, okay?

     Gente, preste muita atenção na hora de substituir os links, caso contrário, pode dar algum erro e você ter que começar tudo de novo. E não se esqueça de ir substituindo, salvando e visualizando por etapas. =)
Eu peguei os códigos de um blog, não me lembro o nome, só que não tinha dado erro no meu layout, daí eu tive um baita trabalho editando os códigos para se encaixar perfeitamente aqui no blog. Então se usarem, pelo menos mencionem a minha pessoa, que eu modifiquei os códigos e tal. Combinado? Ah, e não se esqueçam de curtir a fanpage do blog, para receber as novidades primeiro que todo mundo! Haha! 
     Qualquer dúvida ou sugestão de post, me chama nos comentários!
Com amor, 
Júlia Flores.

8 comentários:

  1. Respostas
    1. Vá no painel do Blogger, logo clique em modelo. Terá dois botões. O primeiro será laranja e estará escrito "personalizar". O segundo será cinza e estará escrito "Editar HTML", é nele que você deve clicar.

      Espero ter ajudado =)

      Excluir

Hey! Que bom que você passou por aqui! Deixe a sua opinião sobre o post! Ah...não esqueça que comentários ofensivos ou então "Seguindo, segue de volta?" serão ignorados.