Cabeçalho

O Blog Html e Css tem como objetivo esclarecer todas as tuas dúvidas sobre design, codificação e personalização de blogs. Pede um tutorial, ou tira as tuas dúvidas. Estou aqui para te ajudar e faço-o de bom grado. Sugestões e perguntas são sempre bem-vindas. Obrigado pela visita e volta sempre.
- Zé Pedro Silva.

25/07/2013

Criar um Menu

Olá visitantes *-*, a pedido de um visitante do blog, hoje vou ensinar a criar um menu desde o início. Não é difícil, apenas precisas de ter um pouco de atenção e criatividade.

Primeiro, vai a design → editar html → aperta F3 e procura pela tag: ]] ></b:skin>. Depois de a encontrares, cola ANTES dela o seguinte código.
.NOMEdoMENU {
font-family: TIPO DE LETRA;
font-size: TAMANHO DO TIPO DE LETRApx;
color: #COR DO TIPO DE LETRA;
text-transform: TRANSFORMAÇÃO DO TEXTO;
letter-spacing: ESPAÇAMENTO DAS LETRASpx;
text-align: ALINHAMENTO DO TEXTO;
font-weight: bold;
margin: ESPAÇO ENTRE OS LINKS DO MENUpx;
line-height: ALTURA DA LINHApx;
padding: ESPAÇO ENTRE O TEXTO E A MARGEMpx;
width: LARGURA DO MENUpx;
height: ALTURA DO MENUpx;
float: FLUTUAÇÃO DO MENU;
border-radius: ARREDONDAMENTO DAS BORDASpx;
}
.NOMEdoMENU:hover {
background: #COR DE FUNDO DO MENU EM HOVER;
border-radius: ARREDONDAMENTO DAS BORDAS EM HOVERpx;
}
TIPO DE LETRA (font-family)
Define o tipo de letra do menu (o mais utilizado é o Georgia).

TAMANHO DO TIPO DE LETRA (font-size)
Define o tamanho do tipo de letra do menu (os tamanhos mais utilizados são o 11px e 12px.

COR DO TIPO DE LETRA (color)
Define a cor do tipo de letra do menu (exemplo: #808080, #818181, #696969).

TRANSFORMAÇÃO DO TEXTO (text-transform)
Define se o texto fica em minúsculas (lowercase), em maiúsculas (uppercase) ou só com a primeira letra em maiúscula (capitalize).

ESPAÇAMENTO DAS LETRAS (letter-spacing)
Determina o espaço entre as letras do menu.

ALINHAMENTO DO TEXTO (text-align)
Define se o alinhamento do texto é centrado (center), alinhado à esquerda (left) ou alinhado à direita (right).

TIPO DE LETRA A NEGRITO (font-weight)
O tipo de letra do menu fica a negrito (bold).

ESPAÇO ENTRE OS LINKS DO MENU (margin)
Define a distância entre um link do menu e outro.

ALTURA DA LINHA (line-height)
Define a altura da linha.

ESPAÇO ENTRE O TEXTO E A MARGEM (padding)
Define a distância entre o tipo de letra e as margens do menu.

LARGURA DO MENU (width)
Define a largura do menu.

ALTURA DO MENU (height)
Define a altura do menu.

FLUTUAÇÃO DO MENU (float)
Define se a flutuação do menu é centrada (center), alinhada à esquerda (left) ou alinhada à direita (right).

ARREDONDAMENTO DAS BORDAS (border-radius)
Define o arredondamento das bordas do menu.

Depois de teres colocado o código antes da tag indicada, e de o teres alterado (ao teu gosto) e de acordo com a explicação dada acima, terás de passar ao seguinte passo.
Observação: No código eu apliquei todas as formatações, mas tu podes usar só as que pretendes. 
Agora vamos ter de "colocar" o menu a funcionar. Vai a design → elementos da página → adicionar um gadget → html/javascript e cola o código abaixo no novo gadget.
<div class="NOMEdoMENU"><a href="LINK">NOMEdoLINK</a></div>
Agora, na linha de código acima tens de substituir a parte NOMEdoMENU, pelo nome que deste ao teu menu, a parte LINK pelo link a que queres que o menu vá parar e a parte NOMEdoLINK, pelo nome da página ou rede social a que o link vá redirecionar.
Tens de colar o código acima de acordo com o número de links que queres que apareçam no menu.
Se tiverem dúvidas, não hesitem em enviar uma pergunta, pelo Ask.Fm do blog.

5 Comentários:

  1. Respostas
    1. De nada *-*, tento sempre explicar tudinho muito bem Aline.

      Eliminar
  2. O meu o espaçamento da letra e do link tá em 7px e todas as letras ficam umas encima das outras :c

    ResponderEliminar
    Respostas
    1. Olá Steph, experimente usar pt, em vez de px . Espero que consiga!

      Eliminar

« »