Abaixo, um exemplo com 5 links, no caso de páginas estáticas que você possa criar em seu blog(lembrando que ao criar as páginas estáticas, o próprio Blogger oferece opções de menu, seja horizontal ou vertical). Você pode também criar links para posts específicos que você queira destacar no blog.
Coloque o código abaixo num gadget HTML/Javascript, indo em Painel de controle >> Layout >> Adicionar um gadget abaixo ou acima do cabeçalho(como você desejar):
<nav id="menu">
<ul>
<li><a href="URL DO SEU BLOG">Início</a></li>
<li><a href="URL DO LINK" target="_blank">Sobre</a></li>
<li><a href="URL DO LINK" target="_blank">Contato</a></li>
<li><a href="URL DO LINK" target="_blank">Mapa do blog</a></li>
<li><a href="URL DO LINK" target="_blank">Parcerias</a></li>
</ul>
</nav>O atributo target="_blank" tem a função de abrir o link em uma outra aba de seu navegador, a fim de que o leitor não saia da página inicial.
Agora vamos aos estilos em CSS:
/* ----- MENU ----- */
#menu ul {
padding: 0;
margin: 0px;
float: left;
width: 100%;
background-color: #EEEEEE; <!--Coloque aqui a cor de fundo do menu-->
list-style:none;
}
#menu ul li { display: inline; }
#menu ul li a {
padding: 2px 10px;
float:left;
background-color:#EEEEEE; <!--Coloque aqui a cor de fundo dos ítens-->
color: #000000; <!--Coloque aqui a cor da fonte-->
text-decoration: none;
font: Arial; <!--Coloque aqui o tipo da fonte-->
font-size: 80%; <!--Coloque aqui o tamanho da fonte-->
font-weight: bold; <!--Coloque aqui o peso da fonte, no caso está em negrito. Use italic para itálico ou normal para normal-->
}
#menu ul li a:hover {
background-color:#CCCCCC; <!--Coloque aqui a cor de fundo dos ítens quando o mouse passa sobre os ítens-->
color: #000000; <!--Coloque aqui a cor da fonte quando o mouse passa sobre os ítens, pode ser a mesma de antes-->
}Os textos entre <!-- ... --> que estão em azul são comentários e que podem ser apagados.
O código CSS pode ser colocado de três maneiras:
1 - Através do designer de Modelo, indo em painel de controle >> Modelo >> Personalizar >> Avançado >> Role até achar "Adicionar CSS", copie e cole o código CSS na caixa de texto:
 |
| Método recomendável. |
2 - Ou direto no código do seu template (nesse caso é recomendável antes, fazer um back up do seu modelo, caso algo dê errado) , indo em painel de controle >> Modelo >> Editar HTML >> clicando na seta para abrir os estilos do seu blog, que fica entre
<b:skin>...</b:skin>: |
| Só use esse método se você tem o mínimo de conhecimento em layouts do Blogger |
Cole o código CSS antes de
]]</b:skin>: |
| É fácil, mas requer atenção! |
3 - Você pode também colocar os códigos HTML e CSS dentro de um gadget HTML/javascript dessa maneira:
<style>/* ----- MENU ----- */
#menu ul {
padding: 0;
margin: 0px;
float: left;
width: 100%;
background-color: #EEEEEE;
list-style:none;
}
#menu ul li { display: inline; }
#menu ul li a {
padding: 2px 10px;
float:left;
background-color:#EEEEEE;
color: #000000;
text-decoration: none;
font: Arial;
font-size: 100%;
font-weight: bold;
}
#menu ul li a:hover {
background-color:#CCCCCC;
color: #000000;}
</style>
<nav id="menu">
<ul>
<li><a href="URL DO SEU BLOG">Início</a></li>
<li><a href="URL DO LINK" target="_blank">Sobre</a></li>
<li><a href="URL DO LINK" target="_blank">Contato</a></li>
<li><a href="URL DO LINK" target="_blank">Mapa do blog</a></li>
<li><a href="URL DO LINK" target="_blank">Parcerias</a></li>
</ul>
</nav>Eis como fica este menu:
 |
| Menu horizontal normal |
 |
| Quando passa o mouse sobre um link |
Et voilà! Temos um menu horizontal bem simples. Podemos estilizá-lo com bordas, sombras e outras coisas que o CSS3 possa nos oferecer, mas por ora é só!
