30. Tutorial - Menu Fluffy

Acho que vocês devem se perguntar por que meus posts estão numerados, né? Então. Isso é a contagem regressiva para os primeiros 50 posts do blog. Quando a gente chegar no cinquenta, eu paro com isso. Juro.

Bom, eu estou com muita vontade de postar um tutorial de como fazer layout + personalizações, mas a preguiça é tanta, mas tanta > 3 < que não dá. Quando eu ficar ativa de novo, eu posto.

Eu queria fazer um menu pra vocês, mas a criatividade pra isso me deixou há alguns dias. Como eu estou sem criatividade, vou postar um menu bem fofo do Black Cherry pra vocês. Ele cham menu Fluffy, é esse aqui ó:

super fofo né? Vamos aprender?

Como sempre, cole esse código em cima de [[</b:skin>:

@font-face { font-family: Pf Arma Five ; src: url('http://static.tumblr.com/nzkyikd/mELmnr7zm/pf_arma_five.ttf') }
.fluffy {
background: #c1b2e8; /* cor do fundo */
padding: 6px;
margin: 1px;
text-align: center;
font-family: Pf Arma Five;
font-size: 8px;
box-shadow: inset 0px 0px 8px #9b80d2, 0px 0px 5px #9b80d2; /* sombras da caixa */
-webkit-box-shadow: inset 0px 0px 8px #9b80d2, 0px 0px 5px #9b80d2; /* sombras da caixa */
-moz-box-shadow: inset 0px 0px 8px #9b80d2, 0px 0px 5px #9b80d2; /* sombras da caixa */
outline-offset: -3px;
outline: 1px dashed #fff; /* cor da linha pontilhada */
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
-o-border-radius: 2px;
}
.fluffy1 {
background: #fe9ab9; /* cor do fundo */
padding: 6px;
margin: 1px;
text-align: center;
font-family: Pf Arma Five;
font-size: 8px;
box-shadow: inset 0px 0px 8px #fd7eb4, 0px 0px 5px #fd7eb4; /* sombras da caixa */
-webkit-box-shadow: inset 0px 0px 8px #fd7eb4, 0px 0px 5px #fd7eb4; /* sombras da caixa */
-moz-box-shadow: inset 0px 0px 8px #fd7eb4, 0px 0px 5px #fd7eb4; /* sombras da caixa */
outline-offset: -3px;
outline: 1px dashed #fff; /* cor da linha pontilhada */
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
-o-border-radius: 2px;
}

O que vocês podem alterar já está no próprio código. Agora, cole isso onde quiser que apareça:

<div style="float: left; width: 20%">
<a href="LINK" title="TÍTULO DA TOOLTIP"><div class="fluffy">Nome do link</div></a>
</div>
<div style="float: left; width: 20%">
<a href="LINK" title="descrição"><div class="fluffy1">Nome do link</div></a>
</div>
<a href="LINK" title="TÍTULO DA TOOLTIP"><div class="fluffy">Nome do link</div></a>
</div>
<div style="float: left; width: 20%">
<a href="LINK" title="descrição"><div class="fluffy1">Nome do link</div></a>
</div>
<a href="LINK" title="TÍTULO DA TOOLTIP"><div class="fluffy">Nome do link</div></a>
</div>
Se você quiser adicionar mais, só repetir esse código:
<a href="LINK" title="TÍTULO DA TOOLTIP"><div class="fluffy">Nome do link</div></a>
</div>
<div style="float: left; width: 20%">
<a href="LINK" title="descrição"><div class="fluffy1">Nome do link</div></a>
</div>

Esse menu é indicado pra sidebar, como um menu de tags ou afiliados. Mas você que sabe.

Espero que tenham gostado - se reblogar, credite ao Black Cherry!