Menu com Texto Colorido


Oie...no layout anterior usei um menu colorido bem simples de fazer e agora o compartilho com vocês. Eu o fiz todinho com html e css, baseado nesse outro tutorial.


Para usar é só colar esse código em um novo gadget HTML/JavaScript, que aconselho que fique abaixo do cabeçalho:
<style>
a.mc {/* primeira cor */
width: 100px;/* largura */
height: 100px;/* altura */
color:#C0F6F6;/* cor do texto */
font-family: 'Rouge Script', cursive;/* tipo de fonte */
font-size: 75px;/* tamanho da fonte */
text-shadow: 1px 2px 3px #1CD4D5;/* sombra do texto */
padding-left:5px;
padding-right:5px;
padding-top: 2px;
padding-bottom: 2px;
-webkit-transition:2s;
}
a.mc:hover {/* muda a cor do texto quando passar o mouse */
text-decoration: none;
color: #C1E3F2;
-webkit-transition:2s;
}
a.mc1 {/* segunda cor */
width: 100px;
height: 100px;
color:#FADDE9;
font-family: 'Rouge Script', cursive;
font-size:75px;
text-shadow: 1px 2px 3px #FF73A5;
padding-left:5px;
padding-right:5px;
padding-top: 2px;
padding-bottom: 2px;
-webkit-transition:2s;
}
a.mc1:hover {
text-decoration: none;
color: #fcc2c2;
-webkit-transition:2s;
}
</style>
<div style="position:absolute;width:100%; height: auto; margin-left: 0px; top: 400px;">
<a class='mc' href='#'>Home <span style='font-size: 12px'>&hearts;</span></a>
<a class='mc1' href='#'>About <span style='font-size: 12px'>&hearts;</span></a>
<a class='mc' href='#'>F.A.Q <span style='font-size: 12px'>&hearts;</span></a>
<a class='mc1' href='#'>Afiliados <span style='font-size: 12px'>&hearts;</span></a>
</div> 

Nos códigos já coloquei o que cada um faz; ali onde tem um top: 400px, você muda o valor conforme precisar distanciar o menu do topo, quanto maior o número, mais distante do topo. Onde tem "#", mude para um link, troque os nomes Home, About, F.a.q, Afiliados, pelos nomes dos links que adicionar. A fonte usada é a Rouge Script, do Google Web Fonts. Espero que gostem.






Postar um comentário

6 Comentários

  1. Hola :) ...
    Podrías hacer un tutorial de como poner los botones de compartir personalizados que hay debajo de cada entrada ? http://i1355.photobucket.com/albums/q710/Leyfzalley_Gonzalez_Melendez/Captura_zps67534961.png

    ResponderExcluir
    Respostas
    1. Hola!! Estos botones ya estaban en la plantilla (la descargue aqui); cambié las imágenes; pero voy a hacer un post sobre cómo poner botones personalizados ok?
      Besitos.

      Excluir
    2. Nossa Roberta até seguidores de outros países , que chique te acompanho desde o começo de 2013 mais tenho Google + a pouco tempo então agr eu te sigo oficialmente , lindoooo o seu template sempre aprendendo com tigo, usei este tutorial no meu template e ficou maravilhoso , só que eu fiz personalizado para outra pessoa !!! Espero que ela mantenha os créditos do final ( eu coloco o endereço dos blogs q me ajudaram e meu crédito porque algumas coisas são minhas ... rs ta chic em !!!!

      Excluir
    3. Obrigada Alice. Eu fico muito muito contente que esteja aqui também e que sejam úteis os tutoriais :3 Bju

      Excluir
  2. Amei vou ver se dá certo no meu.. ♥

    ResponderExcluir

Muito obrigada por seu comentário e por sua presença! Ambos são super importantes para mim.

Apenas peço que:
- Comente a vontade, dê sua opinião, faça críticas, esclareça suas dúvidas e dê suas sugestões sobre o assunto referente às postagens;
- Use um vocabulário livre para todas as idades;
- Não ofenda ninguém em hipótese alguma.

Os comentários são moderados e não são permitidos comentários de pessoas que não se identifiquem. Algumas dúvidas podem ser previamente esclarecidas na F.A.Q, assim como créditos e outras coisas.

Por favor, entrem em contato por meio das redes sociais também para dúvidas, sugestões, pedidos ou outros:
Facebook - Twitter - Deviantart

up