Menu vertical para blog

em 21 de agosto de 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!

Alguém que escreve. Especialista em si mesma. Leitora que lê muito menos do que gostaria. Blogueira por paixão e profissão. Propriedade da Princesa e da Menininha, e de um cachorrinho muito levado chamado Bloguinho. Tentando viver. Sempre.

7 comentários , comente também!

  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

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…