⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀Menu Cuddly

Hoje vou postar um Tutorial pedido pela dona do blog : Universo Lollipop

Estes tutorial foi tirado do blog : Sweet of Cherry , portanto todos os créditos serão para ele !

Para colocar este Menu :


Tem de ir em  Modelo >> Editar HTML >> depois clice em editar HTML e aperte Ctrl+F e procure por:

]]></B:SKIN>

Em cima desse código coloque isto :

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;} 

Depois mude como gostar e Guarde ! 

Agora vá em Layout >> Adicionar um Gadget >>  HTML Java/Script e cole o seguinte 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 do 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 página que colocou o link.

Espero que tenham gostado do Tutorial e não se esqueçam de visitar a página : Sweet of Cherry