"
"
Descricão: Muitas Pessoas estavam pedindo que eu passasse o meu Menu horizontal. Mais Infelizmente isso eu não posso passar. Apesar de Diversos blogs já ter Pegado, Não posso Passar. Mais Trouze uma Tutorial de como criar o seu proprio Menu. Não sera igual ao meu, Mais Juntos na Tutorial voce vai personalizando o menu como você quiser, Com cores e Modelos que você preferir.
Tutorial Criar Menu Horizontal
Aconselho sempre, antes de qualquer mudança no seu template, que você salve uma cópia do mesmo antes de tudo. E mais, nunca salve antes de visualisar o resultado, por que se não estiver bom, basta clicar em Limpar Edições.
1º Parte:
Coloque antes de ]]>
#navigation{
height:30px;
width: 800px;
line-height:2.9em;
margin:0px auto 0px;
background: url(link da sua imagem) repeat-x;
}
#navigation ul{
margin: 0 0 0;
padding: 0 0 0;}
#navigation li{
float:left;
list-style-type:none;
border-right:1px solid #787878;
white-space:nowrap;
}
#navigation li a{
display:block;
padding:0 10px;
font-size:0.8em;
font-weight:normal;
text-transform:uppercase;
text-decoration:none;
background-color:inherit;
color: #000000;
}
#navigation .selected,#navigation a:hover{
background:#808080;
color:#000000;
text-decoration:none;
}
Todos os valores que aí estão (width, margin, color, etc) podem e devem ser modificados conforme o layout do seu template.
Antes de passar a segunda parte do código, vou explicar algumas coisas que podem ser modificadas:
#navigation{
height:40px;
width: 890px;
line-height:2.9em;
margin:0 auto 0;
background: url(ENDEREÇO DA IMAGEM) repeat-x;
}
Height é a altura que terá o menu
Width é a largura
line-height é a altura da linha (não confundir com o tamanho da fonte)
Margin: do modo que aqui se apresenta, centraliza o menu na página (0 auto 0)
Background é o plano de fundo, que pode ser uma cor ou uma imagem. Repeat-x garante que uma imagem se repeti horizontalmente.
#navigation li{
float:left;
list-style-type:none;
border-right:1px solid #787878;
white-space:nowrap;
}
border: aqui você define se terá borda em toda a volta de cada item do menu (para isso deixe só Border: 1px solid...), se só à direita (right), esquerda (left), topo (top), ou base (bottom). Basta determinar antes dos valores:
border-bottom: 1px solid etc etc...
border-top: 1 px solid etc etc....
#navigation li a{
display:block;
padding:0 10px;
font-size:0.8em;
font-weight:normal;
text-transform:uppercase;
text-decoration:none;
background-color:inherit;
color: #000000;
}
Color: determinará a cor que dos links antes que se passe o cursor sobre eles.
#navigation .selected,#navigation a:hover{
background:#808080;
color:#000000;
text-decoration:none;
}
Aqui se determina cor dos links e background quando se passa o cursor por cima do link.
2º Parte:
Para deixar o menu sob o cabeçalho, coloque abaixo de ( ):
Clique aqui e acesse o codigo
Este código:
Clique aqui e acesse o Codigo
Salve as modificações. Vá ao painel do Blogger (Modelo/Layout) e veja um novo espaço, sob o cabeçalho, onde é possível adicionar elementos de página. Crie uma lista de links e arraste para este novo espaço. Salve e visualize.
0 التعليقات:
إرسال تعليق