Menu sidebar pixel

Ohayou, pessoal!

Então, depois de uma grande ausência, eu retorno com mais um menu que acho muito bonitinho - sidebar pixel - exclusivo do blog Black Words, que tem tutos bastante originais, na verdade. Como sempre, adaptei-o, e tive aquele trabalho desnecessário a mudar as cores, organização e a passar tudo para minúsculas, porque eu gosto dos meus tutos assim. Mas, claro, cada pessoa que personalize à sua maneira. Desta vez, a prévia com hover e tudo está no próprio post, basta clicar em ler mais para a ver. O tutorial está a seguir.

Prévia (www):

NOME NOME NOME

Tutorial:

Procure por

/b:skin

Acima cole:

pixel {

color: #cf8a72;

text-shadow: 1px 1px 1px #fff;

text-align: center;

font-family: silkscreen;

font-size: 10px;

padding: 2px;

float: center;

margin: 2px;

width: 22%;

border-radius: 3px;

background: #e6d1c8;

opacity: 1.0;

-webkit-transition-duration: .80s;

-moz-transition-duration: .80s;

-o-transition-duration: .80s;

transition-duration: .80s;

}

pixel:hover {

background: #eba4a4;

color: #fff;

text-shadow: 1px 1px 1px #db6060;

cursor: crosshair;

-webkit-transform: rotate(360deg);

moz-transform: rotate(360deg);

-o-transform: rotate(360deg);

-webkit-transition-duration: .80s;

-moz-transition-duration: .80s;

-o-transition-duration: .80s;

transition-duration: .80s;

}

Substitua as cores e tal. A seguir, vá a esquema, e adicione um gadget do tipo HTML/Javascript. Cole lá dentro o seguinte código:

<br />

<center><pixel>

<a href="LINK"><pixel>NOME</pixel></A>

<a href="LINK"><pixel>NOME</pixel></A>

<a href="LINK"><pixel>NOME</pixel></A>

</pixel>

</center>

Caso precise de mais fileiras, basta adicionar o código inteiro outra vez, ou então adicionar mais das 3 linhas centrais.

Era muito simples, não?