Menu Folded Sheet

Olá senhorias e senhorios! Como vai esta vida atada de vocês? Senti falta de postar aqui do blog. Confesso ter dado aquela sumida básica (ponhem básica nisso¬¬), mas eu já estou de volta. Bom, neste meu curto - ou não - sumiço no blog, eu havia parado para pensar em quanto eu sou desorganizada e irresponsável. Sim, eu sou muito irresponsável. Digamos que eu não cumpro com o que prometo, e como alguém já deve ter lido sobre mim (quem não leu corre lá... mentira corre não, você não vai encontrar nada) eu sou muito preguiçosa e acabo desistindo fácil das coisas. Sei que não podemos desistir assim e PÁ, mas é questão de semissedentário mental. ─ estou pensando em mudar o layout, o que acham?!

Hoje vim com um tutorial para que possam usar um menu igual ao do blog. 


Vá em Modelo  > Editar HTML;
 Expanda a caixa do código (clicando dentro dela);
 Pressione Ctrl+F ou F3 em seu teclado;
 Procure (como sempre) por ]]></b:skin>
 Acima cole este código:

/* Menu folded sheet -- Blog Soshyu */
/* Menu em estado normal */
#Cup {
float:left; /* Posição, não altere */
background:#c3e3c3; /* Cor do fundo do menu normal */
margin: 2px; /* Espaçamento interno */
width: 70px; /* Largura do menu */
font-size: 14px; /* Tamanho da fonte */
color:#FFF; /* Cor da Fonte */
text-align:center; /* Posicionamento do texto */
text-decoration: none; /* decoração abaixo do texto */
PADDING:10PX; /* Espaçamento de um menu para o outro */
font-family: 'Julius Sans One'; /* Tipo de fonte */
-moz-transition: all 0.5s ease-out; /*Duração do tempo em que ele ficará em hover, não altere */
-webkit-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
/* Menu em Hover */
#Cup:hover {
-webkit-border-top-left-radius: 20px;
-moz-border-radius-topleft: 20px;
border-top-left-radius: 20px;
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-bottomright: 20px;
border-bottom-right-radius: 20px;
-moz-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}

Modifique com sua preferencia, visualize para ver se está tudo okay  e Salve.

• Nota: Caso queira que o modo hover mude (como: cor, fonte, etc) é só colocar os mesmo valores do modo ''normal'' para o modo ''em hover'' e substituir os valores.

 Agora, vá em Layout
 Adicione um Gadget HTML/JavaScript.
 Nele cole:

<div style="position: absolute; margin-top: -50px; right: -8px;">
<a href="LINK" id='Cup'>NOME</a>
<a href="LINK" id='Cup'>NOME</a>
<a href="LINK" id='Cup'>NOME</a>
<a href="LINK" id='Cup'>NOME</a>
</div>

PRESTAI ATENÇÃO: A primeira tag (onde deixei em negrito os números) corresponde a posição do menu.

 Em ''-50px'' trata-se de move-lo ao topo. Quanto menor o número (negativo) mais alto ele ficará. Quanto maior  mais baixo ele ficará.
 E em ''-8px'' a posição de move-lo para os lados. Vale a mesma regrinha <3

Não é tão difícil, é só ir testando de acordo com seu layout. Deixando claro que, CSS é só na base do teste.

Espero que tenham gostado. um beijo, um cheiro, um queijo e TCHAU♥