HOME ☁ Biography ☁ Facebook ☁ Twitter ☁ Instagram ☁ Blogskin ☁
disclaimer

Instagram


Tagboard


History

Friends


Twitter


Credit

Skin by → Pipie Panini
Html code → Mary / Hanie.Heykiim
Images from → weheartit.
Como fazer um Menu - EXCLUSIVO!7 de out de 2013 leave me ♥?

Yoo minna! image
Como vão meus bolinhos de arroz?
Ontem eu fui na casa da minha avó e engordei 3 quilos ~normal~.As gororobas da minha avó são sempre as melhores! E por falar em gororoba, fui inventar de fazer um miojo, aí o meu vizinho (que é,digamos, o cover do Taylor Lautner) me chamou, por que a bola de basquete dele caiu no gramado daqui de casa.E eu fui, toda sorridente e simpática (e babando) .Dei a bola e ele disse aquele ''obrigado'' com sorriso e tudo mais;esperei ele entrar na casa dele, e quando ele fechou a porta eu sai gritando: ''Meu deus, meu miojo, socorro!''. Caramba o meu vizinho abriu a porta na hora pra o que tinha acontecido, e eu fiquei correndo em círculos gritando como uma retardada ~vergonha total~. KKKK?

Mas continuando com o tutorial...Hoje vou ensinar a vocês como fazer um menu e.e!
Eu criei um código base pra vocês entenderem melhor.Antes de qualquer coisa, tenha em mente que o código do seu menu terá que ser antes de ]]></b:skin> .

Código base
/*  ESCREVA SEUS CRÉDITOS AQUI */
 classeaqui {
 width: 0%;
  margin: 0px;
  padding: 0px; 
  float: left; 
  background:#000000; 
  color:#FFF; 
  font-family: Arial;
  font-size: 0px; 
  text-align: center; 
  text-transform: uppercase; 
  border-radius: 0px; 
  -webkit-transition-duration: .90s;
}

classeaqui:hover {
  background:#EEEEEE; 
  color: #333333; 
  border-radius: 0px; 
}

Entendendo o código
/*  ESCREVA SEUS CRÉDITOS AQUI */ - Aqui você escreve os créditos do seu blog entre os /* */; Exemplo: Menu tam tam feito por tam tam do blog tam tam (??)
classeaqui { -Coloque o nome do menu; Exemplo: menuazul { mas não se esqueça de colocar a chave ''{'' depois do nome, pois ela indica o começo do código
 width: 0%; - Aqui é a largura do menu, quanto maior for o valor, mais largo ficará a caixinha do menu
 margin: 0px; - Aqui é define distância entre uma caixinha e outra, eu recomendo usar entre 2 ou 3px de distância
padding: 0px; - Espaço entre o link e a margem do menu
float: left; - Alinhamento do menu. No caso left [esquerda], right [direita] e center [centro]
background:#000000; -A cor do menu no estado normal.
  color:#FFF; -Cor da letra do menu
  font-family: Arial; -Fonte usada no menu. Eu recomendo as do Windows mesmo (Verdana,Calibri...)
  font-size: 0px; -Tamanho da fonte
  text-align: center; -Alinhamento do texto
  text-transform: uppercase; -Transformação do texto. Recomendo deixar uppercase mesmo
  border-radius: 0px; -Borda arredondada no menu; defina em pixels
  -webkit-transition-duration: .90s; -Tempo de transição do normal para o hover. Use o mesmo ou 80
}-Indica o final do código 
classeaqui:hover { -O nome do menu novamente, mas não retire o :hover
  background:#EEEEEE; -Cor do menu em hover
  color: #333333; -Cor do texto em hover
  border-radius: 0px; -Aumente ou tire o arredondamento das bordas
} -Feche com a chave 

Não se esqueça de colocar as chaves no início e no fim do código. Você poderá alterar o menu como quiser, adicionando mais códigos e linhas; se não quiser o menu em hover, basta apagar todo o código :hover .Para colocar o menu em um layout, abra um JavaScript e cole o código abaixo:
<a href="LINK"><classeaqui>NOME</classeaqui></a>
O que está em vermelho, você coloca o nome do menu.

E esse foi o tutorial de hoje paçoquinhas ;3  
Beijinhos sabor do amor <3

Marcadores: , ,


FUTURE
PAST