Tutorial - Menu Animado

Olá gente! Tudo bem? Espero que sim, venho pedir desculpa pela minha ausência no blog, porém agora terá post todo dia até sábado, estou de férias então terei tempo de sobra. Bom, indo ao principal motivo do post, venho trazer um tutorial de menu animado, esse menu é muito legal e acho que vocês vão gostar! Confira abaixo o tutorial.


  • Vá em Modelo>Editar HTML>Prosseguir > expandir modelos de widgets 
  • Procure por ]]></b:skin> (Para procurar use CTRL+F)
  • Cole logo acima desta tag( ]]></b:skin>) o codigo :#links {position:absolute; overflow:hidden; top:10px; left:250px;}
#links {position:absolute; overflow:hidden;}
#links a {display:block; float:left; background:#; color:#fff; padding:10px 15px 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:#; color:#fff; font-weight:bold; text-transform:uppercase;}
  • Procure por </body> e logo acima coloque o 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>
Espero que tenham gostado do tutorial, se pegar o código comente.

        Nenhum comentário:

        Postar um comentário

        e e e e