Tutorial: Menu Simples com Gif

Fonte do tutorial

Oi gente! Falta uma hora e meia para o fim do mundo, e eu aqui postando tutorial... Que amor que eu sou né?

Achei um tuto bem legal no Kawaii World, de um menu bem simples. Achei um amor e acredito que sirva também como menu destaque. Sabe aqueles posts fixos chatos? Pois bem, é muito melhor colocar esse Menu Simples com Gif, ou o Menu Destaque, como eu mostrei no outro tutorial.

Confira o menu:

Quando a gente vai com o mouse em cima, aparece um mini gif na frente, como na imagem abaixo:

1. Para colocá-lo, basta ir em editar HTML e procurar pela tag ]]></b:skin>. Acima dela, cole o código abaixo:

@font-face {font-family: "handy"; src: url('http://static.tumblr.com/lnvca6d/E6vm63ih7/pf_ronda_seven__1_.ttf');} .fantastic { display : block; font-size: 8px; font-family: handy; text-transform: uppercase; line-height: 16px; margin-top: 2px; border-bottom : 1px solid #ebeaea; border-right : 1px solid #f1f1f1; border-left : 1px solid #f1f1f1; text-indent : 5px; vertical-align : middle; background: no-repeat left #f3f3f3; padding-left : 6px; padding-bottom : 2px; } .fantastic:hover { display : block; background: url('http://media.tumblr.com/tumblr_m0ohnsdlwO1qfjy56.gif') no-repeat left #f9f9f9; }

2. Em um gadget de HTML/JavaScript, cole o seguinte:

<div class="fantastic"> seu texto </div>

Fácil, não? Qualquer dúvida, perguntem nos comentários ou na cbox. E se usarem, creditem o Kawaii World e o All Of Place!