terça-feira, 2 de outubro de 2012

Menu Animado

Creditos: Art Design Encomendas
Olá  pessoal hoje vou ensinar aqui a fazer Menu Animado que esta no do blog !!



 Aqui esta o codigo
#links {position:absolute; overflow:hidden; top:10px; left:10px;}
#links {position:absolute; overflow:hidden;}
#links a {display:block; float:left; background:#D4DA67; color:#fff; padding:10px 25px 10px 25px; margin-left:7px; font-family:arial; font-size:18px; font-weight:bold; text-transform:uppercase; text-shadow:1px 1px #000; -moz-transition-duration:0.8s; -webkit-transition-duration:0.8s;}
#links a:hover {background:#95A03B; color:#fff; font-weight:bold; text-transform:uppercase;} 
Como fazer: 

1. Procure por (aperte F2 ou CTRL+F) ]]></b:skin>.
2. Imediatamente acima, coloque o código do menu escolhido.
3. Estão vendo o top:10px e o left:10px bem no início do código? É isso que vai definir onde o menu vai ficar posicionado. Mude o 10 de acordo com a sua necessidade.
 4. Mude agora as cores, fontes, tamanhos etc. Fica bem fácil mudar as cores. Atenção: Não mude absolutamente nada além das cores se não souber mexer com HTML.
5. Procure por </body> e logo acima cole o seguinte código:

<div id="links"> 
<a href="http://www.blogger.com/link">nome</a> 
<a href="http://www.blogger.com/link">nome</a> 
<a href="http://www.blogger.com/link">nome</a> 
<a href="http://www.blogger.com/link">nome</a> 
<a href="http://www.blogger.com/link">nome</a> 
<a href="http://www.blogger.com/link">nome</a>
 </div>

2 comentários: