20 março 2013

Como fazer menus

| |

Oi, gente!
Desculpa ter deixado o blog desatualizado esse tempinho, é que eu tenho prova duas vezes por semana então tenho que passar a semana inteira estudando e, também, fazendo trabalhos...

Mas eu consegui achar um tempinho para fazer o novo layout do blog. Não é o melhor, eu sei, mas me agradou muito. O que vocês acharam? Sejam sinceros.

Ah, e junto com o layout tem novidade: músicas para players! Bem tudo começou assim: eu iria fazer o layout da diva Avril Lavigne e pensei que seria legal colocar um player legal no blog, mas e as músicas? Como sabem, eu formatei meu PC a um tempinho, ou seja, estou sem músicas, mas felizmente eu tenho umas salvas no DropBox. Então, eu fiquei pensando sobre quem está nessa situação ou é iniciante no assunto, e decidi fazer essa página. Já tem músicas da Avril, The Wanted, Rihanna, Sugababes e Wonder Girls, mas eu estou aceitando pedidos, ok?


Eu resolvi fazer um tutorial que, na minha opinião, é bem útil e pode ajudar muitas pessoas que realmente querem aprender a mexer no HTML para postar suas próprias coisas. Esse tutorial é bem básico mesmo, mas caso quiserem eu ensino a fazer menus com keyframes.
Eu tive trabalho para fazer esse tutorial de como criar menus, então eu quero créditos, ok?



Primeiro de tudo, para não ter que ficar testando no modelo e ficar visualizando o tempo todo, siga a 1ª parte desse tutorial para poder visualizar o menu automaticamente {Vai entender quando usar}

Antes de tudo, saiba que todos os códigos de menu devem ser sempre colados acima de ]]></b:skin>, assim como os da maioria de efeitos em imagens.
Agora eu vou colocar alguns (ou muitos) códigos que são fundamentais para o seu menu ficar com uma aparência melhor.
font-family: determina qual vai ser a fonte do menu (ex.: Arial, Tahoma, Verdana e Trebuchet MS são as que eu mais recomendo, mas pode usar fontes do Google Web Fonts)
font-size: é o tamanho da fonte (ex.: 15px, 10px, 12px e etc)
text-transform: determina se o texto será em minúsculo (lowercase), maiúscula (uppercase) ou a primeira letra maiúscula (capitalize)
text-align: center para o centro; right para a direita; left para a esquerda
font-weight: determina se será em negrito (bold)
font-style: determina se será itálico (italic)
line-height: é a altura da linha
letter-spacing: espaço entre as letras (recomendo 1px ou 2px)
word-spacing: espaço entre as palavras
color: cor da letra do menu
background: cor do fundo do menu
height: determina a altura do menu (ex.: 18px, 20px)
width: determina a largura do menu (ex.: 25px, 22px)
padding: determina o espaço entre as margens e a fonte do menu (4px, 5px)
border: border é a borda. Também pode colocar border-left (borda da esquerda), border-right (borda da direita), border-top (borda do topo) e border-bottom (borda de baixo) {ex.: border-left: 2px solid #ff8888;}
margin: determina o espaço entre os links do menu (5px, 4px) 
border-radius: são as bordas arredondadas (border-radius: 10px;) 
display: determina se o menu vai ser separado em blocos na mesma linha (inline-block) ou em apenas blocos, sem ser na mesma linha.
float: é semelhante ao text-align. Determina se o menu ficará no centro (center), na direita (right) e na esquerda (left)
São muitos, não é? Mas não se preocupe, depois de praticar você memoriza tudo e se vocês sabem um pouquinho de inglês, concerteza será mais fácil ainda de memorizar.

Agora, preste bem atenção nessa parte!

Primeiro temos que começar pela parte mais importante, na minha opinião: o nome da classe. Se não tiver, o resto não vai funcionar. E a classe sempre terá um ponto final (.) antes do nome, assim:
.NOMEdaCLASSE {
códigos
}
No códigos você vai colocar alguns dos que você viu lá em cima. Bem, aqui um exemplo:


.NomeDAclasse {
font-family: Verdana; /* fonte */
font-size: 10px; /* tamanho da fonte */
line-height: 16px; /* altura da linha */
text-align: center; /* centralização do texto */
width: 90px; /* largura do menu */
color: #000; /* cor do texto */
background: #efefef; /* fundo */
border-bottom: 2px solid #000; /* borda preta */
border-radius: 10px 10px 0px 0px; /* borda arredondada */
padding: 5px; /* espaço entre o texto e as bordas */
margin: 5px; /* espaço entre os links */
display: inline-block;}
O resultado ficou assim:
O resultado ficou bem simples, mas apenas porque eu coloquei poucas coisas.

O menu está sem hover, ou seja, se passar o mouse em cima, ele continuará o mesmo. Para mudar isso, basta fazer algo simples: adicionar :hover.

Como por exemplo:

.NomeDAclasse {
font-family: Verdana; /* fonte */
font-size: 10px; /* tamanho da fonte */
line-height: 16px; /* altura da linha */
text-align: center; /* centralização do texto */
width: 90px; /* largura do menu */
color: #000; /* cor do texto */
background: #efefef; /* fundo */
border-bottom: 2px solid #000; /* borda preta */
border-radius: 10px 10px 0px 0px; /* borda arredondada */
padding: 5px; /* espaço entre o texto e as bordas */
margin: 5px; /* espaço entre os links */
display: inline-block;}
.NomeDAclasse:hover {
border-bottom: 2px solid #ff0088;
}
Basicamente, é assim que se faz um menu.

Agora, na hora de colocar, vá em layout • adicionar gadget • HTML/JavaScript:
<div class="NomeDAclasse"><a href="LINK DA PÁGINA">NOME DA PAG</a></div>
É só ir colando até dar exatamente o mesmo número de páginas do seu blog.


Por favor, se usarem ou repassarem, creditem!

Ah, e me digam o que acharam do layout, amores.

Beijos


23 comentários:

  1. Amei seu novo layout,e o tutorial ficou bem explicadinho.
    Sckitty World

    ResponderExcluir
  2. O layout ficou divooo omg ficou muito lindo >///<

    Adorei o tutorial, sempre tenho um pouco de dúvidas de como fazer um menu legal, gostei muito :D

    Nyah Kawaii

    ResponderExcluir
  3. Muito bom o tutorial, sério, me ajudou e vai ajudar muita gente.

    AAAH, Isa, o novo layout daqui tá lindo, eu a-m-e-i a sidebar *----* Ficou divo, como sempre né, rs.

    Ham, que tal músicas da Demi, 1D, Jonas? HJAISHAIS.' São meus gostos, não sei se você vai aceitar, rs.

    poisonhtml.blogspot.com

    ResponderExcluir
    Respostas
    1. Obrigada, amore. Minha diwa me elogiando, um sonho!

      hm, ñ gosto da Demi, eu sou prisoner - fã do The Wanted, e quem é directioner e/ou prisoner entende, e vivo numa relação de amor e ódio com o Jonas, mas como eu sou muito boazinha e muito diva (e não me acho nada u.u ) eu vou postar ;P

      Excluir
  4. Lindo layout! Mas em meu computador os gadgets no cabeçalho não estão alinhados corretamente :(
    Mesmo assim amei!
    Tutorial bem útil viu? Beijos!

    Caprichosdabiia.blogspot.com

    ResponderExcluir
    Respostas
    1. Eu sei, é horrível. Tentei mudar mas não deu certo ;/

      Own, obg

      Excluir
  5. Não me humilha... Ficou mais que perfeito o layout. Pra mim, está tudo normal, sem nenhum problema.
    Kisses.
    ~Ana @TSD

    ResponderExcluir
  6. Perfect
    http://paraisomakeup16.blogspot.com.br
    http://www.youtube.com/user/SempreBella1000?feature=mhee

    ResponderExcluir
  7. Agora finalmente poderei criar meu próprio menu, tomara que ele saia bonito, gostei bastante de sua ideia! Kisus.

    Kuusou World

    ResponderExcluir
  8. Que droga! Com esse novo editor de HTML nenhum dos meus efeitos ta pegando! Estou muito triste! :( me ajude..........

    ResponderExcluir
  9. Lindo seu Layout!

    Mas estou tentando fazer um que seja a minha cara, mas seu blog foi um achado.
    Eu ñ entendo nada de HTML, mas achei facil começar com suas dicas.
    Bjos!

    ResponderExcluir
  10. Muito bom esse tutorial,eu adoreii mesmo,eu estava procurando exatamente um assim!
    oBrigada por me ajudar,beijos!
    minhas-confissoes-2012.blogspot.com

    ResponderExcluir
  11. Muito lindo o seu blog menina.Você é muito criativa__abraço

    ResponderExcluir
  12. Não consegui, criei as páginas, mas elas dizem que não existem... me ajudem:
    umnovo-roteiro.blogspot.com

    ResponderExcluir
  13. oi ameei o post e seu blog é PeRfEcT , adorei mesmo já adc o seu blog nos afiliados beijokas

    http://mordidademorango.blogspot.com

    ResponderExcluir
  14. Eu achei tudo muito bom e bem explicado mas queria saber o que é esse "nome da classe" que é pra colocar... Obrigado de qualquer jeito

    as1001paginas.blogspot.com

    ResponderExcluir
  15. Gostei do layout!

    galerinhaconectada.blogspot.com

    ResponderExcluir
  16. Lindo! Criei um Menu,com todos os créditos

    ResponderExcluir

« »