Tutorial - Menu Suddenly Appearing


Bom dia, que bom que gostaram do tutorial que eu postei, como sei que vocês amam tutoriais eu vim trazer mais um, mas dessa vez do tumblr que eu mesma modifiquei para blog, o nome dele é Suddenly Appearing, confesso que eu modifiquei mexendo em isso e aquilo e conseguir e posso dizer que agora que eu aprendi vou postar sempre tutoriais modificados do tumblr, esse menu que eu trago hoje eu aprendi no Designs For You, espero que gostem.


Primeiramente confiram a visualização clicando aqui, ele não é lindo?

Bom se você gostou siga o tutorial:
Abra o HTML do seu blog e clique em Ctrl + F e digite ]]></b:skin>, agora ACIMA dessa tag cole o seguinte código:
@font-face {font-family: "iconsrs"; src: url('http://static.tumblr.com/8nqsmq9/IZHmb2sjk/heydings_icons.ttf')}
.menurscomeco {background: #75a6cc; font-family: 'tahoma'; font-size: 500px; color: #fff; width: 50px; height: 50px; display: inline-block; margin-right: 5px; text-align: center; -webkit-transition-duration: .50s; border-radius: 500px; -moz-box-shadow: inset 0 0 15px #56799e;
    -webkit-box-shadow: inset 0 0 15px #56799e;
    box-shadow: inset 0 0 15px #56799e; overflow: hidden;}
    .menurscomeco:hover {overflow: hidden; background: #75a6cc; font-family: 'Yanone Kaffeesatz'; color: #fff; font-size: 40px; display: inline-block; margin-right: 5px; width: 50px; height: 50px; text-align: center; -webkit-transition-duration: .50s; border-radius: 500px; -moz-box-shadow: inset 0 0 15px #ebebeb;
    -webkit-box-shadow: inset 0 0 15px #ebebeb;
    box-shadow: inset 0 0 15px #ebebeb;
}
.menurscomeco icon {font-family: 'iconsrs'; color: #fff; font-size: 50px; text-shadow: 0px 0px 10px #FFFFFF; -webkit-transition-duration: .50s;}
.menurscomeco:hover icon {text-shadow: 0px 0px 5px #fff;}

Está meio complicando mais é só você ir modificando as cores até deixar do modo que deseja.
Visualize se estiver tudo certo salve.

Agora vá no layout da página e adicione um novo gadget de HTML/JavaScript e cole o seguinte código:
<a href="SEU LINK"><div class="menurscomeco"><icon>A LETRA CORRESPONDENTE AO ÍCONE QUE VOCÊ QUER</icon></div></a>
<a href="SEU LINK"><div class="menurscomeco"><icon>A LETRA CORRESPONDENTE AO ÍCONE QUE VOCÊ QUER</icon></div></a>
<a href="SEU LINK"><div class="menurscomeco"><icon>A LETRA CORRESPONDENTE AO ÍCONE QUE VOCÊ QUER</icon></div></a>
<a href="SEU LINK"><div class="menurscomeco"><icon>A LETRA CORRESPONDENTE AO ÍCONE QUE VOCÊ QUER</icon></div></a>

Creio que vocês não entenderam o porque de está escrito "a letra correspondente ao ícone que você quer" mas é ai que você vai colocar a letra que você quer para os ícones que sobem sabe?

Confiram essa tabela, é nela que vocês vão procurar os ícones que te agrada e ir botando ali a letra que se refere a ele no código do gadget.

Pronto seu menu está pronto.
Espero que eu tenha ajudado e se forem usar deem os devidos créditos, plagio é crime.

14 comentários:

  1. Nossa o menu é lindo...
    Tá de parabéns esse blog sempre trazendo ótimos tutoriais...

    X-Tudo Confissões

    ResponderExcluir
  2. Olá! Awwwn, que perfeitinho *---* Eu nunca tinha ouvido falar desse menu, achei tão fofo >.< O efeito é super bonito, adorei ♥

    Beijos, Mrs. Nightshade.

    ResponderExcluir
  3. Nossa, tenho uma amiga que estava louca atrás desse menu, vou mostrar seu tutorial urgentemente para ela ^^

    Abraços,
    Revolução Nerd

    ResponderExcluir
  4. Ai que lindo esse menu *----*
    Mais é claro que vou usar né :3

    #Crazy-HTML
    Venham participar da gincana!Não Perca!

    ResponderExcluir
    Respostas
    1. Que bom que gostou, ele é lindo, user mesmo mas não esqueça de dar os créditos a mim e o DFY :D

      Excluir
  5. Hey! Parabéns pelo seu blog, me encantei pelo seu layout. Adorei o tutorial tá bem explicadinho e o efeito é incrível. Acho que vou usá-lo em algum dos designs do meu blog.
    Ana || Explosão de Cerejas

    ResponderExcluir
  6. OOi Ameii muiito seu blog, é lindoo *--*, estou ti seguindo \o retribue? por favor, vou ficar honrada e muiiito alegre ^^ ficarei lá ti esperando ^^

    http://inspires7.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. omg você é minha seguidora número 50, obrigada

      Excluir
  7. Que menu lindoo! Adorei o efeito dele, realmente fica muito bonito! Adorei o tuto, bem facinho de entender! ^^

    Beijinhos, Paula! ♥
    ~Sweet Makeup~
    (clica no perfil pra visitar meu blog)

    ResponderExcluir