Hola buenas en esta ocacion les traigo un tutorial de como agregar un menú vertical multicolores para blogger bonito simple y fácil de instalar sin mas nada que decir proceso a como instalar

Ejemplo del Menu Vertical

1. Primero Vamos a Blogger - Plantilla - Edición HTML
2. Buscamos el siguiente código

Codigo

]]></b:skin>

3. Al encontrarlo justo por encima colocamos el siguiente código:

.menuvertical-tblogger div {
background: #111;
width: 6.6em;
margin: 1em auto;
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
color: #fff;
text-align: center;
padding: .4em;
font: bold 1.8em 'Open Sans', sans-serif;
-webkit-box-shadow: 0 1px 3px 7px #aaa;
-moz-box-shadow: 0 1px 3px 7px #aaa;
box-shadow: 0 1px 3px 7px #aaa;
-webkit-transition: .35s ease-in-out;
-moz-transition: .35s ease-in-out;
-ms-transition: .35s ease-in-out;
-o-transition: .35s ease-in-out;
transition: .35s ease-in-out;
/*cursor pointer should be nice.*/
cursor: pointer;
}
/*It's time for hover state of all div(s) :p*/
.menuvertical-tblogger div:nth-child(n):hover {
-webkit-border-radius: .7em;
-moz-border-radius: .7em;
border-radius: .7em;
-webkit-box-shadow: 0 1px 3px 5px #0f5;
-moz-box-shadow: 0 1px 3px 5px #0f5;
box-shadow: 0 1px 3px 5px #0f5;
color: #0f5;
}
.menuvertical-tblogger div:nth-child(2):hover
{
box-shadow: 0 1px 3px 5px #f33;
-moz-box-shadow: 0 1px 3px 5px #f33;
-webkit-box-shadow: 0 1px 3px 5px #f33;
color: #f33;
}
.menuvertical-tblogger div:nth-child(3):hover
{
box-shadow: 0 1px 3px 5px violet;
-moz-box-shadow: 0 1px 3px 5px violet;
-webkit-box-shadow: 0 1px 3px 5px violet;
color: violet;
}
.demo div:nth-child(4):hover
{
box-shadow: 0 1px 3px 5px skyblue;
-moz-box-shadow: 0 1px 3px 5px skyblue;
-webkit-box-shadow: 0 1px 3px 5px skyblue;
color: skyblue;
}
.menuvertical-tblogger div:nth-child(5):hover
{
box-shadow: 0 1px 3px 5px orange;
-moz-box-shadow: 0 1px 3px 5px orange;
-webkit-box-shadow: 0 1px 3px 5px orange;
color: orange;
}

4. Vamos agregar nuestro menú en un gadget
5. Entramos en Blogger - Diseño - Añadir un Gadget - HTML Javascript
6. Pegamos en el Gadget el siguiente codigo y guardas

<div class="menuvertical-tblogger">
<div>
<a href="http://url/">Inicio</a></div>
<div>
<a href="http://aqui ponemos nuestro enlace/">La casa del vector</a></div>
<div>
<a href="http://aqui ponemos nuestro enlace/">Cuentos en la red</a></div>
<div>
<a href="http://aqui ponemos nuestro enlace/">Dinero con tu red</a></div>
<div>
<a href="http://aqui ponemos nuestro enlace/">Hotel 400</a></div>
</div>

Listo ya tienes tu menu vertical