Tutorial - Menu "Slow"

 

Yoo!

Eu gosto muito de postar menus para vocês e vou tentar postar mais, pois quando vocês se empolgam aparecem mil blogs com a mesma coisa.

Hoje eu trouxe um menu bem simples, justamente pra quem tem um blog muito "lotado" ou um pouco mais delicado.

Querem aprender a fazer? Clique em 'Leia Mais' ~  

1. Vá em Design >  Editar HTML e procure por "]]></b:skin>". Acima da tag, cole

    .Slowly {
    width:210px;
    }
    Título {
    background:#eaeaea;
    color: #e2c1d2;
    float:left;
    padding:5px;
    text-align:center;
    width:200px;
    -webkit-transition-duration: .95s;
    font: bold 14px tahoma;
    letter-spacing:3px;
    border-radius:3px 3px 0px 0px;
    }
    Back {
    background:#eaeaea;
    float:left;
    padding:4px;
    width:202px;
    -webkit-transition-duration: .95s;
    border-radius:0px 0px 3px 3px;
    }
    Slow {
    background:#fad0de;
    color: #ffffff;
    float:left;
    width:206px;
    padding:2px;
    letter-spacing:2px;
    text-align:center;
    -webkit-transition-duration: .45s;
    font: bold 11px georgia;
    text-shadow: 2px 1px 2px #909090;
    }
    Slow:hover {
    background:#e2e2e2;
    -webkit-transition-duration: .50s;
    text-shadow: 2px 1px 2px #bfabab;
    }




- Entendendo o código:

Título { refere-se as configurações do título, aquela partezinha cinza do começo.
Back { refere-se aparte cinza de baixo.
Slow { refere-se ao menu em si.
Slow:hover { refere-se ao menu quando passa o mouse.

Após configurar da forma que deseja, adicione um gadget de HTM/JavaScript e nele, cole:

    <center><div class="Slowly">
    <título>Navegue</título><a href="LINK"><slow>HOME</slow></a><a href="LINK"><slow>TUTORIAL</slow></a><a href="LINK"><slow>SOBRE</slow></a><a href="LINK"><slow>EXTRAS</slow></a><a href="LINK"><slow>QUEM SOMOS</slow></a><a href="LINK"><slow>AGRADECIMENTOS</slow></a><back><p></p></back>
    </div></center>