28 de nov de 2013

Tutorial: Menu - Dark Fairy

Olá, até que fim apareci, eu ia postar ontem só que houve vários problemas comigo, não problemas graves mas problemas de escola. Amanhã tenho prova de português, mas não estou muito preocupado com essa matéria a que me assusta mais é Ciências. Enfim na próxima semana vai ser a semana mais corrida do ano, isso quer dizer que meus posts vão ser reduzidos, desculpem mas prova é prova então tenho que estudar mesmo. Mas tem uma história feliz vou sair de ferias dia seis, isso quer dizer bastante post, e vou atualizar meu blog pessoal que não posto faz tempo. Provas e problemas aparte, hoje trouxe um menu que eu mesmo fiz achei ele super legalzinho e ele é o nosso primeiro tutorial do blog -Até que fim. Então vamos ver o menu?

Quem quiser ver o menu ele está no meu blog de testes esse aqui (Preview) é o menu Dark Fairy (só depois vi a tradução dessa bagaça), vamos lá aprender.

Primeiro você tem que adicionar o codigo abaixo acima do seu css o ]]></b:skin>
#menuexemplo {
width: 43%;
background: #44464a url('http://static.tumblr.com/ptojqrs/QT5mwzq4w/wish.png') no-repeat right;
color: #787878;
float: left;
font-family: "silkscreen";
font-size: 8px; Tamanho da fonte;
padding: 5px;
margin: 2px;
border: 1px solid #2f3135;
text-shadow: 1px 1px 0px #393d45;
-webkit-transition-duration: .90s;
}
#menuexemplo:hover {
background: #44464a url('http://static.tumblr.com/ptojqrs/QT5mwzq4w/wish.png') no-repeat left;
text-align: right;
text-decoration:none;
filter: alpha(opacity=95);
moz-opacity:.90;
opacity:.90 ;
-webkit-transition-duration: .90s;
}

Após ter adicionado em seu css, adicione um gadget html/javascript e cole o código abaixo: 
<a href='Link' id='menuexemplo'>Nome do Link</a>
<a href='Link' id='menuexemplo'>Nome do Link</a>

 E pronto seu menu já estará funcionando, se caso você quera trocar a imagem a medida correta é 43x21, espero que vocês tenham gostado do menu e que usem. Se houver algum problema ou alguma duvida coloque nos comentários. 

34 comentários:

  1. Que menu fofo *-*

    http://heart-little.blogspot.com/

    ResponderExcluir
    Respostas
    1. Brigado >3<
      Beijos, volte sempre!

      Excluir
  2. Boa sorte na prova D: Espero que vá bem ~ A escola é mais importante com certeza, não se preocupe, nós esperamos u_u' Eu adorei ficar passando o mouse em cima desse menu HASDGAJGSVDKASJD ficou lindo ;A;

    Kissu :*

    ResponderExcluir
    Respostas
    1. Brigado, vou precisar de muita sorte -q Não foi só você, eu também fiquei passando o mouse em cima (por isso o post atrasou) HASHAISHSIAHSJ, Brigado de novo.
      Beijos, volte sempre!

      Excluir
  3. Adorei este menu, muito lindo *-* E boa sorte, tive prova de português hoje e amanhã vou ter de matemática SHAUSHAUSHU'

    ResponderExcluir
    Respostas
    1. Brigado *o* Pra você também, a minha prova de matemática só vai ser terça ALELUIA \ Õ /
      Brigado :3

      Excluir
  4. Boa sorte na prova de português, Diogo! Sei o quão essa matéria é difícil :3

    Enfim, menu muito lindo! E principalmente diferente, adorei ♥

    Um grande beijo,

    Juu-Chan || Nescau com Nutella

    ResponderExcluir
    Respostas
    1. Brigado! Alguém me entende \ õ /
      Brigado novamente, fico feliz que tenha gostado.
      Beijos, volte sempre!

      Excluir
  5. Também estou na época de provas e sei que é bem chato ¬¬ Amanhã eu terei de fazer 3 provas: Inglês, Matemática e Ciências, mas eu tenho que acabar com isso logo, porque eu não aguento mais olhar para cara de ninguém na escola!
    ''Sobre a postagem'', eu amei o menu, fica bem legal na elite de afiliados, além disso, é bem original.

    \( ● ⌒ ∇ ⌒ ● )/

    ResponderExcluir
    Respostas
    1. É bem chato mesmo, todo dia é uma preocupação e uma dor de cabeça, mas no final vale a pena, por causa das ferias. Não é só você que não aguenta mais olhar na cara daquele pessoal.
      Brigado, fico feliz que tenha gostado :)
      Beijos, volte sempre!

      Excluir
  6. Que lindo ele <3

    etcforme.blogspot.com

    ResponderExcluir
    Respostas
    1. Brigado >3<
      Beijos, volte sempre!

      Excluir
  7. É um menu muito fofo *u*
    Vou salvar u.u

    Fairy Html - ★

    ResponderExcluir
    Respostas
    1. Brigado :) Salve mesmo!
      Beijos, volte sempre!

      Excluir
  8. Aww que perfeito, muito criativo, e original também, jamais vi um desse estilo, perfeito mesmo <3

    htmlandresources.blogspot.com

    ResponderExcluir
    Respostas
    1. Brigado, sempre vou tentar inovar um pouco para vocês <3
      Beijos, volte sempre!

      Excluir
  9. Lindo menu! *3* Adorei ;3

    15 Days
    Aguardo sua visita ~ Seguindo, retribui?

    ResponderExcluir
    Respostas
    1. Brigado, que bom que gostou :3
      Beijos, volte sempre!

      Excluir
  10. Amei o menu, ele é muito fofo. *-*
    http://lost-inshadows.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Brigado :)
      Beijos, volte sempre!

      Excluir
  11. Boa sorte nas provas, que passe com facilidade em todas.
    Sobre o menu, adorei ele, sério mesmo.
    i-nterrupt.blogspot.com

    ResponderExcluir
    Respostas
    1. Brigado. Tomada viu..
      Brigado, fico feliz que tenha gostado.
      Beijos, volte sempre!

      Excluir
  12. Oie! Eu AMEI o seu blog! *u*
    Ficou muito perfeito o lay e tudo nem sei o q dizer.
    A e ja to seguindo ;3

    Kurai Yume - http://nyanmidnight.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Brigado *o*
      Beijos, volte sempre!

      Excluir
    2. Diogo! Eu posso repassar esse tuto no meu blog com os devidos credito ( Obvio u.u)?
      A e eu vou recomendar o seu blog pq ele é perfeito *u*
      A e se der... poderia postar como colocar o fundo personaliado no titulo do post e da side, eu to precisando nao acho em nenhum lugar ;c

      Excluir
    3. Pode mas coloque os créditos >3<

      Excluir
  13. Boa sorte com as provas ^^
    O menu é mt perfeito, parabéns :3

    breathingnewthings.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Brigado, tomara que eu passe né!
      Que bom que gostou.
      Beijos, volte sempre!

      Excluir
    2. Brigado, tomara que eu passe né!
      Que bom que gostou.
      Beijos, volte sempre!

      Excluir
  14. Que amoor esse Menu :3
    Amei de coração seu Blog.
    Seguindo.
    livrosehtml.blogspot.com

    ResponderExcluir
    Respostas
    1. Eu também gostei dele!
      Que bom que gostou ♥
      Beijos, volte sempre.

      Excluir
  15. Nossa esse menu e muito perfeito <3

    Counting Feelings | counting-feelings.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Que bom que gostou >.<
      Beijos, volte sempre!

      Excluir
  16. Esse menu é realmente muito lindo >3< Me apaixonei por ele.

    Beijos da Lets | Vida de uma SONE

    ResponderExcluir