Tutorial: Menu hover deslizante

1 Vá até seu HTML e procure por ]]></b:skin>. Acima dessa tag cole esse código:

.heart {display : block; font-size: 10px;font-family: Tahoma;letter-spacing : 0;border-bottom : 1px solid #eee;background-repeat : no-repeat;   text-indent : 5px;vertical-align : middle;text-decoration : none; line-height : 15px;margin-bottom : 1px;padding-left : 3px; -webkit-transition: all 0.9s ease-out; -moz-transition: all 0.9s ease-out;border-left: solid #CORDABORDA;background: #CORDOFUNDO; color: #666 !important;}.heart:hover {display : block;text-decoration: none; vertical-align: middle;line-height: 15px;background: #CORDOFUNDOHOVER; border-left: solid #CORDABORDAHOVER; padding-left: 15px;}

 2 Coloque as cores que deseja onde esta em negrito, salve e vá para Layout.  Criem gadget de HTML/JavaScript, cole: 

<div class="heart"> Seu texto </div>

3 Escreva o que quiser onde esta escrito "Seu Texto", se quer adicionar mais e só repetir o código colocando um abaixo do outro, assim:

<div class="heart"> Seu texto </div><div class="heart"> Seu texto </div><div class="heart"> Seu texto </div>

Tutorial: Efeito Just Jump

1. Vá ate seu HTML e procure por ]]></b:skin> acima dele você cola o código abaixo:

.jump-isa:hover{-webkit-transform: translatey(-50%) rotate(-360deg) scale(1.3); border-radius: 50px;}.jumping-isa img{width: 50px;box-shadow:0px 0px 0px #ccc;-webkit-transition-duration: .80s;}.jumping-isa:hover img {opacity: 0.4;-webkit-transition-duration: .80s;}.jumping-isa img:hover {opacity: 1;-webkit-transition-duration: .80s;}

2. Apos colocar o código dentro do HTML, salve. Vá ate a pagina de layout e abra um gadget de HTML/JavaScript, dentro cole:

<div class="jumping-isa"><a href="Link" title="Nome"><img src="URL DA IMAGEM" class="jump-isa"></a><a href="Link" title="Nome"><img src="URL DA IMAGEM" class="jump-isa"></a><a href="Link" title="Nome"><img src="URL DA IMAGEM" class="jump-isa"></a><a href="Link" title="Nome"><img src="URL DA IMAGEM" class="jump-isa"></a><a href="Link" title="Nome"><img src="URL DA IMAGEM" class="jump-isa"></a><a href="Link" title="Nome"><img src="URL DA IMAGEM" class="jump-isa"></a></div>

Tutorial: Efeito Sunday

 1. Vá ate seu HTML e procure por ]]></b:skin>, acima dele cole:

   @-webkit-keyframes nen {    0% {-webkit-transform:  rotate(1deg);}    25% {-webkit-transform:  rotate(10deg);}    50% {-webkit-transform:  rotate(1deg);}    100% {-webkit-transform:  rotate(10deg);}    }    @-moz-keyframes nen {    0% {-webkit-transform:  rotate(1deg);}    25% {-webkit-transform:  rotate(10deg);}    50% {-webkit-transform:  rotate(1deg);}    100% {-webkit-transform:  rotate(10deg);}    }    @-o-keyframes nen {    0% {-webkit-transform:  rotate(1deg);}    25% {-webkit-transform:  rotate(10deg);}    50% {-webkit-transform:  rotate(1deg);}    100% {-webkit-transform:  rotate(10deg);}    }    .nen { -webkit-transition: .2s; -webkit-border-radius: 1px; -webkit-border-bottom-right-radius: 10px; -moz-border-radius: 1px; -moz-border-radius-bottomright: 10px; border-radius: 1px; border-bottom-right-radius: 10px;    box-shadow: 0px 1px #d15e93;}    .nen:hover { -webkit-animation: nen .2s alternate infinite linear; -webkit-border-radius: 1px;-webkit-border-bottom-right-radius: 5px;-moz-border-radius: 1px; -moz-border-radius-bottomright: 5px; border-radius: 1px; border-bottom-right-radius: 5px; }

2. Vá ate seu layout e crie um novo gadget de HTML. Dentro dele cole o código abaixo e arrume as parte em negrito:

<center><a href="LINK" title="Vaga"><img class="nen" src="http://i.imm.io/1aq9R.png" /></a>
<a href="LINK" title="Vaga"><img class="nen" src="http://i.imm.io/1aq9R.png" /></a>
<a href="LINK" title="Vaga"><img class="nen" src="http://i.imm.io/1aq9R.png" /></a></center>