Menu Personalizado - Blogger

Olá pessoal!
Desculpe a "sumida", mas já voltei, e com um tutorial bem legal pra vocês.
O tutorial de hoje é como fazer um menu parecido com esse:

Então vamos lá!
Primeiro: Copie esse código e cole em um bloco de notas:

div.navigate a{

background: #87CEEB; color: #ffffff; letter-spacing: 0px; display:block; padding:0px 0;
border: 0px solid #000000;
width: 180px; margin-top:1px; position:relative; -webkit-transition-duration: .0s; z-index:1;
}


div.navigate a:hover{
font-weight: bold; letter-spacing: 1px; background: #FF69B4}; display:block; padding:0px 0;
border: 0px solid #000000; z-index:2;
}

Explicando: o de azul se refere a cor do menu quando ele está normal, e o roxo quando passa o mouse. Use essa tabela aqui para editar.
Bom, agora edite o código e copie.

Depois, vá em seu blog, Design, Designer do Modelo, Adicionar CSS e cole o código editado.
Agora para fazer o código funcionar, copie o script abaixo e cole em um gadget HTML/JavaScript.
<center><div class="navigate">
<a href="LINK 1"style="text-decoration:none">Guia 1</a><a href="LINK 2"style="text-decoration:none">Guia 2</a>

</div></center>
Agora substitua onde está escrito "LINK 1" pelo seu link, por exemplo: http://blogtal.com/ e onde está escrito "Guia 1" pelo nome do link, por exemplo: Home.
Pronto, agora é só salvar e visualizar que o seu menu já está pronto!