Criando um Menu Horizontal na Blogger

Atenção! Este tutorial aplica-se aos antigos modelos de layout (Templates minima), ou templates modificados. Esta dica NÃO se aplica aos novos modelos criados em Designer de Modelo.
Se você estiver usando templates do “Designer de Modelo”, você deve seguir este tutorial: [/alerta] Salve o seu template antes de começar, clicando em “Baixar modelo completo”.
Nunca deixe de fazer um backup do seu Template para evitar transtornos.

Aplicar estilos

1º Parte:

Vá em modelo>>Editar HTML, marque a opção “Expandir modelos de widgets”.
Copie o código abaixo e coloque-o antes de ]]></b:skin>


#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; }

Atenção: Modifique 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'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='false' title='NOME DO SEU BLOG (Header)' type='Header'/>
</b:section>
</div>

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='inserir link aqui' title='Edit'>Link 1</a></li> <li><a href='inserir link aqui' title='Edit'>Link 2</a></li> <li><a href='inserir link aqui' title='Edit'>Link 3</a></li> <li><a href='inserir link aqui' title='Edit'>Link 4</a></li> <li><a href='inserir link aqui' title='Edit'>Link 5</a></li> <li><a href='inserir link aqui' title='Edit'>Link 6</a></li> </ul> </div>

Não se esqueça de inserir seus links na parte onde está escrito ‘inserir link aqui’ 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!