10.12.11

Tutorial - Colocando Menu Horizontal

| |

Tumblr_ltjbn3gbeo1r0g7u3o1_500_large
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!

Um comentário:

  1. Nossa procurei essa coisa por quase um mes e vc simplismente apareceu e me explicou tudo perfeitinho ai como eu te amo agora!!Parabens pelo blog tudo de bom pra vc e seu querido blog

    ResponderExcluir

Comente o quanto quiser, mas...
♥ Nada de palavrão!
♥ Para os "Estou te seguindo, segue?", só digo uma coisa: seguirei pelo conteúdo, ok, amr?
♥ Deixe o link do seu blog, vou amar visitar!
♥ Tento retribuir todos os comentários!