Menu para Afiliados em 3D

janeiro 03, 2015


Oier, faz um tempinho que eu não posto tutorial, então para recompensar eu trago esse de como colocar um menu de afiliados em 3D, eu trouxe para três cores: o roxo, rosa e azul.

Vá no Layout do seu Blog, editar HTLM e procure por ]]></b:skin> e acima dele coloque os seguinte código para a cor que você deseja.

Modelo cor de roxa
menu3d1 {
color:#fff;
text-shadow: 1px 1px 1px #c3b7ce;
background: #d4cddb;
border: 1px solid #c8bfd1;
box-shadow: inset 1px 1px 0px #e6e4e8;
line-height:20px; margin:-1px;
margin-bottom:1px;
display: inline-block;
padding-top: 5px;
border-radius:2px;
text-align: center;
font-family: pf arma five;
font-size: 8px;
float: center;
padding:1px;
height: 20px;
width: 60px;
-webkit-transition-duration: .80s;
}
menu3d1:hover {
cursor:hand;
-webkit-transition-duration: .80s;text-align: center;
font-family: pf arma five; font-size: 8px; color:#b1a2bf;
text-shadow: 1px 1px 1px #fff;
}
Agora adicione o Gadget e nele coloque o código a baixo contendo os links:
<a href="link"><menu3d1>vaga</menu3d1></a>
<a href="link"><menu3d1>vaga</menu3d1></a>
<a href="link"><menu3d1>vaga</menu3d1></a>
Modelo cor de rosa
menu3d {
color:#fff;
text-shadow: 1px 1px 1px #fbb4e2;
background: #fdddf2;
border: 1px solid #fdbcd2;
box-shadow: inset 1px 1px 0px #fdeef8;
line-height:20px; margin:-1px;
margin-bottom:1px;
display: inline-block;
padding-top: 5px;
border-radius:2px;
text-align: center;
font-family: pf arma five;
font-size: 8px;
float: center;
padding:1px;
height: 20px;
width: 60px;
-webkit-transition-duration: .80s;
}
menu3d:hover {
cursor:hand;
-webkit-transition-duration: .80s;text-align: center;
font-family: pf arma five; font-size: 8px; color:#fbb4e2;
text-shadow: 1px 1px 1px #fff;
}
Agora adicione o Gadget e nele coloque o código a baixo contendo os links:
<a href="link"><menu3d>vaga</menu3d></a>
<a href="link"><menu3d>vaga</menu3d></a>
<a href="link"><menu3d>vaga</menu3d></a>
 Modelo cor azul
menu3d2 {
color:#fff;
text-shadow: 1px 1px 1px #bdd3d4;
background: #d5e3e4;
border: 1px solid #bdd3d4;
box-shadow: inset 1px 1px 0px #ecf2f2;
line-height:20px; margin:-1px;
margin-bottom:1px;
display: inline-block;
padding-top: 5px;
border-radius:2px;
text-align: center;
font-family: pf arma five;
font-size: 8px;
float: center;
padding:1px;
height: 20px;
width: 60px;
-webkit-transition-duration: .80s;
}
menu3d2:hover {
cursor:hand;
-webkit-transition-duration: .80s;text-align: center;
font-family: pf arma five; font-size: 8px; color:#b9d0d2;
text-shadow: 1px 1px 1px #fff;
}
 Agora adicione o Gadget e nele coloque o código a baixo contendo os links:
<a href="link"><menu3d2>vaga</menu3d2></a>
<a href="link"><menu3d2>vaga</menu3d2></a>
<a href="link"><menu3d2>vaga</menu3d2></a> 

You Might Also Like

2 comentários

  1. Eu tentei no meu blog de teste e funcicou direitinho, eh uma pena eu ter mudado o meu layout a pouco tempo, mas quando eu fizer outro eu vou colocar o blog de afiliados assim

    ResponderExcluir
  2. Esse é um dos meu favoritos, ate o meio do ano vou mudar o meu e estou montando o meu template dar um trabalhão kkkkkk

    ResponderExcluir

Like us on Facebook

Pinterest