quinta-feira, 14 de novembro de 2013

Tutorial: Menu Express

Adventure Time
Olá!
Como não temos nenhuma encomenda na página a postagem de hoje vai ser um tutorial.
É o Menu Express. É bem fácil de fazer.

Demonstração
Eu tirei esse print do blog de Tutoriais KW
Créditos: Tutoriais KW

1- Abra o HTML do seu blog e procure por: ]]></b:skin>
2- Acima dessa tag cole:
@font-face {font-family: "handy"; src: url('http://static.tumblr.com/lnvca6d/E6vm63ih7/pf_ronda_seven__1_.ttf');}.express {background-color: #CORDOFUNDO; color: #FFFFFF; display: block; width: LARGURADOMENUpx; height: 15px; line-height: 13px; font-family: handy; font-size: 8px; text-align: center; text-decoration: none; text-transform:uppercase; margin-right: 1px; margin-bottom: 1px; padding-top: 2px; text-align: center; -webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out;text-transform: uppercase;}.express:hover {opacity: 0.5; margin-left: -30px;}

Mude o que está em negrito!
Em #CORDOFUNDO adicione o código da cor que você quer que seja o fundo do menu. Veja essa tabela de cores.
Em LARGURADOMENU adicione um número, para ser a largura do menu.

3- Vá em Layout, ADD Gadgets, HTML/JavaScript e cole:
<center><a href="SEULINK" class="express">NOME DO LINK</a><a href="SEULINK" class="express">NOME DO LINK</a><a href="SEULINK" class="express">NOME DO LINK</a><a href="SEULINK" class="express">NOME DO LINK</a><a href="SEULINK" class="express">NOME DO LINK</a></center>

Mude o que está em negrito!
Se estiver tudo certo, salve.
Créditos pelos códigos: Garotas Cupcakes
Até mais, Ráh


Um comentário:

  1. Heeey! Sabe qual a largura? Eu sou um c* colocando essas coisas então, meio que, eu preciso sabeer ; ;
    Obrigada :33

    ResponderExcluir