Junte-se a 22.515 pessoas que
decidiram aprender tudo sobre Criação de Blogs Profissionais e Redes Sociais.

Menus Vanessa S.

Criar Menu Vertical com CSS no Blog

Atendendo a pedidos, hoje vou ensinar como criar um menu vertical usando apenas CSS e instala-lo na sidebar do seu blog, igual a este que está na sidebar no meu blog de testes, que você pode conferir, no link abaixo.

Demo

[dica]Atenção: Salve o seu template antes de começar, clicando em “Baixar modelo completo”.
Nunca deixe de fazer um backup do seu Template para evitar transtornos.[/dica]

1º Passo:
Vá em “modelo” ? “Editar HTML” ? marque a opção “Expandir modelos de widgets”.
Copie o código abaixo e coloque-o antes de ]]></b:skin>


#navcontainer
{
background: #E4E0E0; /*Edite a cor de fundo*/
width: 200px;
margin: 0 auto;
padding: 1em 0;
font-family: georgia, serif;
font-size: 13px;
text-align: center;
text-transform: capitalize;
}
ul#navlist
{
text-align: left;
list-style: none;
padding: 0;
margin: 0 auto;
width: 90%;
}
ul#navlist li
{
display: block;
margin: 0;
padding: 0;
}
ul#navlist li a 
{
display: block;
width: 190px;
padding: 0.5em 0 0.5em 2em;
border-width: 1px;
border-color: #fff #808080 #ccc #fff;
border-style: solid;
color: #808080;
text-decoration: none;
background: #cccccc; /*Edite a cor de fundo*/
}
#navcontainer>ul#navlist li a { width: auto; }
ul#navlist li#active a
{
background: #808080; /*Edite a cor de fundo*/
color: #000000;
}
ul#navlist li a:hover, ul#navlist li#active a:hover
{
color: #000;
background: transparent;
border-color: #000000 #fff #fff #ccc;
}

Salve!

2º Passo:
Vá em “layout” ? Clique em “Adicionar gadget”? Escolha tipo “HTML/Javascript”.

Copie e cole o código abaixo:


<div id="navcontainer">
<ul id="navlist">
<li id="active"><a id="current" href="INSERIR ENDEREÇO DO LINK 1">LINK 1</a></li>
<li><a href="INSERIR ENDEREÇO DO LINK 2">LINK 2</a></li>
<li><a href="INSERIR ENDEREÇO DO LINK 3">LINK 3</a></li>
<li><a href="INSERIR ENDEREÇO DO LINK 4">LINK 4</a></li>
<li><a href="INSERIR ENDEREÇO DO LINK 5">LINK 5</a></li>
</ul>
</div>

 

Visualize e salve as alterações.
Não esqueça de inserir os links de seu menu no local especificado acima.

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

| Website

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

Desculpe, os comentários deste artigo estão encerrados.

4 Comentários

  1. ?? Mel ? mendes? ? ? disse:

    Testei e deu certo.Sem problemas usar na área de postagem.

  2. ?? Mel ? mendes? ? ? disse:

    Clau,só uma pergunta,posso usar este menu dentro da área de postagem,ou apenas se aplica ao sidebar? Desde já agradecida. : )

  3. ::Clau:: disse:

    Tinho:
    Obrigada pelo comentário, e fico feliz com seu reconhecimento, isso sim é gratificante!
    Realmente, eu blogo e tento da melhor forma possivel, repassar o q sei a todos por puro prazer.
    Obrigada mais uma vez e volte sempre aqui!

  4. Tinho disse:

    Obrigaduuuuuuu!!
    Por compartilhar seu conhecimento, por dispor do seu tempo para isto. São estas atitudes que nos fazem acreditar que ainda existem pessoas dispostas a ajudar sem querer nada em troca, simplesmente ajudam por prazer.
    Cuide-se bem!!!

Por gentileza, se deseja alterar o arquivo do rodapé,
entre em contato com o suporte.