7.4.13

Menu Simples com Gif



1. Vá até editar HTML e procure pela tag ]]></b:skin> e acima dela, cole:

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

Todos os códigos já são bem conhecidos. Naquela url ali é o link do seu gif, sendo o ícone verde, pode mudar para um coração ou o que preferir! Os códigos de cores #f1f1f1 referem-se a borda e #f3f3f3 refere-se ao fundo. O resto vocês sabem sozinhos, mas não recomendo que mudem,  assim está ótimo!


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

<div class="fantastic"> seu texto </div>
Para fica igual ao meu, da página de Tutoriais e Goodies, em vez de colocar o código no "HTML/JavaScript" coloque no "HTML" da "Página" do blog ;3

0 comentários:

Postar um comentário