Menu vertical con sub-pestañas para tu blog

Este es un menú tipo acordeon, con efecto deslizante, que nos ahorrara mucho espacio en nuestro blog.


 Cuando pasamos el cursor sobre este, se expande de forma automática.  Para poder incrustarlo en nuestro blog, lo primero es que tenemos que ir a nuestra plantilla y modificarla.

Nota:
Como siempre comento es muy importante antes de modificar nuestra plantilla que realizemos una copia de seguridad de la misma por si algo nos falla.
Pare ello puedes ver este post donde te explicamos paso a paso como hacerlo.

Ahora nos vamos a:
Tema > Editar HTML 
Con los botones de Ctrl+F buscamos </head> y añade este código justo antes.

<style type='text/css'>
/* Color texto */
#blcnMenujteAcord ul li a{color:#000000;}
/* Color fondo principal */
#blcnMenujteAcord{background:#d2b583;}
/* Color fondo al pasar el cursor */
#blcnMenujteAcord ul li a:hover{background:#a5834a;}
/* Color del borde (debe incluirse dos veces) */
#blcnMenujteAcord ul li {border-bottom: 1px solid #a5834a;}
#blcnMenujteAcord{border:1px solid #a5834a;}
</style>
<link href='https://sites.google.com/site/estoesunejemplodeprojecto/archivadorcanciones/blcnAcordJteMenu.css' rel='stylesheet' type='text/css'/>

Guardamos la plantilla.
Ahora nos vamos nos vamos a 
Diseño >Añadir un gadget > HTML/Javascript 

<div id="blcnMenujteAcord">
<ul>
<li><a href="#">Pestaña 1</a></li>

<li><a href="#">Pestaña 2</a>
<ul>
<li><a href="#">Pestaña 2.1 </a></li>
<li><a href="#">Pestaña 2.2 </a></li>
<li><a href="#">Pestaña 2.3 </a></li>
</ul>
</li>

<li><a href="#">Pestaña 3</a>
<ul>
<li><a href="#">Pestaña 3.1 </a></li>
<li><a href="#">Pestaña 3.2 </a></li>
<li><a href="#">Pestaña 3.3 </a></li>
</ul>
</li>

 Cambiamos
"#" por la Url de nuestra pagina y el nombre de Pestaña por el nombre de la pestaña que queramos usar.
Ya lo tienes.
Espero de disfrutes.