Tutorial: Como Criar Seu Próprio Menu

天后☆彡 | via Tumblr

Olá, gente!

Tudo bom com vocês? Eu estou muito bem. Estou apaixonada por esse layout que a Carol fez para o blog, ficou maravilhoso! Valeu Carol! ^3^ E vocês, o que acharam? Eu fiquei muito feliz, até porque já estava na hora de trocar, mas eu estava tão sem inspiração...

Hoje eu resolvi trazer um tutorial, já que faz bastante tempo que não vemos um por aqui. O tutorial é de como fazer seu próprio menu. Os créditos vão para o Designer Lovers.

Vamos aprender?



1. Para começar, precisa pelo ou menos ter a base, o principal, vamos lá, escreva assim no HTML:

#menuexemplo {
}
#menuexemplo:hover {
}


2. Agora você ira colocar o conteúdo dele, dê um espaço antes do "}" primeiro, e depois coloque este código:


background: #CordoFundo;
color: #Cordaletra;
Border-top: 1px solid #000; /*** Borda de cima ***\
Border-bottom: 1px solid #000; /*** Borda de baixo ***\
Border-left: 1px solid #000; /*** Borda da esquerda ***\
Border-right: 1px solid #000; /*** Borda da direita ***\
letter-spacing: 1px; /*** Não mexa ***\
width: 20%; /*** Não mexa ***\
float: left; /*** Não mexa ***\
font-size: 08pt; /*** Tamanho da fonte ***\
font-family: Tipo de fonte; /*** Tipo da fonte ***\


3. Quando for usar, crie um gadget HTML/Java Script e cole:


<a href='Link' id='NomeDoMenu'>Nome do Link</a>


Na parte hover você pode colocar como quer que fique o menu com hover ou então repetir o código, mas eu aconselho repetir o código e colocar uma cor diferente, sabe? Pra ficar mais fofinho u3u




6 comentários:

  1. Realmente, esse layout ficou uma graça. Adorei o tutorial, super fácil 030
    Quirky-tree.blogspot.com

    ResponderExcluir
  2. Ah, que bom que gostou do layout flor! E o menu é muito fofo *-*

    Pode seguir meu novo blog? littlebutter-fly.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Pois é, eu amei mesmo o layout, veio em boa hora!

      *-* Já estou seguindo seu blog *-*

      Excluir
  3. Eu fico sem paciência pra fazer alguns HTML's, mesmo sendo fácil.
    Mas ficou muito bem explicado. E o layout ficou muito fofo.
    Seguindo, retribui?
    Beijos...
    Diary Nerd | diary-nerd.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Obrigada, mas os créditos do tuto vão para o Dl. Quanto ao layout, agradeça a Carol ^3^

      Excluir

Fique à vontade para comentar.
Peço apenas que não xinguem ou ofendam aos outros leitores.
Obrigada.