{Aprenda Blogspot}

Aprenda Blogspot Blog | Created By Www.BestTheme.Net

Criando um menu horizontal no blog

Posted by Igor Natanyo


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 visualizar o resultado, por que se não estiver bom, basta clicar em Limpar Edições.

1º Parte:

Coloque antes de ]]></b:skin>

#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 ( HTML):


<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='false' title='Templates Novo Blogger (Header)' type='Header'/>
</b:section>
</div>

Este código:

<div id='navigation'><b:section class='navigation' id='navigation' showaddelement='yes'></b:section></div>


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.

One Response so far.