Menu Drop Down colorful (diversas cores) para blog | Quero Dicas Quero Dicas : Menu Drop Down colorful (diversas cores) para blog

Quero Dicas : Menu Drop Down colorful (diversas cores) para blog

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

* Você reservou um tempinho para comentar? *

Desde já agradeço!

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


Um comentário:

  1. 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

    ResponderExcluir

Amigos do Blog

agenda dos blogs Universo das Dicas

Ganhe Visitantes | Inscreva-se!

GeraLinks Linkicha Atoananet Linkirado
subir