Tutorial - menu useful

Fiquei feliz por gostarem da postagem anterior, olha, gente vou dizer uma coisa para vocês, acho que fui bem na prova e  devo ter tirado uns oito pelos meus cálculos, pelo menos hoje a prova foi meia fácil já a de ontem eu chutei tudo, a pior prova foi a de matemática, deu branco na hora mas pelo menos algumas tenho certeza que acertei, e vocês como foram nas provas?  espero que tenham ido bem, em todas, porque no meu caso é raro acontecer isso shsushu.O que trago hoje é um menu bem básico para vocês, e olha, é meu primeiro menu então eu vou entender se não gostarem, agora sem enrolações, vamos a postagem?
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

14 comentários:

  1. Que bom que você se deu bem na prova, psé Vanessa, não é apenas você que fica com branco na cabeça na hora de fazer a prova de matemática, dá muito nevosismo ç3ç' Como eu não comecei minhas últimas provas ainda, eu vou guardar suas boas sortes aqui AHUSASHU' Que menu mais lindo gente >o< #xonei

    Entre no mundo das estrelas - capture stars (...)

    ResponderExcluir
  2. Que menu mais fofo *-*

    Counting Feelings | counting-feelings.blogspot.com.br

    ResponderExcluir
  3. Nunca vi menu tão fofo :o talvez eu use no próximo lay, que aliás já estou fazendo! Lógico que colocarei créditos :3

    htmlandresources.blogspot.com

    ResponderExcluir
  4. Que menu perfeito! *-* And... Fico feliz que tenha gostado do "Lado bom" do seu blog, ele é realmente lindo :3

    Estou seguindo-te -qq, eu ficaria muito feliz se você pudesse seguir o meu novo blog, ou somente visitar, também me alegraria :3
    Beijos!
    interesses-sutis.blogspot.com.br

    ResponderExcluir
  5. Na maioria das provas eu tirei 8,9 por aí
    Mas tem provas que tirei 5 chutando por causa que esses professores tem costume de passar as provas sem avisar e ainda de coisa que eu num lembro de nada, qq. Achei muito fofinho o menu, beijos ~

    http://blog-a-little-of-each.blogspot.com.br/

    ResponderExcluir
  6. Ele é bem lindo, vou até salvar u3u.

    World Of Thel ~ ♥

    ResponderExcluir
  7. awnnnn alem de fofo ocupa pouco espaço.....adorei talvez eu use........

    http://louca-por-html.blogspot.com.br/ kissssuss

    ResponderExcluir
  8. Belo tutorial ...

    wesleyferreirabr.blogspot.com

    ResponderExcluir
  9. É bem lindo e fofo <3 \o/ amei ^^

    breaking-r.blogspot.com.br

    ResponderExcluir
  10. Lindo, talvez eu use no próximo template, só vou encher ele de vermelho, pode? rsrs (louco por lays, vermelhos e marrons)

    ResponderExcluir