Menu para Afiliados em 3D

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 t...


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>

VOCÊ TAMBÉM PODE GOSTAR

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