14/11/2013

Tutorial - Menu simples e pequeno


Oiis! Vim trazer-vos um menu. Desta vez ninguém mo pediu, posto aqui só porque é um dos meus preferidos e quando a Kaorii fecha por algum motivo temporariamente o KW blog dela, eu quase morro por causa deste *e outros, mas mais este* tutorial... (Por favor Kaorii, não me assustes outra vez x_x)
Então, os créditos são todos dela, ok?

O tipo de menu de que estou a falar é este:
Então vamos lá ao tutorial...
Vá ao Esquema e adicione uma mini aplicação e escolha HTML/Java Script.
E coloque lá isto:

<center>
<a class="menupequeno" href="LINK">NOME</a>
<a class="menupequeno" href="LINK">NOME</a>
<a class="menupequeno" href="LINK">NOME</a>
<a class="menupequeno" href="LINK">NOME</a>
</center>

Onde diz "LINK" coloquem o suposto "www.link-da-pagina-que-querem.com" e onde diz "NOME" coloquem o que querem que apareça, como "Home" ou "Parceria" ou algo do tipo...
Guardem.

Agora vão a editar HTML e procurem por ]]></b:skin>
E por cima disso cole isto:

@font-face { font-family: "silkscreen"; src: url('http://static.tumblr.com/0xqvkot/7jqmgsn0m/pf_arma_five.ttf'); }
a.menupequeno {
background-color: #e6e6e6;
padding-top: 3px;
padding-bottom: 3px;
display: inline-block;
width: 40px;
font-size: 8px;
font-family: silkscreen;
text-transform:  uppercase;
text-align:center;
border: 1px solid #d1d1d1;
letter-spacing: 1px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
box-shadow: inset 0 0 5px #e3e6e7, 0 0 1px #b6b6b6;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
text-shadow: 0 1px 0 #ebebeb;
}
a.menupequeno:hover {
border: 1px solid #f994aa;
background-color: #ffc3d0;
text-decoration: none;
box-shadow: inset 0 0 0px #e3e6e7, 0 0 0px #b6b6b6;
text-shadow: 0 1px 0 #fbdae1;
opacity: 0.8;}

E pronto, mude as cores que é o que está a negrito, pré-visualize e veja se deu tudo certo no lugar onde colocou aquela mini aplicação, lembra-se? E se estiver tudo bem, guarde ;)

Prontinho, espero ter sido útil...
Kissus~

4 comentários:

  1. Sempre quis saber como se põem esse menu diwo *O* Credo,nem me fales,dá-me sempre cá um ataque cardíaco quando chego ao K-World e está fechado que nem acreditas ._.'
    AHAHHAHA "www.link-da-pagina-que-querem.com" morrendo de rir aqui u.u'
    Bem,talvez usse esse menu lindo no meu próximo visual >-< Se quiseres credito :3

    Kissus!>3<
    My Paradise

    ResponderExcluir
    Respostas
    1. Hahaha pois é, eu também estive bastante tempo para descobrir de onde vinha o menu super kawaii... E no fim fui dar obviamente ao KW, tinha de ser neh xD
      E QUANDO DESCOBRI QUE ERA DO KW, ELE TAVA FECHADO! Quase morri '-'

      Por isso, pedindo desculpa á Kaorii, mas tive de por aqui os códigos para o caso de ela desaparecer outra vez..... ._.''

      Sim, mas se me creditares, credita o KW tambem, oki? Afinal deu trabalho fazer este post, mas foi ela que inventou o codigo neh ;)

      Excluir
  2. Bunny!
    o Senbonzakura está com novidades! quando puder, dê uma passadinha por lá! ♥ http://projetosenbonzakura.blogspot.com.br/

    ResponderExcluir

Se queres comentar:
☾ Nada de palavras indecentes!
☾ Se eu te conhecer, no comentário anónimo podes assinar no fim, por favor?^^
☾ Se quiseres falar comigo no msn podes adicionar:
bunnytsukino5@hotmail.com
☾ Diverte-te e comenta sempre que quiseres!

©