Menu vertical com CSS3 fantástico

Olá pessoal vamos aprender hoje a instalar um menu vertical com CSS3 fantástico.
Você pode antes ver a demonstração ao vivo clicando no link abaixo.


               
DEMO
Espero que você faça um backup do seu template primeiro, para evitar transtornos caso venha alguma coisa dar errado, ok?

Vamos começar?

Este menu requer um pouco mais de atenção na segunda etapa, mas nada que sua competência não absorva.

1-Entrar em Blogger
2-Selecione o blog se você tiver muitos
3-Em seguida vá a MODELO -> Clique em ”Editar HTML”
4-Em seguida, Ctrl+f encontre </head>
5-Em seguida copie o código abaixo e cole acima dele, ou seja, antes dele.
<style> .shadowblockmenu-v{ font: bold 14px Germand; width: 300px; } .shadowblockmenu-v ul{ border: 1px solid #eee; padding: 0; margin: 0; list-style: none; } .shadowblockmenu-v ul li{ margin:0; padding:0; } .shadowblockmenu-v ul li a{ display:block; text-transform: uppercase; color: #494949; padding: 10px 15px; text-decoration: none; border-bottom: 1px solid #cacaca; border-right: 1px solid #cacaca; /*right border between menu items*/ -moz-box-shadow: inset 7px 0 10px rgba(114,114,114, 0.6); /* Add inset shadow to each menu item. First 3 values in (114,114,114, 0.5) specifies rgb values, last specifies opacity */ -webkit-box-shadow: inset 7px 0 10px rgba(114,114,114, 0.6); box-shadow: inset 7px 0 10px rgba(114,114,114, 0.6); text-shadow: 0 -1px 1px #cfcfcf; /* CSS text shadow to give text some depth */ -moz-transition: all 0.2s ease-in-out; /* Enable CSS transition between property changes */ -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .shadowblockmenu-v ul li a:hover, .shadowblockmenu-v ul li a.selected{ color: black; -moz-box-shadow: inset 7px 0 10px rgba(216,89,39, 0.5), inset 0 0 15px rgba(216,89,39, 0.6), inset 0 0 20px rgba(216,89,39, 0.8); /* Add 3 inset shadows to each menu item */ -webkit-box-shadow: inset 7px 0 10px rgba(216,89,39, 0.5), inset 0 0 15px rgba(216,89,39, 0.6), inset 0 0 20px rgba(216,89,39, 0.8); box-shadow: inset 7px 0 10px rgba(216,89,39, 0.5), inset 0 0 15px rgba(216,89,39, 0.6), inset 0 0 20px rgba(216,89,39, 0.8); } </style>

6-Em seguida, visualizar modelo, se tudo estiver normal
clique em Salvar modelo.

Tudo certo, vamos para segunda etapa.

Clique em layout

Adicionar um gadget

Adicionar legenda

Depois, clique em HTML / Javascript

Copie e cole o código abaixo em seu widget, não antes de editar a parte destacada em em laranja.

<div class="shadowblockmenu-v">
<ul>
<li><a href="http://bhogai.blogspot.com.br/">Inicio</a></li>
<li><a href="http://bhogai.blogspot.com.br/">Blogger</a></li>
<li><a href="http://bhogai.blogspot.com.br/">Contato</a></li>
<li><a href="http://bhogai.blogspot.com.br/">Variedades</a></li>
<li><a href="http://bhogai.blogspot.com.br/">Facebook</a></li>
<li><a href="http://bhogai.blogspot.com.br/">Googe+</a></li>
</ul>
</div>

Espero que tenha lhe ajudado e satisfeito sua expectativa, que tal retribuir com um comentário? Obrigado!
OBS: as cores do menu lógico tem como mudar, mas só o faça se souber o que está fazendo.