Tutorial - menu useful

Fiquei feliz por gostarem da postagem anterior e vou dizer uma coisa para vocês, acho que fui bem na prova e  devo ter tirado uns oito pelos meus cálculos. O que trago hoje é um menu bem básico para vocês.

PREVIEW

Para colocar no seu blog procure por ]]></b:skin> e acima adicione:

useful {
background: url("http://i.imgur.com/E79ii5z.png") no-repeat;
margin-top: 8px;
display: inline-block;
-o-transition-duration: .70s;
-ms-transition-duration: .70s;
-moz-transition-duration: .70s;
-webkit-transition-duration: .70s;
width: 52px; /* Tamanho de cada menu */
height: 9px;
font-size: 11px;
font-family: arial;
color: #fff;
text-align: center;
cursor: pointer;
}
useful:hover {
background: url("http://static.tumblr.com/no9dwxu/WTumg14zd/tumblr_m0nilmg8p01qe5v0r.png") no-repeat;
width: 37px;
opacity: 0.99; /* NADA */
-webkit-animation: useful 1.3s;-moz-animation: useful 1.3s;-ms-animation: useful 1.3s;
}
@-webkit-keyframes useful {
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);}
}
.useful {-webkit-transition: .9s; border-radius: 5px;}
.useful:hover {-webkit-animation: useful .9s alternate ease;}

Depois é so editar os destacados, o primeiro é o coração normal e outro destacado o segundo em hover.

Para usar no seu blog vá em layout> adicionar um Html/java script e coloque:

<div style="left: -14px; margin-top: -8px; position: absolute; width: 20px;"><br />
<a href="Link" title="TITULO QUE APARECE QUANDO PASSA O TOOLTIP EM CIMA"><useful></useful></a><br />
<a href="Link" title="TITULO QUE APARECE QUANDO PASSA O TOOLTIP EM CIMA"><useful></useful></a><br />
<a href="Link" title="TITULO QUE APARECE QUANDO PASSA O TOOLTIP EM CIMA"><useful></useful></a><br />
<a href="Link" title="TITULO QUE APARECE QUANDO PASSA O TOOLTIP EM CIMA"><useful></useful></a><br />
<a href="Link" title="TITULO QUE APARECE QUANDO PASSA O TOOLTIP EM CIMA"><useful></useful></a></div>

 Onde está -14 é o tanto que você quer que vá para esquerda, quando mais alto o numero mais para esquerda vai. Caso sua sidebar esteja do lado direito altere o sinal de - para + assim quando você aumentar o numero o menu vai para o lado direito. Altere se for necessário. Se usar credite