Menu Cuddly

|| ||

Olá gente linda!!! Depois daquilo que eu considero "palhaçada de um desocupado" eu até pensei em desistir do blog, mas devido a vários comentários, pedindo pra não desistir, então eu decidi continuar com o blog. E muito obrigada a todos!!!
O blog da semana é o Chocolate Quente que está com um layout lindo de anime e tem como dona a Valentina Yoksun e no momento o blog tem 83 seguidores.
Hoje vim trazer o tutorial de um menu que eu uso aqui no blog, esse tutorial foi pedido lá na ask.
O nome do menu é Cuddly, mas não sei quem criou, então se souberem quem criou me avisem.
Clique aqui para visualizar o menu.

Para colocar o menu vá em Modelo>> Editar HTML>> Clique dentro da caixa de HTML e aperte Ctrl+F e procure por:
]]></b:skin>
E acima dessa tag cole o seguinte código:
cuddly {
margin-top: 8px;
color:#fff;
text-shadow: 1px 1px 1px #ff97c5;
background:#ffcbe1;
border: solid 1px #ff97c5;
box-shadow: inset 0 0 6px #f5f5f5, 0px 1px 1px#FCB3BC;
margin:+2px;
margin-left:0px;
display: inline-block;
text-align: center;
font-family: PF Arma Five;
font-size: 8px;
float: center;
padding:5px;
height: 8px;
width: 43px;
-webkit-transition-duration: .80s;
}
cuddly:hover {
cursor:hand;
background:#F9F9F9;
border: solid 1px #ffcbe1;
box-shadow: inset 0 0 6px #DCDCDC, 0px 1px 1px #DCDCDC;
text-align: center;
font-family: PF Arma Five; font-size: 8px;
color:#ff97c5;
text-shadow: 1px 1px 1px #f5f5f5;
-webkit-animation: cuddly 1.3s;-moz-animation: cuddly 1.3s;-ms-animation: shake 1.3s;
}
@-webkit-keyframes cuddly {
0% {transform: rotate(0deg); -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg);}
25% {transform: rotate(5deg); -webkit-transform: rotate(5deg); -moz-transform: rotate(5deg); -o-transform: rotate(5deg); -ms-transform: rotate(5deg);}
50% {transform: rotate(-5deg); -webkit-transform: rotate(-5deg); -moz-transform: rotate(-5deg); -o-transform: rotate(-5deg); -ms-transform: rotate(-5deg);}
75% {transform: rotate(5deg); -webkit-transform: rotate(5deg); -moz-transform: rotate(5deg); -o-transform: rotate(5deg); -ms-transform: rotate(5deg);}
100% {transform: rotate(0deg); -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg);}
}
.cuddly {-webkit-transition: .9s; border-radius: 5px;}
.cuddly:hover {-webkit-animation: useful .9s alternate ease;}
Mude o que for preciso e depois Salve!

Agora vá em Layout>> Adicionar um Gadget>> HTML Java/Script e cole esse código:
<div style="right: -25px; margin-top: -85px; position: absolute; width: 20px;"><br />
<a href="LINK"><cuddly>NOME</cuddly></a>
<a href="LINK"><cuddly>NOME</cuddly></a>
<a href="LINK"><cuddly>NOME</cuddly></a>
<a href="LINK"><cuddly>NOME</cuddly></a>
</div>
Explicações desse código:
Onde está escrito (right: -25px;) é a direção do menu, se você aumentar o valor utilizando o sinal (-) ele vai para a esquerda e se você diminuir o valor utilizando o sinal (-) ele vai para a direita;
Onde está escrito (margin-top: -85px;) é também a direção do menu, mas se você aumentar o valor utilizando o sinal (-) ele sobe e se você diminuir o valor dele utilizando o sinal (-) ele desce;
Onde está escrito LINK é onde você irá colocar a URL da página e onde está escrito NOME é o nome da sua página;

Espero que tenham gostado.
Créditos: Vanessa Tutoriais