12/03/2013

Tutorial: Menu Fade Image

||

Yo panquecas, como vão? Hoje venho postar o primeiro pedido que fizeram na minha Ask, sim finalmente eu fiz uma para o blog, tá eu não fiz, estava jogada ai peguei para o blog. Então irei mostrar como fazer o Menu Fade Image eu o uso aqui no blog, mas nunca postei o tutorial. Eu acho ele bem legal, porque ao mesmo tempo pode ser a imagem de welcome como também um menu. Os créditos vão para o blog da Yuizinha porque foi lá que eu achei o tutorial, mas os créditos também são do HTMLuv! Então vamos lá?

Primeiramente vá ate seu HTML e procure por ]]></b:skin>, acima dele 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');}

Galerinha nesse códio não precisa mudar praticamente nada, se quiser que o menu sobre a imagem sem que passe o mouse troque "opacity: 0;" por "opacity: 1;". Caso queira ele aparecendo deixe como esta.  A cor da fonte está com esse código #ff699e. E fundo por white, já a borda por #fdd95b. Salve!

Agora vá para seu layout, e adicione um gadget de HTML/Javascript, dentro cole:

<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>


Prontin, gostaram? Espero que sim!

10 comentários:

  1. Amo esse menu u3u Ocupa menos espaço
    na sidebar , pois envés de pôr um gadget para isso ,
    já tem na imagem T-T' (embolado mais teu p entender né ?kkkk')
    Gosto bastante , ótimo tuto!

    ResponderExcluir
    Respostas
    1. Deu sim para entender, e concordo com você. E um otimo menu, gosto muito dele também e obrigada pela visita

      Excluir
  2. Respostas
    1. Oie Yu-chan eu ainda não fui, ainda estamos arrumando as coisas. ^^

      Excluir
  3. Esse tuto eu já conheço, e aprovo o/ hehehe...menu super cute, eu nunca usei mas tenho vontade >.< são tantos menus que na hora de fazer o lau eu acabo deixando esse de lado.

    ResponderExcluir
    Respostas
    1. Ivy-chan, somos duas eu tive que colcoar ele sem pensar porque sempre esqueço deele com tantas opções.

      Excluir
  4. obrigada, o tuto me ajudou =))
    kisses

    ResponderExcluir
  5. Wendy, já tentei de tudo mas a imagem do menu sempre fica maior que o gadget. Como faço pra resolver? Já coloquei ela menor, já aumentei o gadget e nada resolveu D:

    ResponderExcluir
    Respostas
    1. Oi Ru, desculpe a demora para responder. Não tem como eu explicar por aqui porque os comentários não deixa enviar os códigos então vou enviar por bloco: https://sites.google.com/site/drwtexte/menudeabs/Tutu.txt

      É só salvar.

      Excluir
    2. obrigada :3

      Excluir

Hi guys!!!!
Hey aqui é Wendy, blogueira desde 2010! Viciada em animes, amante de livros e adora ver séries! Criei esse cantinho na intenção de ajudar na criação e personalização de blogs e sites.
Wattpad Facebook Tumblr Instagram