27.12.14

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?

2 comentários:

  1. Gostei muito do tutorial, Ami posso chama la assim? eu adorei o blog os gadgets são criativos e eu curti muito vou acompanhar muito seu blog.. eu tenha uma duvida a maioria desses códigos são acima de skin né? eu nao sei se eu colo errado ou coisa parecida mas meu blog.. alguns acabam não pegando o código por mais que o layout esteja "virgem" os códigos de imagem geralmente são os que falham, e os de menus tb :(

    pinkmushrooom.blogspot.com (esta reformando)

    ResponderEliminar
  2. O efeito é legal, mas se fosse usar eu retiraria esse looping inicial...
    Mas, ficou bem elaborado. Parabéns!
    Abraço.

    ResponderEliminar