Tutorial - Menu simples com gif

 

Boa tarde, gente.

Estou pensando em fazer um quadro pelo blog com algo do tipo Follow do Dia ou Follow da Semana, ainda não sei. Seria mais ou menos uma postagem onde eu indicaria um blog que conheci recentemente e super recomendo para vocês, em sua maioria, blogs novatos. Queria saber o que acham, não sei se vai ficar muita "divulgação" para os leitores, mas se vocês gostarem da ideia, podem me dizer se preferem do dia ou da semana? Ou quem sabe do mês, né? Estive pensando nisso, apenas para não termos só postagens de goodies e mais nada de interessante acontecendo. Enfim, eu achei postadora que preste para o blog, mas infelizmente eu não tenho o gadget de postadoras e nem pretendo fazer, pois vai me dar um trabalhão mapear tudo.

Bom, me pediram para postar um tutorial do menu que uso no gadget "Sempre por aqui". Esse menu é bem simples e eu mesma que fiz, pois estava precisando de uma coisa mais leve, sem ter aquele "enfeite" todo e tudo mais. Recomendo que usem em coisinhas assim e quem sabe em páginas de goodies? Fica super legal também, justamente por ser levinho. Para listar coisas na postagem também fica bem legal, mas o uso fica pela conta de vocês mesmo. Espero que gostem, é bem fácil de fazer.

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;

}

Não tem nada de importante para explicar, todos os códigos já são bem conhecidos. Naquela url ali é o link do seu gif, sendo o meu um ícone verde. Os códigos de cores #f1f1f1 referem-se a borda e #f3f3f3 refere-se ao fundo. O resto vocês acertam sozinhos, mas não recomendo que mudem.

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

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

Salve e estará tudo nos conformes. Espero que tenha entendido e gostado do tutorial.