Menu Stretch

Olá! Já faz um tempo, né? Não vou irritar vocês com as minhas desculpas, pois acredito que todos você já estão cansados disso.

Eu preciso avisar que o blog de testes está enfrentando problemas que eu, mesmo depois de horas, não consegui consertar. Se encontrarem algum problema em algum post, me avisem, assim posso passa-lo para outro blog.

Indo direto ao ponto... eu fiz alguns menus nesses últimos dias. Alguns ficaram horríveis, outros até ficaram decentes. Resolvi postar o meu favorito para "estrear" esse template da maneira certa.

(Preview)

1 - Aperte F3 e procure por ]]>< . Acima cole o código abaixo:

#ola-isa:hover #menu-stretch-isa{
opacity: 1;
}
#menu-stretch-isa{
opacity: 1; /* Opacidade do menu */
position:absolute;
-webkit-transition: all .60s ease-in-out;-0-transition: all .60s ease-in-out;
-moz-transition: all 1s ease-in-out;-ms-transition: all .60s ease-in-out;transition: all .60s ease-in-out;
margin-left: 7px; /* Move o menu para os lados */
margin-top: -232px; /* Move o menu para cima ou para baixo */
}
#menu-stretch-isa a {
color: white; /* Cor do texto */
margin: 1px;
float:left; /* Posição */
font-family: trebuchet ms; /* Nome da fonte */
font-size: 10px; /* Tamanho da fonte */
overflow:hidden;
height: 10px; /* Altura - Não mude ser for manter a fonte 10 */
padding-top: 3px;
padding-bottom: 6px;
padding-left: 3px;
padding-right: 3px;
background: pink; /* Cor do fundo */
border-radius: 3px; /* Bordas arredondadas */
width: 9px; /* Deixa apenas o coração a mostra */
text-decoration:none;
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
transition-duration: 1s;}
#menu-stretch-isa a:hover {
width: 100px; /* Deixa o resto do título a mostra */
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
transition-duration: 1s;}

2 - Após visualizar e salvar, vá em 'Layout' - 'Adicionar Gadget' - 'HTML/JavaScript' e cole este código:

<div id="ola-isa">
<img src="IMAGEM" alt="image" />
<div id="menu-stretch-isa">
<a href="/">♥ FEITO</a><br /><p>
<a href="/">♥ POR</a><br /></p><p>
<a href="/">♥ ISA</a><br /></p><p>
<a href="/">♥ SOUZA</a><br /></p><p>
<a href="/">♥ CREDITE</a><br /></p><p>
<a href="/">♥ SE</a><br /></p><p>
<a href="/">♥ USAR</a><br /></p><p>
</p></div>
</div>

+ + +

Se tiverem dúvidas ou pedidos, vá a minha ask.