Criar um menu simples para o blog é uma das formas mais básicas para começar a personalizá-lo além de ajudar e muito para que os leitores encontrem as informações que você deseja destacar (como o que eu tenho aqui no blog – Home | Sobre | Contato). E este menu vale tanto para quem usa WordPress, quanto para quem usa o Blogger ok? E fique tranquilo, pois este é um tutorial simples que apenas requer atenção e principalmente cuidado com os detalhes. Então vamos lá!

Código do Menu

<div class='menu' id='menu'>
<ul>
<li>
<a href='URLDAPÁGINA' title='DESCRIÇÃO1'>DESCRIÇÃO2</a>
</li>
<li>
<a href='URLDAPÁGINA' title='DESCRIÇÃO1'>DESCRIÇÃO2</a>
</li>
<li>
<a href='URLDAPÁGINA' title='DESCRIÇÃO1'>DESCRIÇÃO2</a>
</li>
</ul>
</div>

Entendendo o código acima:

URLDAPÁGINA = Substitua pelo endereço da página que você quer que abra quando alguém clicar no link

DESCRIÇÃO1 = Escreva o que você quer que apareça quando a pessoa deixar o mouse parado no link

DESCRIÇÃO2 = Escreva o que você que apareça como link mesmo

Vamos ver um exemplo de como preencher um dos links do menu:

<li>
<a href='http://www.novonarede.com.br/blog' title='Página Inicial'>Home</a>
</li>

No exemplo acima o link seria assim: Home (abrindo a página inicial do blog). E como você pode ver, o menu está com três links. Portanto, se você quiser mais é só repetir o código correspondente ao link (vai de <li> até </li>).

No Blogger
Adicione o código antes ou depois do trecho correspondente ao header (cabeçalho) do blog. Algo assim: <div id='header-wrapper'> …tem códigos aqui… </div>

Em WordPress
Adicione o código do menu na página header.php (ou o que for correspondente no seu tema).

Estilo do Menu

* Menu
----------------------------------------------- */
.menu {
width: 100%;
height:27px;
margin: -46px 0 0 0;
padding: 0;
float: left;
font-size:13px;
font-family:sans-serif,Verdana,Tahoma,Helvitica;
}
.menu ul {
width: 100%;
height:27px;
margin: -38px 0 0 0;
padding: 8px 9px 12px 9px;
list-style-type: none;
float: left;
}
.menu li {
margin: 0;
display: inline;
}
.menu li a {
margin: 0;
padding: 8px 9px 12px 9px;
text-decoration: none;
color: #2BA94F;

}
.menu li a:hover {
background: #2BA94F;
padding: 8px 9px 12px 9px;
color: #ffffff;
}

No Blogger
Adicione o código acima próximo de .header { (antes ou depois, dependendo se você colocou o código anterior antes ou depois do cabeçalho. O lugar não importa muito, desde que você coloque antes de ]]></b:skin>).

Em WordPress
Adicione o código do menu ao final da sua página style.css (estilos do tema).

Vamos entender um pouco esse "estilo"!

Controla o menu em si, o tipo de fonte e os estilos de lista, assim como o espaçamento:

.menu {
width: 100%;
height:27px;
margin: -46px 0 0 0;
padding: 0;
float: left;
font-size:13px;
font-family:sans-serif,Verdana,Tahoma,Helvitica;
}
.menu ul {
width: 100%;
height:27px;
margin: -38px 0 0 0;
padding: 8px 9px 12px 9px;
list-style-type: none;
float: left;
}

Controla o link normal e o link antes de ser visitado:

.menu li {
margin: 0;
display: inline;
}
.menu li a {
margin: 0;
padding: 8px 9px 12px 9px;
text-decoration: none;
color: #2BA94F;
}

Controla o link em contato com o cursor do mouse:

.menu li a:hover {
background: #2BA94F;
padding: 8px 9px 12px 9px;
color: #ffffff;
}

Importante: Seja em WordPress, seja no Blogger, sempre salve uma cópia do seu tema/template antes de fazer qualquer alteração.

Importante 2: Tanto o código do menu, quanto os estilos que estão neste tutorial são os que usei no meu último modelo. Para você usá-los de acordo com o estilo do seu blog, você vai precisar alterar as cores dos links (color: #CÓDIGODACOR; background: #CÓDIGODACOR)

Importante 3: Cuidado na hora de fazer alterações para não apagar aspas ou pontos, caso contrário o menu pode não funcionar.

Faça bom uso!

Imagem: Kriss Szkurlatowski