Tutorial - Faça seu próprio menu

Boa Tarde , tava resolvendo coisas na escola.

Boa Tarde Amores! Opa, que saudade de vocês , esperam que estejam bem , por que eu to mal. Mais bem por estar aqui e por estar com meus gatinhos. Quer dizer não to com eles não colo infelizmente , por que eles são muitos novinhos e estão com a mami. E eu estava na escola , resolvendo coisas , e só vou poder voltar lá dia 10/02 , pra ver se tem vaga. Por que hoje fechou as inscrições e vai começar as matrículas amanhã , então só dia 10. Estou fascinada ouvindo Gfriend - Season Of Glass , e admito é muito bom. Pois bem , eu to meio que louquinha aqui , mais resolvi trazer um tutorial fácil. E depois trazer um goodie , alguma coisa que vocês precisam. Então o próximo post eu trago coisas pra vocês. Mais se quiserem pedir algo , peça. Estou fazer um novo layout. Não vou por esse pra Free , mais vou fazer uma página e colocar layout's antigos , para recorda.
Deixe-me te mostrar como fazer um menu só seu. O próximo layout é surpresa. Mais escolhi azul , por que quero fazer de nuvens. Ops!

01.Para começar, você tem que criar um nome para o seu menu (nem sempre é necessário, mas é sempre bom). Eu mudei o nome do menu. Mais as imagens são do blog , e os créditos vai para esse blog : Blazing HTML

02.Agora vamos começar a usar os códigos para o menu.No início do código do menu você terá que colocar assim:

#nomedomenu { 

 Após feito, vamos para a seguinte etapa.

03.Nessa etapa vamos usar os códigos como: background, bordas, largura, altura, tipo de fonte, tamanho de fonte entre outros.Abaixo do código anterior, você vai fazer como no exemplo:

#myfirstmenu {
background: #ADD8E6;
 color: #FFF;
font-family: Arial;
font-size: 10px;
text-aling: center;
border-radius: 1px;
padding: 2px;
outline-style: solid;
outline-width: 1px;
outline-color: #7CC1D8;
width: 28%;
height: 21%;
-webkit-transition-duration: .80s;
} 

04.Vamos para a parte hover do menu:

Antes de começar o código hover, coloque antes dele:

 #nomedomenu:hover { 

 Agora faça como no exemplo abaixo:

#myfirstmenu:hover {
background: #FFC0CB;
color: #FFF;
 border: #FFB0BE;
outline-color: #FF9DAE;
 -webkit-transition-duration: .80s;
} 

05.Entendendo o código:

background = cor do fundo do menu
 color = cor da fonte
font-family = tipo de fonte
font-size = tamanho da fonte
text-aling = posição do texto
 padding = espaçamento do menu
margin = margem de espaçamento do menu
outline-style = tipo de borda
 outline-width = espressura da borda
 outline-color = cor da borda
 width = altura do menu
 height = largura do menu
 -webkit-transition-duration = tempo da mudança de cores 

 06.Juntando os dois códigos ficará assim:

 #myfirstmenu {
background: #ADD8E6;
 color: #FFF;
font-family: Arial;
font-size: 10px;
text-aling: center;
border-radius: 1px;
padding: 2px;
outline-style: solid;
outline-width: 1px;
outline-color: #7CC1D8;
width: 28%;
height: 21%;
-webkit-transition-duration: .80s;
}
#myfirstmenu:hover {
background: #FFC0CB;
color: #FFF;
 border: #FFB0BE;
outline-color: #FF9DAE;
 -webkit-transition-duration: .80s;
}  

07.Agora vamos para a parte dos links.Adicione um gadget HTML/JavaScript e cole o código abaixo:

<a href="Link" id="myfirstmenu">Nome</a> 

No lugar de nomedomenu você coloca o nome do seu menu.

O meu menu ficou assim: