Menu Personalizado Drop-down colorido para blog | Quero Dicas Quero Dicas : Menu Personalizado Drop-down colorido para blog

Quero Dicas : Menu Personalizado Drop-down colorido para blog

Menu Personalizado Drop-down colorido para blog

|


Olá meu amados.
Hoje eu trouxe para vocês um menu personalizado drop-down colorido para blog. Esse menu eu mesma criei. Ele é bem fácil de instalar e customizar suas cores. Claro, caso queira trocar suas cores, basta prestar atenção no CSS (explicarei no decorrer do post/tutorial).

Ele é igual a imagem principal do post (acima). Nas cores, azul marinho, vermelho, verde, entre outras, como mostrado na imagem. Saiba: Ele não é responsivo e não utiliza script. É puro CSS

Eu já criei algumas postagens sobre menus personalizados para blog. Acesse: Menu para Blog
Sempre recomendo: Faça um backup do seu template ao instalar qualquer tipo de implementação de códigos dentro do HTML do seu blog e claro, dê preferências a um blog de teste! Não saiba fazer Backup? Não tem problema, acesse: Como fazer um Backup ou restauração do seu blog.

  TUTORIAL


Base Menu / Estrutura

1 - Acesse o painel do seu blog
2 - Clique em  "Layout" e "Adicionar gadgets"
3 - Escolha a opção "Html/Javascript"
4 - Copie e cole o código no gadget e salve:

Clique e pegue o código

5 - Posicione logo abaixo do cabeçalho do seu blog e clique em "Salvar Organização"

2º Opção

Você também poderá adicioná-lo diretamente ao html do seu template. Basta colocá-lo abaixo de </header>


Linkando e organizando o menu
No código da estrutura do menu eu deixei destacado, com cores, cada local a ser trocado.
Neste fase você deve trocar:

Vermelho - São os nome principais do menu (aba). Aqueles que aparece na barra de navegação de cada menu.

Azul - São as sub-abas. Adicione os nomes desejado para cada aba.

Verde - É o local do link. Direcione para cada categoria desejada.

Não sabe linkar seu menu por categorias?
Acesse e aprenda: Como colocar marcadores no menu do Blog


Adicionando CSS / Estilo

Ainda no painel do blogger....

1 - Clique em "Modelo" e "Editar HTML"
2 - Clique em qualquer lugar dentro da área de código e pressione CTRL + F para para abrir a caixa de pesquisar
3 - Ao abrir a caixa, procure pelo código:

 
]]></b:skin>


4 - Assim que localizá-lo, logo ACIMA, cole o código:

Clique e pegue o código

5 - Visualize. Se tiver tudo certo, salve e pronto! Seu menu personalizado drop-down colorido já está em seu blog instalado.

Preste atenção

Para trocar as cores do menu, note que no código CSS, eu separei cada item e destaquei em vermelho onde você poderá trocar a cor do background (fundo) e as cores dos textos.

Note que cada aba segue o mesmo padrão de cores para cada item. As cores se repetem:

.nav .b2{border-bottom: 4px solid #C40210;} - Cor da borda em estado normal
.nav .b2 ul a{background:#C40210; color:#fff; } - Cor do fundo em estado normal

• Logo em seguida podemos alterar o estado hover de cada item (quando passamos o mouse em cima)

.nav .b2 ul a:hover{color:#c9c9c9;}  - Cor da texto em estado hover
.nav .b2 a:hover{color: #fff;background:#C40210;}  - Cor da fundo em estado hover

Entenderam? Espero que sim!

NOTA:
Este menu foi criado por mim, por tanto, você poderá utilizá-lo ou republicar em seu blog. DESDE QUE, dê os devidos créditos ao blog Quero Dicas. • Este menu também serve para a plataforma Wordpress, basta seguir: adicionar o Código CSS/ Estilo no arquivo style.css e a Base / Estrutura no arquivo index.php.

Quer mais Menus personalizados disponíveis aqui no Quero Dicas? Deixe nos comentários!
Beijinhos
Bia Barros In Service

Compartilhe


Nenhum comentário:

Postar um comentário


Que bom você reservou um tempinho para vir comentar. Você me deixa super feliz e desde já agradeço!

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 - Por favor, não adicione links externos nos comentários.

Beijinhos ♥

Amigos do Blog

agenda dos blogs Universo das Dicas

Ganhe Visitantes | Inscreva-se!

GeraLinks Linkicha Atoananet Linkirado
subir