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 devem ser modificados
Antes de passar a segunda parte do código, os valores que aí estão (width, margin, color, etc) podem e devem ser modificados
#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.
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.