Geralmente um menu na lateral do blog, serve para listar o conteúdo mais interessante (ao seu ver) que existe em seu blog. Ou o conteudo mais relevante.
1 - A primeira coisa é fazer um backup do template para que não haja perca total, se houver erros.
2 - Acesse esse site para gerar o seu menu.
3 - No campo "How many links do you want in your list?" (Quantos links você deseja para a sua lista) selecione a quantidade de botões que você deseja no seu menu (Pode ter de 1 a 20 botões inicialmente).
4 - Escolha a quantidade desejada e pressione "Next".
5 - Aparecerá um monte de campos....cada linha corresponde a quantidade de botões que você selecionou....preencha da seguinte forma:
Link Text - Nome do Botão (ex. Vídeos)
Link Title - Nome que aparece quando se põe o mouse sobre o botão (Ex. Baixe vídeos)
Link Destination (href) - é o link destino do botão (ex. http://meublog.com/videos).
>>> Pelo exemplo acima, seu link ficaria assim: Vídeos
Preencha todos os campos desejados conforme as configurações acima, lembrando que cada linha corresponde a um botão, ou um link.
6 - Você será redirecionado para a página onde escolherá o modelo do link. Selecione o modelo do seu gosto, conquanto que seja VERTICAL uma vez que estamos fazendo um menu vertical. Este menu poderá ser personalizado depois.
7 - Lá no campo "How to identify and style the menu" mantenha selecionado "id" e clique em "Next".
8 - Pronto, agora foram gerados os códigos do menu. Na janela possuem dois campos, o de cima com o código HTML que irá construir uma lista com os referidos links do menu e do de baixo, com os códigos CSS, que irão estilizar esta lista e transformá-la em um menu.
No campo "Here is the HTML for this list:" (Aqui está o HTML para a lista). Copie o código deste campo.
9 - No Layout do blog, adicione um elemento de página do tipo "HTML/Javascript" e cole o código copiado aí dentro (Teclas CTRL + V). Clique em "Salvar".
10 - Salve o modelo e acesse o HTML do blog. Volte para o gerador do MENU e copie o código do campo "Here is the CSS for this list:" (Aqui está o CSS para a lista). Agora novamente no blog, dentro do HTML, cole após a tag <HEAD> e antes de </HEAD>, sempre procurando um lugar ideal de fácil localização, sem apagar nada que exista aí dentro.
11 - Visualize o seu template para ver se o menu apareceu. Se positivo, SALVE O TEMPLATE e pronto!
>>> Aprenda a estilizar o seu menu
Vou utilizar um código deste mesmo sistema gerador de menus, porém ele pode não ser idêntico ao seu, mas é só para aprendermos a utilizar e estilizar conforme desejamos o nosso menu.
Esse método também serve para o menu horizontal....
Aqui temos um código de CSS que define os parâmetros do nosso menu. Esse código "modela" a estrutura do HTML. Sem ele, o nosso menu seria uma motoeira de links..
CSS
Explicação
#navlist
Iremos estilizar a coluna de nome “navlist”
{
Damos início aos parâmetros
padding-left: 0;
Dizemos que a distância da borda esquerda pra dentro é zero pixels
margin-left: 0;
Dizemos que a distância da borda esquerda pra for a é zero pixels
border-bottom: 1px solid gray;
A borda de baixo dos botões possuirão 1 pixel, do tipo “solid” e na cor cinza. (Veja aqui outros tipos de borda).
width: 200px;
O nosso botão possuirá 200 pixels de largura
}
Aqui finalizamos os parâmetros na “navlist”
#navlist li
Agora iremos estilizar a mesma coluna “navlist”, porém, as linhas e não toda a coluna...
{
Damos início aos parâmetros
list-style: none;
Dizemos que não queremos que a lista possuia estilo, ou seja, bolinhas, números. (Veja aqui mais sobre listas)
margin: 0;
Todos os botões possuirão 0 pixels da borda pra fora
padding: 0.25em;
Todos os botões possuirão 0,25 % de distância da borda para dentro em relação ao tamanho da fonte
border-top: 1px solid gray;
Todos os botões possuirão a borda de cima com 1pixel de largura, do tipo “solid” na cor cinza.
}
Finalizamos os parâmetros das linhas da “navlist”.
#navlist li a
Desta vez, damos início a estilização das linhas da “navlist” na função link, para estilizar o texto.
{
Iniciamos os parâmetros
text-decoration: none;
Dizemos que não deve haver a decoração padrão (exemplo) dos links
}
Finalizamos os parâmetros
Mais explicado que isso é difícil. (rs. Tenham um bom proveito!
0 comentários:
Postar um comentário