Menu vertical de fácil instalação e configuração

Este exemplo mostra como vai ficar o menu

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:

<center>
<style>
#button {
width: 12em;
border-right: 1px solid #000; /* cor da borda esquerda*/
padding: 0 0 1em 0;
margin-bottom: 1em;
font-family: 'Trebuchet MS', 'Lucida Grande', Verdana, Arial, sans-serif; /* tipo da fonte */
background-color: #90bade; /* cor de fundo externo*/
}
#button ul {
list-style: none;
margin: 0;
padding: 0;
border: none;
}
#button li {
border-bottom: 1px solid #90bade; /* cor da borda inferior */
margin: 0;
list-style: none;
list-style-image: none;
}
#button li a {
display: block;
padding: 5px 5px 5px 0.5em;
border-left: 10px solid #1958b7; /* cor da borda direita */
border-right: 10px solid #508fc4; /* cor da borda esquerda */
background-color: #2175bc; /* cor de fundo interno */
color: #fff; /*cor da fonte */
text-decoration: none;
width: 100%;
}
html>body #button li a {
width: auto;
}
#button li a:hover {
border-left: 10px solid #1c64d1; /* cor da borda direita com efeito hover */
border-right: 10px solid #5ba3e0; /* cor da borda esquerda com efeito hover */
background-color: #2586d7; /* cor de fundo em estado hover */
color: #fff; /* cor da fonte em estado hover */
}
</style>
<div id="button">
  <ul>
    <li><a href="Endereço do link">Nome da aba</a></li>
    <li><a href="Endereço do link">Nome da aba</a></li>
    <li><a href="Endereço do link">Nome da aba</a></li>
    <li><a href="Endereço do link">Nome da aba</a></li>
    <li><a href="Endereço do link">Nome da aba</a></li>
    <li><a href="Endereço do link">Nome da aba</a></li>
    <li><a href="Endereço do link">Nome da aba</a></li>
    <li><a href="Endereço do link">Nome da aba</a></li>
  </ul>


</div></center>

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 está minha 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.

Faça isso com todos os links e depois de pronto, salve.
Arraste para onde deseja que fique e salve de novo.
Espero que tenha gostado, até a próxima.

About Odnei Sales

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.