07/08/2012

Tutorial: Menu Symmetry

||
-drwmania.tumblr.com-

Yo meus brigadeiros, trago mais um menuzinho desta vez não é feito por mim, mas sim pelo blog Sweet Poison, ele se chama Symmetry ele e bem maneiro, não teve como eu colocar imagem, mas caso queira dar uma bizoiada aqui esta.
Vá em seu HTML e procure por:

]]></b:skin>

Acima dele coloque o proximo codigo:

.symmetry {
background-color:#00CED1;
display: inline-block;
text-align: right;
color:#fff;
float: center;
margin:1px;
font-size: 9px;
font-family: tahoma;
text-transform:uppercase;
padding:1px;
height:10px;
width:200px;
box-shadow: 0 0px 0px #eee;
z-index:100;
display:inline-block;
}

.symmetry:hover {
background-color:#F5F5F5;
-webkit-transition-duration: 0.8s;
}

.symmetry2 {
background-color:#AFEEEE;
display: inline-block;
text-align: center;
color:#fff;
float: center;
margin:1px;
font-size: 9px;
font-family: tahoma;
text-transform:uppercase;
padding:1px;
height:10px;
width:120px;
box-shadow: 0 0px 0px #eee;
z-index:100;
display:inline-block;
padding-left:50px;
}

.symmetry2:hover {
background-color:#F5F5F5;
-webkit-transition-duration: 0.8s;
}

Salve e vá para Layout e lá adicione um gadget de HTML/Javascript e dentro coloque:

<a href="URL 1" class="symmetry">Link 1</a><br>
<a href="URL 2" class="symmetry2">Link 2</a><br>
<a href="URL 3" class="symmetry">Link 3</a><br>
<a href="URL 4" class="symmetry2">Link 4</a><br>
<a href="URL 5" class="symmetry">Link 5</a><br>

Nenhum comentário:

Postar um comentário

Hi guys!!!!
Hey aqui é Wendy, blogueira desde 2010! Viciada em animes, amante de livros e adora ver séries! Criei esse cantinho na intenção de ajudar na criação e personalização de blogs e sites.
Wattpad Facebook Tumblr Instagram