Follow Us @soratemplates

terça-feira, 28 de maio de 2013

Menu Colorido (Horizontal)

Oie...vocês se lembram quando mostrei aqui no blog e lá no Candylland como usar um menu colorido na vertical? Pois então, hoje vou mostrar como usar um menu colorido na horizontal, obtendo o resultado abaixo:
Facebook Twitter Tumblr Google+

Vamos lá!
1. Adicione o código abaixo em seu HTML, antes de ]]></b:skin>:
a.mc {
width: 100px;
height: 100px;
color:#ffffff;
background: #FFD6E3;
box-shadow: 3px 3px 3px #fee;
border-radius:5px;
font-size:12px;
text-align:center;
text-shadow: 1px 2px 3px #fff;
padding-left:5px;
padding-right:5px;
padding-top: 2px;
padding-bottom: 2px;
-webkit-transition:2s;
}
a.mc:hover {
text-decoration: none;
background: #fcc;
-webkit-transition:2s;
}
a.mc1 {
width: 100px;
height: 100px;
color:#ffffff;
background: #C1E3F2;
box-shadow: 3px 3px 3px #fee;
border-radius:5px;
font-size:12px;
text-align:center;
text-shadow: 1px 2px 3px #fff;
padding-left:5px;
padding-right:5px;
padding-top: 2px;
padding-bottom: 2px;
-webkit-transition:2s;
}
a.mc1:hover {
text-decoration: none;
background: #fcc;
-webkit-transition:2s;
}
a.mc2 {
width: 100px;
height: 100px;
color:#ffffff;
background: #E3AAD6;
box-shadow: 3px 3px 3px #fee;
border-radius:5px;
font-size:12px;
text-align:center;
text-shadow: 1px 2px 3px #fff;
padding-left:5px;
padding-right:5px;
padding-top: 2px;
padding-bottom: 2px;
-webkit-transition:2s;
}
a.mc2:hover {
text-decoration: none;
background: #fcc;
-webkit-transition:2s;
}
a.mc3 {
width: 100px;
height: 100px;
color:#ffffff;
background: #E1F5C4;
box-shadow: 3px 3px 3px #fee;
border-radius:5px;
font-size:12px;
text-align:center;
text-shadow: 1px 2px 3px #fff;
padding-left:5px;
padding-right:5px;
padding-top: 2px;
padding-bottom: 2px;
-webkit-transition:2s;
}
a.mc3:hover {
text-decoration: none;
background: #fcc;
-webkit-transition:2s;
}

2.Salve. Onde desejar que o menu apareça, cole o seguinte código:
<a class="mc" href="URL-LINK-1">NOME DO LINK</a>
<a class="mc1" href="URL-LINK-2">NOME DO LINK</a>
<a class="mc2" href="URL-LINK-3">NOME DO LINK</a>
<a class="mc3" href="URL-LINK-4">NOME DO LINK</a>

Pronto! Espero que gostem e beijus ;3
Fonte: http://exodusuoshi.blogspot.com

9 comentários:

  1. Que lindo de perfeito esse menu, amei mesmo! e o banner do blog está fantástico! ^0^/

    Adolescente Nerd

    ResponderExcluir
  2. Que lindooooooooooooooooooooooooooooooo! o/o/o/
    Amei amei e reamei amando novamente! >o<'
    Sua DIVA TALENTOSA! *o*
    XOXO ~

    ResponderExcluir
  3. Que lindo é super perfeiito ^^



    http://my-dream-evilyn.blogspot.com.br/

    ResponderExcluir
  4. Yo! Sou a Mandy-chan~
    então, o que eu faço quando a HTML do meu blog não tem ]]>:

    ResponderExcluir
    Respostas
    1. Oi :3 Entao, geralmente os novos modelos do blogger sempre tem o /b:skin. Nos modelos classicos ou no tumblr, add o primeiro codigo antes de /style.
      Se quiser, pode add em um novo gadget html/javascript usando o primeiro codigo entre style e /style (ambos com os sinais <>)

      Excluir
  5. Porque dá certo com os outros e não comigo?
    R= Porque eu sou burra >.<

    ResponderExcluir
    Respostas
    1. Imagina! Todo mundo acerta e erra várias vezes em tudo o que faz; se vc visse quanto tempo demorei para entender alguns códigos T.T
      Bom, nesse caso, é só procurar (Ctrl+F) no HTML do seu template por /b:skin; quando encontrar, cole acima dele o primeiro código e salve.
      Aí cole o segundo código onde deseja usar, tipo no HTML da postagem ou em um gadget Html/JavaScript, que fica em Layout.

      Excluir

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 - Google+ - Deviantart