Colocando Menu Horizontal no blog

Nunca deixe de fazer um backup do seu Template para evitar transtornos.

APLICAR ESTILOS

Vá em modelo Editar HTML, marque a opção “EDITAR HTML”.

Copie o código abaixo e coloque-o antes de ]]></b:skin>

Atenção: Modifi#navigation{

height:30px;

width:auto;

position:relative;

line-height:2.9em;

margin:0px auto 0px;

text-transform:uppercase;

font-size:12px;

font-weight:normal;

background: url(link da sua imagem) repeat-x;

}

#navigation li{

float:left;

display:block;

float:left;

margin:0;

pading:0;

}

#navigation li a{

display:block;

padding:0 10px;

text-transform:uppercase;

text-decoration:none;

background-color:inherit;

color: #000000;

}#navigation li a:hover{

background:transparent url(endereço da sua imagem) repeat-x;

text-decoration:none;

}

que os valores de “width, margin, color” conforme o layout do seu template.

Vou explicar algumas coisas que podem ser modificadas:

Em #navigation
height:30px; -> Height é a altura que terá o menu
line-height:2.9em; -> Line-height é a altura da linha
margin:0 auto 0; -> Margin: este modo (auto) centraliza o menu na página
background: url(Endereço da Imagem) repeat-x; -> Background é o plano de fundo, que pode ser uma cor ou uma imagem.
Repeat-x faz a imagem se repetir horizontalmente.

Em #navigation li:
Altere os valores de ‘margin’ e padding’ de acordo com seu template.
Você pode incluir borda ao link, para isso, acrescente:
border-right:1px solid #787878; -> alterando a cor e espessura da borda.
Exemplo:Se quiser a borda só à direita = (right), esquerda = (left), topo = (top), ou base = (bottom).

Em #navigation li a é onde você vai configurar toda a parte referente aos links do seu menu antes de passar o mouse em cima (tamanho da fonte, cor etc):

Em #navigation li a:hover que se determina cor dos links e background quando se passa o mouse por cima do link:
Se você quiser incluir uma imagem acrescente o endereço da sua imagem no espaço destacado entre parênteses:
background:transparent url(endereço da sua imagem) repeat-x;

Salve as modificações!

Se quiser, veja o artigo que trata sobre background para que você possa entender um pouco mais sobre como estipular o comportamento da sua imagem no background

INCLUINDO A LISTA DE LINKS NO MENU

Agora que você já entendeu o que pode ser modificado, vamos a segunda parte do código:

Incluir uma lista de links no seu menu já criado.

Vá em modelo>>editar HTML (Não precisa Expandir modelos de widgets).

Para deixar o menu abaixo do cabeçalho, procure por:

<div id='header-wrapper'>

E cole este código logo abaixo:

<div id='navigation'>

 <ul>

<li><a expr:href='data:blog.homepageUrl' title=' Início'>Home</a></li>

<li><a href='http://super7tutorias.blogspot.com.br/' title='Edit'>Link 1</a></li>

<li><a href='http://super7tutorias.blogspot.com.br/' title='Edit'>Link 2</a></li>

<li><a href='http://super7tutorias.blogspot.com.br/' title='Edit'>Link 3</a></li>

<li><a href='http://super7tutorias.blogspot.com.br/' title='Edit'>Link 4</a></li>

<li><a href='http://super7tutorias.blogspot.com.br/' title='Edit'>Link 5</a></li>

<li><a href='http://super7tutorias.blogspot.com.br/' title='Edit'>Link 6</a></li>

</ul>

</div>

Não se esqueça de inserir seus links na parte onde está escrito ‘http://super7tutorias.blogspot.com.br/’ e acrescentar títulos aos seu links.

Visualize. Se estiver tudo certo salve as modificações.
Procure sempre ir visualizando antes de salvar para ver se tudo está configurado de acordo com o seu gosto, se estiver tudo ok: salve!