Tutorial - Menu Express

 

Boa tarde, pessoal.

Desculpem por não ter postado mais cedo aqui, mas acontece que eu fui levantar da cama muito tarde e por isso não deu tempo. Vou tentar compensar e postar mais para vocês hoje. Sobre o Pedro que deve ser o assunto do momento, eu tive uma conversa com ele e posso afirmar que o garoto está realmente arrependido e que aquele sorteio tinha possibilidades de não ser uma farsa. Ele me disse que iria dar o domínio já pronto, sem a pessoa precisar colocá-lo como administrador. Se desculpou e tudo mais e disse que criaria um novo blog. Em outro post eu trago mais informações sobre isso.

Para nossa primeira postagem do dia trago mais um tutorial. Dessa vez é de um menu também bem simples, mas que tem um efeito super lindo que transformei do tumblr ODH. Geralmente menus simples são feitos para a pessoa editar e usar somente o efeito que ele tem e eu acho que se enquadra nesse caso. Ao passar o mouse o menu anda para o lado e diminui sua opacidade, gostei bastante. 

1. Procure por ]]></b:skin> e acima da 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;}

Edite as informações necessárias e salve.

2. Em um gadget de HTML/JavaScript, cole:

<center><a href="SEULINK" class="express">Inicio</a>

<a href="SEULINK" class="express">About</a>

<a href="SEULINK" class="express">Goodies</a>

<a href="SEULINK" class="express">Tutoriais</a>

<a href="SEULINK" class="express">Créditos</a></center>