Tutorial - Colocando Menu Horizontal

Found on Trechy Teen

    Quando fui fazer o meu layout, não sabia como fazer um menu horizontal, e, como era nova no negócio, aqueles tutoriais que diziam para "criar uma imagem assim e medir não sei o que assado" não me ajudaram. Por isso, hoje vamos aprender como fazer um menu horizontal sem muitas complicações.

Nível: Médio

1 - Entre em Layout>Adicionar um Gadget>HTML/JavaScript (na nova interface do blogger). Ou em Design>Adicionar um Gadget>HTML/JavaScript (na interface antiga do blogger) 

2 - Adicione o seguinte código:

<font face="FONTE";font size=4px><div style="text-align: right;"><span style='border-radius: 7px; border-style:dashed; border-width:thin; background-color:#ffdced;padding:  5px 15px 5px 15px;'><a href="LINK">CATEGORIA</a></span>

<span style='border-radius: 7px;border-style:dashed; border-width:thin; background-color:#deffdc; padding:  5px 15px 5px 15px;'><a href="LINK">CATEGORIA</a></span>

<span style='border-radius: 7px;border-style:dashed; border-width:thin; background-color:#fdffce; padding:  5px 15px 5px 15px;'><a href="LINK">CATEGORIA</a>

</span><span style='border-radius: 7px;border-style:dashed; border-width:thin; background-color:#fdffce; padding:  5px 15px 5px 15px;'><a href="LINK">CATEGORIA</a></span>

</div></font>

3 - Faça as alterações para ficar do seu jeito:
Em Vermelho-> Temos a fonte do texto. Cole o nome da fonte que quiser (exemplos: Arial, Monotype Corsiva, Century Gothic). Ela ficará da cor dos links do seu blog.
Em Laranja-> É o tamanho da fonte
Em Verde -> É o alinhamento do texto. Se quiser centralizado, substitua por center.Se quiser à esquerda, substitua por left.
Em Amarelo -> É a borda do menu. Se quiser + arredondado, aumente o número. Se quiser - arredondado, diminua o número.
Em azul -> É o estilo da borda (no meu caso, o tracejado). Se quiser pontilhado, substitua por dotted.Se quiser "linha", substitua por solid.
Em Roxo/Rosa -> É a cor de fundo
Não esqueça de, aonde está escrito "LINK", colocar o link da página e, aonde está escrito "Categoria", escrever o nome da página.

Ps.: O código original é do Attitude Included, mas fiz algumas alterações (coloquei fonte e o estilo da borda, por exemplo), então, se pegar esse código para algum tutorial, credite (tanto com o Teenage Dream, quanto com o Attitude Included).

Gostou? Tem dúvidas? Comente!