Como personalizar o menu de páginas do Blogger?

Todos os templates do Designer de Modelo do Blogger possuem em sua configuração um menu simples, de links ou de páginas.
Esse menu é assim, veja no print de um dos modelos Travel:

O menu funciona mas é bem simples.
Então hoje vou ensinar 2 personalizações diferentes, que funcionam em todos os modelos do Design de Modelo, menos os de Visualização dinâmica.
Vamos aprender?

Antes de mais nada edite a navbar do blog escolhendo a opção Desativado.
Vá em Layout/Navbar e faça a alteração.

Depois você precisa ter o menu instalado em seu blog.
Para isso clique em Layout, e a seguir clique em Adicionar um gadget.
Escolha a opção Páginas.
Caso você tenha páginas já criadas em seu blog elas aparecerão ao escolher essa opção de gadget.

E recentemente o Blogger adicionou uma nova funcionalidade ao gadget Páginas, que é a possibilidade de incluir nele links externos, não somente as páginas estáticas.
Veja o print:

Então dá pra ter um menu legal apenas personalizando o que já existe no blog, não é incrível?

Personalizar o menu de páginas do Blogger - Modelo acima do cabeçalho

Depois de personalizado o menu original ficará assim, no topo acima do cabeçalho, com o texto centralizado:

Vá ao seu painel do blog e clique em Modelo.
A seguir clique em Editar HTML e dentro da caixa de código tecle Ctrl+F.
Na barra de busca que expandir digite /* Tabs e tecle Enter para localizar.
Substitua tudo o que estiver contido nessa classe, entre /* Tabs e  /* Headings por este código:

Copiar o código do 1º modelo

Veja o print:

Depois de substituir salve as alterações.
Se tudo deu certo o seu menu estará agora acima do cabeçalho, no topo, ocupando 100% da largura do blog e com o texto centralizado.
Para alterar cores e fontes vá ao seu painel, clique em Modelo/Personalizar e a seguir na opção Avançado selecione trabalhar a opção Plano de fundo das guias e Texto das guias.

Importante:
Como você vê ele ficará no topo, acima do cabeçalho, mas não ficará fixo, ok? Ele rolará com a página.
Se desejar um menu fixo no topo do blog leia este tutorial:
Menu horizontal fixo no topo do blog com ícones de redes sociais

Personalizar o menu de páginas do Blogger - Modelo com abas separadas e com efeito

A segunda personalização que quero ensinar deixa o menu com as abas separadas, e tem efeito ao passar o mouse.
Assim:

Para ter essa versão proceda exatamente como expliquei em relação ao outro modelo.
Mas na hora de substituir o código no template use este:

Copiar o código do 2º modelo
Pode visualizar se desejar, e se estiver ok salve as alterações. Cores e fontes você muda como expliquei em relação ao modelo anterior.
Dicas extras:

• Faça sempre essas experiências em um blog de testes e só faça em seu blog depois de dominar completamente;
• Caso seu blog use um template modificado esse tutorial não se aplica;
• Caso você já tenha feito alterações no código original do menu do Blogger precisará substituir as alterações antigas pelas novas;
• Esse tutorial só funciona para o menu nativo do Blogger;
• Aqui tem um monte de menus que já ensinei caso prefira um mais elaborado.

Caso você queira ter em seu blog mas não consiga sozinho ou não tenha tempo e paciência para fazer entre em contato comigo e combinamos o valor, eu deixo prontinho em seu blog por um preço super acessível!

Gostou?
Que tal compartilhar o tutorial, ou curtir... ou recomendar no G+...