26 de jun de 2013

Tutoriais - Menu Semi-transparente


Oi Gente, eu demorei para postar hoje porque eu estava finalizando o layout da linda Gi, visitem o blog dela: Gi Viaja Pelo Mundo
Continuando, trouxe um tutorial que aprendi no Tea Ideas, um menu semi-transparente super fofo, veja como fica:





Aperte Ctrl+f ou F3 e procure por
]]></b:skin>
Quando achar, cole esse código acima :

#menuopacity { /* menu semitransparente - Tea Ideas */
background: #ffffff;
opacity: 0.6;
text-shadow: 1px 1px 0 #FFFFFF; /*sombra do texto */ 
color: #7DA196; /* cor do texto */ 
font-family: Georgia; /* fonte do texto */ 
font-size: 11px; /* tamanho da fonte */
text-align: center;
padding-bottom : 8px;
padding-left : 10px;
margin-bottom: 8px;
padding-right: 10px;
padding-top: 8px;
letter-spacing:3px;
}
#menuopacity:hover {
opacity: 0.6;
background: #ffffff; /* cor do fundo quando passar o mouse */ 
text-shadow: 1px 1px 0 #FFFFFF; /* sombra do texto quando passar o mouse */
color: #7DA196; /* cor do texto quando passar o mouse */
padding-bottom : 8px;
padding-left : 10px;
margin-bottom: 8px;
padding-right: 10px;
padding-top: 8px;
}
O que está em Itálico é o que faz o menu ficar transparente. É só mudar o número pra ficar mais transparente ou mais branco (ou a cor que você quiser, só mudar no background)
Depois Vá em Design > Elementos da Página > Adicionar um Gadget > HTML/JavaScript
Copie e cole o código a seguir on você quer que ele apareça: 
<a id="menuopacity" a="" href="http://link1.com">titulo 1</a><a id="menuopacity" a="" href="http://link2.com">titulo 2</a><a id="menuopacity" a="" href="http://link3.com">titulo 3</a><a id="menuopacity" a="" href="http://link4.com">titulo 4</a><a id="menuopacity" a="" href="http://link5.com">titulo 5</a>
E pronto, espero que tenham gostado do tutorial.
xoxo

5 comentários:

  1. Gostei do Tuto :p
    Beijinhos

    mundo-desonhadores.blogspot.com

    ResponderExcluir
  2. Que lindooo ♥
    Perfeito no cabeçalho *-*

    #Dark_Paradise.

    ResponderExcluir
  3. Te enviei uma solicitação de amizade no Face.
    Add lá *u*

    #Dark_Paradise.

    ResponderExcluir
  4. Awn , julia para de ser fofa! Acho super útil esse tutorial, o menu fica uma graxinha.


    giviajapelomundo.blogspot.com.br

    ResponderExcluir