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.