Criando um menu dropdown fixo no topo

Nunca fui muito boa entendedora de HTML e design. Eu sabia o básico de Photoshop, mas nada de códigos, até criar o Alta Exposição. Por falta de grana, pedir a um designer profissional para criar um layout do meu jeitinho seria inviável. Portanto, se quisesse que o blog ficasse como eu gosto teria que aprender a me virar.

Tudo o que vocês veem hoje aqui foi criação minha, aprendido através do melhor professor: o Google haha. O theme é da Bruna Borges, do blog Enjoy Things, mas peguei mais pela base e fui modificando de acordo com as minhas preferências. Então, logicamente, tinha que aprender a fazer essas mudanças.

Assimmmm, como não sou egoísta, resolvi dividir o que venho descobrindo com vocês <3 E hoje vim ensinar como criar esse menu dropdown fixo no topo que coloquei no blog.

Antes de começar, não esqueça de fazer um backup do seu modelo atual ou testar em um blog de teste.

Agora, abra seu painel no blogger, clique em Layout e adicione um Gadget no cabeçalho. Selecione a opção HTML/JavaScript. Quando a caixa Configurar HTML/JavaScript abrir, você vai colar nela o seguinte código:

<div id="menufixedbg">
<div id="menufixed">
<li><a href="SEU LINK AQUI">INÍCIO</a></li>
<li><a href="LINK1">TÍTULO 1</a></li>
<li><a href="#">NOME DA ABA 1</a>
  <ul>
  <li><a href='LINK DA SUB ABA 1'>NOME DA SUB ABA 1</a></li>
  <li><a href='LINK DA SUB ABA 2'>NOME DA SUB ABA 2</a></li>
  <li><a href='LINK DA SUB ABA 3'>NOME DA SUB ABA 3</a></li>
  <li><a href='LINK DA SUB ABA 4'>NOME DA SUB ABA 4</a></li>
  </ul> 
</li>
<li><a href="#">NOME DA ABA 2</a>
  <ul>
  <li><a href='LINK DA SUB ABA 1'>NOME DA SUB ABA 1</a></li>
  <li><a href='LINK DA SUB ABA 2'>NOME DA SUB ABA 2</a></li>
  <li><a href='LINK DA SUB ABA 3'>NOME DA SUB ABA 3</a></li>
  <li><a href='LINK DA SUB ABA 4'>NOME DA SUB ABA 4</a></li>
  </ul> 
</li>
<li><a href="LINK2">TÍTULO 2</a></li>
<li><a href="LINK3">TÍTULO 3</a></li>

Substitua as áreas em capslock pelos links e títulos desejados. Nas guias com sub abas, você pode trocar "#" por um link ou não. Caso queira adicionar/retirar alguma aba, basta copiar ou deletar o código referente a cada uma.

Ao terminar, clique em salvar. Em seguida, você vai personalizar o menu para deixá-lo fixo no topo e personalizar seu layout.

No painel do blog, clique em Modelo e escolha a opção Editar HTML. Aqui, você irá acrescentar o código em CSS.

Dentro da caixa de código, aperte as teclas CTRL + F e digite </b:skin>. Caso o código não esteja expandido, você verá uma setinha preta antes da linha. Clique nela e cole antes da tag o código abaixo (deixei com os créditos de onde aprendi o código, mas tem algumas modificações minhas):

/* Menu fixo por honey-pixel e altaexposicao.com*/
#menufixedbg {
background: #fff; /* COR DO FUNDO */
opacity: 0.8; /* OPACIDADE */
border-bottom: 1px solid #b2b2b2; /* ESPESSURA, TIPO E COR DA BORDA*/
width: 100%; /* COMPRIMENTO */
height: 60px; /* ALTURA */
position: fixed;
top: 0;
left: 0;
z-index: 9999;
}
#menufixed {
background: #fff;
opacity: 0.8;
font-family: 'verdana'; /* FONTE DO TEXTO */
font-size: 18px; /* TAMANHO DO TEXTO */
font-weight: bold;
text-transform: uppercase;
margin-left: 40px;
}
#menufixed li {
list-style-type: none;
display: inline;
float: left; /* ALINHAMENTO, PODE SER LEFT, CENTER OU RIGHT */
padding: 0;
}
#menufixed li a {
color: #191919; /* COR DO TEXTO */
text-decoration: none;
padding-right: 40px;
line-height: 60px;
}
#menufixed a:hover {
color: #7c8fa7; /* COR DO TEXTO SELECIONADO */
}
#menufixed ul {
list-style: none;
margin: 0;
padding: 0; 
background: #191919; /* FUNDO DAS SUB ABAS */
margin-left: -25px;
}
#menufixed li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 95px;
padding-left: 25px;
}
#menufixed li ul a {
font-size: 16px;
color: #fff; /* COR DO TEXTO DAS SUB ABAS */
font-weight: bold;
line-height: 24px;
}
#menufixed li:hover ul ul, 
#menufixed li:hover ul ul ul, 
#menufixed li.sfhover ul ul, 
#menufixed li.sfhover ul ul ul {
left: -999em;
}
#menufixed li:hover ul, 
#menufixed li li:hover ul, 
#menufixed li li li:hover ul, 
#menufixed li.sfhover ul, 
#menufixed li li.sfhover ul, 
#menufixed li li li.sfhover ul {
left: auto

Para escolher as cores, eu indico o site Color-Hex, que é bem fácil de usar.

Depois, é só visualizar o modelo, conferir se está tudo certo e salvar!

VEJA AQUI O RESULTADO

--

Gostaram da dica? Qualquer dúvida sobre o código, sugestão de melhoria ou pedidos para futuros posts, é só comentar aqui embaixo.