09 janeiro 2015

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!

Antes de começarmos acesse a página de códigos para podermos começar o tutorial. Deixe-a aberta.



1. Acesse o painel do seu blog.

2. Vá em "Tema" e "Editar HTML".
3. Procure pelo código:

]]></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 dele cole o 1º código

5. Ainda dentro do HTML do seu template procure por:

</header>

6. 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á 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 para o 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 

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



Agregadores