Menu Drop Down colorful (diversas cores) para blog


Vamos colocar este lindo Menu Drop down Colorido no seu templates? Este menu estava no meu antigo template e hoje eu irei disponibiliza-lo para você. =D

Ele modifica a cor para cada item que você instalar. Claro, somente na barra principal de navegação, não nas sub-pastas.

Este menu, precisa um pouco de atenção para arrumá-lo para deixá-lo no lugar correto. Vamos começar? Siga-me...

  Instalando o Código
Antes de começarmos, recomendo sempre fazer um backup do seu template. Dessa forma caso dê alguma erro, você terá seu template salvo em sua maquina. Não tem problema, clique e aprenda

Após!

Acesse o botão abaixo (ACESSE) para pegar os códigos que iremos utilizar


1 - Acesse o painel do seu blog. Vá em "Modelo" e "Editar HTML".

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.

2 - Procure pelo código:

 ]]></b:skin> 

3 - Acima dele cole o 1º código

4 - Ainda dentro do HTML do seu template procure por:

 </header> 
 

5 - Ao encontrar, logo abaixo dele cole o 2º código

Pronto. Termino da instalação. Agora vamos personalizá-lo

  Customização


Agora vamos aprender a personalizá-lo, preste atenção.

► No primeiro código instalado, acima de ]]></b:skin>, eu deixei ao lado de cada código o que você poderá manusear para alterar, conforme o seu template, como:

• Cores
• Tamanho
• Mais pra cima ou mais pra baixo

Vá alterando devagar até chegar ao ajuste. Só cuidado para não tirar sinais, tais como: aspas (" "),  dois pontos ( : ), entre outros, principalmente chaves de fechamento de código ( } )

Nome sublinhado
Após, conseguir acertá-lo, você ver que os nomes do menu base e sub-pastas estão sublinhados e queira tirá-los, faça o seguinte

1 - Procure por:

 a:hover {  

Você achará algo parecido ou igual a este:
a:hover {
  text-decoration:underline;
  color: $(link.hover.color);
}

2 - Troque a parte "underline" por "none". Exemplo:

a:hover {
  text-decoration:none;
  color: $(link.hover.color);
}

Pronto! Agora vamos pro segundo código instalado.

► No segundo código instalado, abaixo de </header>, é muito mais fácil!

Este é o que é mostrado em seu blog. Você terá que modificar colocando os nomes e direcionado seus links. Exemplo:

<li class='green'><a class='home'ENDEREÇO DO BLOG'>Home</a></li>

Onde está escrito ENDEREÇO DO BLOG ou ENDEREÇO DO LINK, você deve colocar o endereço do link que será direcionado.

Onde está > Home <, será onde você colocará o nome do seu menu.

Você irá fazer o mesmo em todos.
Eu deixei varias sub-pastas, caso queira retirar alguma, é só apagar :

<li><a href='ENDEREÇO DO LINK'> SUB-PASTA 1 </a></li>.

O mesmo se estende para acrescentar!
Caso queira, não ter sub-pastas em um determinado local, apague:

de - <ul class='sub-menu'>
<li><a href= LINK'>SUB-PASTA 1</a></li>
<li><a href='LINK'>SUB-PASTA 2</a></li>
até - </ul>

Prontinho! Demorou um pouquinho para ajustar o menu? Mas compensa, não é? Comente.
Beijinhos 

COMPARTILHE :  

Comentários
1 Comentários

1 comentários:

avatar
admin
terça-feira, 31 março, 2015 ×

Olá!! Muito obrigada por suas dicas, fiz esse menu e ficou mara, mas precisei corrigir essa parte pois ele estava dando erro e o próprio blogger indicou a correção
home'ENDEREÇO DO BLOG
home'>ENDEREÇO DO BLOG... Beijinhos

Armazém Jp fez o primeiro comentário! Comente você também!
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.