Tutorial - Menu Fade image

|| ||
Yoo, minna-san~ ♥
 
Primeira vez que estou usando ilustrações para postagens larguinhas e devem ter percebido que é a primeira vez também em muito tempo que eu não posto tutoriais não é gente? Bom, vocês devem ter se assustado com a postagem abaixo mas é que eu cansei de fazer postagens normais e como ninguém me pede nada na ask aquela foi a primeira idéia que me veio a cabeça! e_e Mas tudo bem gente, aqui é assunto geral, irei postar tudo que sei ou posso, mas mesmo assim hoje eu fiquei com vontade de postar tutoriais ò_ó e mais uma coisa gente, estou no episódio 70 de D. gray man e irei assistir até o final de Amnésia hoje ù3ú podem apostar õ/
 
Viram meu blog novo? o Avaliação Blogroll - http://a-v-blogroll.blogspot.com.br/? Espero que tenham gostado e por favor se quiserem avaliações nos seus blogs me peçam pela ask por favor gente! Assim eu irei saber diferenciar todas as perguntas ou pedidos, sei lá o que! Mas agora comecei a usar o tumlbr de novo dessa vez no meu nome, então tem dois métodos a fazerem pedidos ou perguntarem qualquer merda sobre mim! Aqui e aqui.  Espero que se sintam bem e por favor me adcionem no facebook para caso quiserem conversar comigo ^^ E por favor curtam a nossa fanpage!
1. Vá em seu Html, clique ctrl + f e cole: ]]></b:skin>, acima da tag encontrada cole:
#aparece:hover #menu{
 opacity:1;
 }
 #menu{
 opacity: 0;
 position:absolute;
 -webkit-transition: all 1s ease-in-out;-moz-transition: all
1s ease-in-out;-ms-transition: all 1s ease-in-out;transition: all 1s ease-in-out;
margin-top:-70px;
}
#menu a{
display: block;
padding-right:5px;
margin-left:15px;
padding:2px;
width:80px;text-align:right;font-family:
'04b03';font-size:8px;text-transform:
uppercase;color:#ff699e;
background: white; border-right:5px #D02090 solid;
margin-bottom:1px;-webkit-transition:all .3s
linear;-moz-transition:all .3s linear;
-ms-transition:all .3s linear;}
#menu a:hover
{border-right:0px #CCC
solid;padding-right:6px;}
@font-face {font-family:
'04b03';url
(http://static.tumblr.com/rozpbz7/j0dm2jpkp/04b_03__.ttf)
format('woff');}
}
 
2. Adcione um Gadget HTML o seguinte código:
<div id="aparece">
 <img src="https://fbcdn-sphotos-e-
a.akamaihd.net/hphotos-ak-ash3/
526361_452231948156550_1505989352_n.jpg" />
 <div id="menu">
 <a href="SEU LINK">home</a>
 <a href="SEU LINK">about</a>
 <a href="SEU LINK">goodies</a>
 <a href="SEU LINK">credits</a>
 </div></div>


12 comentários:

  1. Que lindo menu *---------*
    OMG!OMG!
    Eu quero esse menu agora òwó
    Vou com certeza usar no meu próximo layout o/
    Adoro seus tutorias Naka-chan, são sempre simples e diretos :3
    ~kissus

    ResponderExcluir
  2. awn eu amuh esse menu é mto top!, amei o novo layout, ainda nao tinha visto pois fiquei um pouco afastada da blogosfera...*-*

    http://kawaii-little-things.blogspot.com.br/

    ResponderExcluir
  3. Adorei o menu!
    Seguindo aqui, segue de volta floor??
    sweetmeninateen.blogspot.com

    ResponderExcluir
  4. É um menu muito que fofo, acho ele uma graça!
    pqngarota.tk

    ResponderExcluir
  5. O menu é muito bonito. Estava com saudades dos seus tutos ashuahsua
    Kiss, vou no seu outro blog pra pedir uma avaliação ok?
    with-you-s2.blogspot.com

    ResponderExcluir
  6. Achei muito lindo o menu,seguindo, muito bom o tutorial.

    ResponderExcluir

- Requests tem de ser feito na minha Ask, mas não me importo de serem feitos pelos comentários.

- Não façam comentários merdosos, ex: Poha, lindo, vai te fuder, ou seja, os sem lógicas! Mas eu permitos gírias.

- Se quiser que eu retríbua é só pedir, deixando o link do seu blog!

- Aceito "seguindo, segue de volta?", não acho nada errado nisso!

- Eu leio e respondo todos os comentários possíveis!