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:
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
Que lindo esse menu! *-*
ResponderExcluirQue lindo de perfeito esse menu, amei mesmo! e o banner do blog está fantástico! ^0^/
ResponderExcluirAdolescente Nerd
Que lindooooooooooooooooooooooooooooooo! o/o/o/
ResponderExcluirAmei amei e reamei amando novamente! >o<'
Sua DIVA TALENTOSA! *o*
XOXO ~
Que lindo é super perfeiito ^^
ResponderExcluirhttp://my-dream-evilyn.blogspot.com.br/
Yo! Sou a Mandy-chan~
ResponderExcluirentão, o que eu faço quando a HTML do meu blog não tem ]]>:
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.
ExcluirSe quiser, pode add em um novo gadget html/javascript usando o primeiro codigo entre style e /style (ambos com os sinais <>)
Ameii o menu ♥ Vou usar!
ResponderExcluirPorque dá certo com os outros e não comigo?
ResponderExcluirR= Porque eu sou burra >.<
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
ExcluirBom, 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.