25/10/2013

Tutorial ^-^

Olá, tudo bem?
Trago um tutorial de menu bem legal, eu simplesmente adorei o efeito dele, acho até que vou usa-lo aqui em breve. O nome do tuto é: Menu Transparente, abaixo, vocês verão a Preview e o tutorial.
~Créditos no fim do post~



1- Cole o código abaixo em um HTML/JavaScript:
<link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz' rel='stylesheet' type='text/css'>

2- No seu HTML procure por ]]></b:skin> acima da Tag cole o código:

#photo{background:url(URL DA SUA FOTO);width:LARGURApx;height:alturapx; border: solid 5px #Cor da borda;}.boxmenu {background:transparent; opacity: 0.0;  width:LARGURApx;height: ALTURApx; -WEBKIT-TRANSITION-DURATION: .90S; margin-top:0px}.boxmenu:hover {opacity: 1.0;  width:LARGURApx;height:alturapx; }.nav2 {BACKGROUND: #COR DO FUNDO; opacity: 0.5;DISPLAY: INLINE-BLOCK; TEXT-ALIGN:center; FONT-SIZE:18PX; COLOR:#fff;  FLOAT: left; MARGIN:2PX; FONT-FAMILY:'Yanone Kaffeesatz'; PADDING:4PX;  WIDTH:190pX;HEIGHT:13PX; -WEBKIT-TRANSITION-DURATION: .90S;margin-bottom:0px; MARGIN-LEFT:0px;  }.nav2:hover {BACKGROUND: # COR DO FUNDO ; opacity: 1.9;DISPLAY: INLINE-BLOCK; TEXT-ALIGN:center; FONT-SIZE:18PX; COLOR:fff;  FLOAT: left; MARGIN:2PX; FONT-FAMILY:'Yanone Kaffeesatz'; PADDING:4PX;  WIDTH:190PX;HEIGHT:13PX; -WEBKIT-TRANSITION-DURATION: .90S;MARGIN-LEFT:0px; MARGIN-bottom:0px;text-shadow: 1px 1px 0 #Sombra do texto;} 

3- Faça as modificações de acordo com as instruções do próprio código, em seguida salve.

4- Agora cole o código abaixo em um gadget  HTML/JavaScript e faça as alterações necessárias, depois é só salvar e prontinho *-*

<div id="photo"><div class="boxmenu"><br><br><br><br><a href="LINK">NOME</a><a href="LINK">NOME</a><a href="LINK">NOME</a><a href="LINK">NOME</a><a href="LINK">NOME</a></div></div>

Créditos:


Abraços♥

8 comentários:

  1. Esse menu é muito lindo. Babi adoro seu blog e seus ensaios são incríveis, já mi tornei sua seguidora, parabéns por criar um blog tão lindo assim, é o melhor blog de Barbie que já vi.
    Beijos :-*

    ResponderExcluir
    Respostas
    1. Muito obrigada Talita, fico lisonjeada com
      seu comentário, agradeço-lhes por torna-se
      seguidora do blog, obrigada *-*
      Abraços♥

      Excluir
  2. que lindoooooooooooo *oo* mdsss

    http://euamotutoriais.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Também achei -risos.
      Obrigada por comentar.
      Abraços♥

      Excluir
  3. Oi linda!
    Vi seu comentario no Girl Teen,e eu realmente estava com saudades,não tenho tempo de ir visitar outros blogs aqui em casa ta uma correria(casa em reforma :o),e os estudos estão cada vez mais puxados!
    Beijos flor ate breve!

    ResponderExcluir
    Respostas
    1. Olá Thacy,
      pois é, fazia tempo que eu não visitava o GT,
      também estava com saudades >.<
      Te entendo flor, até breve e sucesso *-*
      Abraços♥

      Excluir
  4. Babi postei as fotos da minha nova aquisição vjea neste link>mattelbarbiefashionistas.blogspot.com.br/2013/10/novidade-minha-nova-aquisicao.html#more:D

    ResponderExcluir
    Respostas
    1. Já vi Biel, e também já deixei um
      comentário lá -risos. Parabéns pela
      Doll, ela é linda.
      Abraços♥



      P.S: Seu texto de "introdução" ficou parecendo
      uma redação pro ENEM -risos.

      Excluir

Hei, people <3 Que tal deixar sua opinião, sugestão ou critica (construtiva, por favor) em nossos comentários para que assim possamos melhorar ainda mais! Lembrando, é claro, que nossos comentários são moderados, isto é, precisa de minha aprovação para que apareça. Por tanto, seja educado e se expresse de forma a não ofender a autora do blog ou a terceiros, caso contrario seu comentário não será postado, okay? Até aceito o "seguindo, segue de volta?" desde que eu goste de seu blog, seguirei sem problemas. Sem mais delongas, fique a vontade e volte sempre.
Abraços da autora;
Babi Sah ♥