Menu vertical na lateral (Sidebar) do blogger - Blogspot 2

Olá pessoal! Tenho uma excelente sugestão para quem gosta de menu com efeitos e mais ainda para quem gosta de menu na lateral (sidebar) do blogger, onde você poderá postar páginas extras em um só lugar, é muito simples, prático e em apenas "um clique", você terá seu menu com efeitos e com um design moderno  no blogger. Vamos ao que interessa...

Logado ao blogger, vá em Desing ~> Elementos da Página ~> Adicionar um Gadgets HTML/JavaScript, copie e cole todo o código abaixo no Gadgets.

<style type="text/css">


#ddblueblockmenu{
border: 1px solid
#FF4500; /*Cor da borda*/
border-bottom-width: 1;
width: 100%;
}
#ddblueblockmenu ul{
margin: 0;
padding: 0;
list-style-type: none;
font: normal 90%
'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;
}
#ddblueblockmenu a{
display: block;
padding: 3px 0;
padding-left: 9px;
width: 94%;
text-decoration: none;
color: #363636; /*
Cor da fonte do menu */
background-color: #A9A9A9; /*cor do background */
border-bottom: 1px
solid #FF4500; /*Cor da borda do botão */
border-left: 7px
solid #363636; /*cor da borda esquerda */
list-style-type:none;
}
* html #ddblueblockmenu a{ /*IE only */
width: 94%; /*IE 5*/
width: 94%;
}
#ddblueblockmenu a:hover {
background-color: #B5B5B5; /*Cor do background do
menu de baixo*/
border-left-color:
#FF4500; /*cor da borda do menu esquerdo*/
}
#ddblueblockmenu
div.menutitle{
color: #ffffff; /*
Cor da fonte do titulo */
border-bottom: 1px solid black;
padding: 1px 0;
padding-left: 5px;
background-color: #FF4500;  /*cor do
background do menu inicial*/
font: bold 90% 'Trebuchet MS', 'Lucida Grande',
Arial, sans-serif;
}
</style>
<div id="ddblueblockmenu">
<div class="menutitle">Menu Lateral</div>
<ul>
<a href="#">Página Inicial</a>
<a href="#">Seu-titulo01</a>
<a href="#">Seu-titulo02</a>
<a href="#">Seu-titulo03</a>
<a href="#">Seu-titulo04</a>
<a href="#">Seu-titulo05</a>
</ul></div>

O lance é bem simples, nada de preocupação, poste em
cada parte do código tudo o que você deve saber, onde tá #, é exatamente onde você vai colocar
seu link alterando os determinados
nomes, por exemplo, se você for colocar um link de "contato" mude
onde está SEU-TITULO para contato e assim com os demais.

Na parte das cores, tá tudo explicado ao lado de cada um entre "/*----*/” ao longo do código. Quando as alterações estiverem todas terminadas salve, veja o Demo

Qualquer dúvida deixe um comentário.

Até a próxima.