Menu vertical para blog - * Blog Elaine Gaspareto *

Menu vertical para blog

em 21/08/2014

menu vertical para blog
Aqui no blog eu já mostrei vários tipos de menu para blogs.
Veja os modelos que já publiquei:


Menus para blog


A maioria são menus horizontais, mas hoje quero mostrar um modelo bem simples, vertical, e que não usa script algum, é todo em CSS.
Veja a demonstração:


Demonstração do tutorial


Para colocar em seu blog faça assim:
Acesse a aba Layout de seu blog e clique em Adicionar um gadget. Escolha a opção HTML/JAVASCRIPT e na janela que abrir cole este código:


Copiar o código

Agora preste atenção aos campos marcados no código.
Cada marcação define cor de fundo, cor e tipo de fonte, etc.
Altere para combinar com seu blog.
Aqui tem uma tabela de cores.
Cada cor é definida pelo código hexadecimal precedido do sinal #
Alterar esse código altera as cores, tá?

Isso é opcional, mas os campos que dizem Endereço do link e Nome da aba são obrigatórios.
Em Endereço do link, claro, coloque o endereço para onde o link deve levar e em Nome da aba coloque, claro, o nome da aba.
Ficaria assim, se eu colocasse em meu blog:
<li><a href="http://www.elainegaspareto.com/">Página inicial</a></li>
Sendo que em vermelho é o link e em azul é o nome da aba.

Faça isso com todos os links e depois de pronto, salve.
Arraste para onde deseja que fique e salve de novo.
Olha como fica o meu:




Gostou?
Deixe seu comentário se fizer em seu blog ou se tiver dúvidas.
Aproveita e compartilhe essa postagem, curta ou compartilhe no Facebook.
Isso ajuda o blog a crescer e melhorar.
Muito obrigada!

8 comentários via Blogger
comentários via Facebook

8 comentários:

  1. Muito legal ,Elaine!! Sempre trazendo coisas boas! bjs, tudo de bom,chica

    ResponderExcluir
  2. Eu não consigo altera a cor dos menus.Como faço?

    ResponderExcluir
  3. Oi Elaine!
    Tens algum tutorial de menu vertical com abas e sub-abas??
    Não estou encontrando..!
    Obrigada
    Beijos

    ResponderExcluir
    Respostas
    1. Sandra, não tenho, mas é uma boa dica.
      Vou montar um tutorial e posto assim que der.
      beijossss

      Excluir
  4. Olá Elaine,gostaria que você me esclarecesse uma dúvida.
    Eu achei aqui em seu blog um tutorial de MENU com sub-abas,tudo bem,eu testei primeiro em meu blog de testes e deu perfeitamente,mas quando fui fazer no meu blog oficial... Eu fiz tudo exatamente igual passo a passo calmamente,mas deu errado,então eu apaguei o código do menu no HTML,e agora sempre que eu tento colocar outro MENU horizontal ele fica pequeno no canto esquerdo do blog.
    Poderia me ajudar?Ficarei grata.
    Muito Obrigada,aguardo a resposta.

    ResponderExcluir
    Respostas
    1. Amanditta, eu não faço ideia do que pode ser.
      Se você fez backup retorne o modelo ao que era antes de inserir o menu. Por isso sempre digo pra fazer backup. Sempre.
      Se não fez não sei o que pode ser...
      Tem certeza que retirou todos os códigos inseridos anteriormente?

      Excluir
  5. Muito obrigado pelas dicas
    qndo puder faça me uma visita
    abrass: Renato Porta Joia MDF

    ResponderExcluir
  6. Oi fiz um menu no Photoshop arredondado com as medidas 200 por 45. Coloquei as postagens. Está na posição. Mais não consigo colocar o hover e nem o submenu. Ele está na vertical.me ajude por favor.

    ResponderExcluir

Olá! Muito obrigada por ler meu blog e obrigada também por se dispor a comentar meus posts. Seja muito bem-vindo(a)!

Importante!
Devido à falta de tempo hábil eu não me comprometo a responder perguntas referentes aos tutoriais postados neste blog.
Pedidos de ajuda individual serão respondidos conforme o meu tempo e disponibilidade permitirem.
Por favor, entenda: comentários sem relação alguma com o post não serão liberados e nem respondidos.

Para saber mais sobre a melhor forma de utilizar este blog leia Termos de uso do blog.



Muito obrigada, fique à vontade para interagir.
Mas lembre-se:
Gentileza, educação e boas maneiras servem também para a vida nos blogs…



No Instagram