Antes de mais nada, quero pedir desculpas mais uma vez, estou meio ausente do blog e principalmente do Twitter, problemas pessoais e escola. Paciência. =/

Agora vamos continuar com mais uma parte da nossa seria “Fazendo seu Template”. É hora de adicionarmos um menu superior no template, isso ajuda muito na navegação interna de seu blog. Os leitores agradecem…

1º – Entre em “Layout” -> “Editar HTML”.

2º – Procure (Ctrl + f):

<div id=\'header-wrapper\'>
</div>   

Adicione logo depois:

<div id=\'front_menu\'>
<li><a class=\'s\' href=\'URL DO SEU BLOG\' title=\'Início\'><span>Início</span></a></li>
<li><a class=\'s\' href=\'#\' title=\'Sobre\'><span>Sobre</span></a></li>
<li><a class=\'s\' href=\'#\' title=\'Vídeos\'><span>Vídeos</span></a></li>
<li><a class=\'s\' href=\'#\' title=\'Contato\'><span>Contato</span></a></li>
</div>

Isso que você acabou de adicionar é o menu, vamos editar o conteúdo do menu e depois aplicar os estilos.

É bem simples configurar, troque URL DO SEU BLOG pelo link do seu blog.
As outras opções é só trocar # pelo link e os nomes (Sobre, Vídeos, Contato...) substitua por aquilo que você quiser nomear.

Se você não quiser alguma das opções é só apagar de <li> a </li>. E para adicionar mais uma opção, é só duplicar uma das opções e editar o conteúdo.

3º – Vamos colocar o estilo do menu. Procure (Ctrl + f): ]]></b:skin>

Adicione ANTES desse código, o seguinte CSS:

#front_menu {
float:left;
overflow:hidden;
position:relative;
text-transform:uppercase;
width: 100%;
background: #c1c1c1;
}
#front_menu li {
float:left;
padding: 5px;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin-right:4px;
}
* html #front_menu li {
display:inline;
}
#front_menu li a {
background:transparent;
color:#0960a3;
cursor:pointer;
display:block;
font-family:Arial,Helvetica,sans-serif;
font-size: 12px;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:700;
line-height:26px;
padding-left:15px;
text-decoration:none;
}
#front_menu li a span {
background:transparent ;
display:block;
line-height:24px;
padding-right:15px;
}
#front_menu a {}
#front_menu a:hover{
color: #489ddf; 
background-position:left bottom;
}
#front_menu li a.s {
background-position:left bottom;
}
#front_menu li a:hover span, #front_menu li a.s span {
background-position:right bottom;
}

No estilo: #front_menu { você vai editar o fundo do menu, no lugar de background adicione o código da cor desejada, ou adicione uma imagem. Para substituir a cor por uma imagem use:

background: CÓDIGO COR url() no-repeat;
ou
background: url() repeat;

Leia mais sobre como colocar uma imagem com CSS clicando aqui.

No estilo: #front_menu li a { faça as mudanças nas letras, cores, tudo sobre a parte escrita do menu.
Lembrando:
color:#0960a3; é a cor da letra.

As outras mudanças depende do gosto de cada um, seja curioso, apague, modifique e aprenda o que cada coisa significa.

Apos fazer as modificações, teste e salve.

Obs.: Você pode adicionar outro tipo de menu, existe vários e vários sites que trabalham só com menu CSS, procure no Google por \"Menu CSS\". Se quiser uma dica: CSS Menu Maker, um ótimo gerador de menu. Lembre-se de hospedar as imagens do menu e substituir onde necessário no CSS do menu.