Menú vertical con cajas de información

Ahora vamos a ver cómo poner a nuestro blog, en la sidebar, un menú que nos permitirá poner información sobre cada apartado (qué encontraremos en ésa sección, etc). Vi éste menú hace unos días en la sidebar de Baofeng, una página web dedicada al cine, y me gustó mucho, así que la adapté para que podamos usarla en nuestro blog de blogger.

• Home
  Página principal.
• FeedPara que puedas suscribirte a mi feed
• PerfilVer mi perfil
• EjemploPestaña de ejemplo.

Bien, vamos a empezar.

♠ Ingresamos a Diseño/ Edición de HTML y con ayuda de CTRL+F buscamos ]]></b:skin>. Encima de éste pegamos lo siguiente:

ul#menutt {
width: 160px;
list-style:none;
font: bold 14px Arial, Verdana, Serif;
}
ul#menutt li{
position:relative;
}
ul#menutt a {
width: 160px;
display: block;
text-align:left;
padding: 5px 10px;
margin-bottom:1px;
text-decoration: none;
color: #fff;
background: #aaa;
border-left: 12px solid #000;
border-right: 3px solid #000;
voice-family: "\"}\"";
voice-family:inherit;
width:110px;
}
>#pagebody>ul#menutt a {
width:100px;
}
/* Fix IE. Hide from IE Mac \*/
* html ul#menutt li { float: left; height: 1%; }
* html ul#menutt li a { height: 1%; }
/* End */
ul#menutt a:hover {
color: #000;
background: #bbb;
border-right: 3px solid #bbb;
border-left: 12px solid #bbb;
}
ul#menutt a span {
display: none;
}
ul#menutt a:hover span {
display: block;
position: absolute;
top:0;
left: 160px;
width: 90px;
padding: 14px;
margin-left:2px;
color: #fff;
background:#aaa;
font-size: 10px;
text-align:center;
border:1px solid #000;
}

Explicación: vamos a ver de qué trata cada parte del código para que podamos personalizar el menú.
» ul#menutt a { nos permitirá personalizar el ancho y alto de las pestañas, color de los bordes izquierdo y derecho,color de letra y fondo de la pestaña. Ésto es para cuando vemos la pestaña tal y como es.
» En ul#menutt a:hover { podremos cambiar colores de letra, fondo y bordes al momento de pasar el mouse sobre la pestaña.
» ul#menutt a:hover span { : aquí modificaremos el estilo de las cajas deinformación, como tamaño de letra, de qué lado se mostrará la caja (izquierda o derecha), el ancho, alto,etc.

♠ Una vez que tengamos listo el menú, damos click en Guardar.
♠ Ahora vamos a Diseño/ Elementos de la página/ Añadir un gadget y escogemos HTML/Javascript.
♠ En el nuevo gadget pegamos lo siguiente:

<ul id="menutt">
<li>
<a href="URL-DEL-ENLACE">Home
<span>
Texto-de-información.
</span>
</a>
</li>

<li>
<a href="URL-DEL-ENLACE">Perfil
<span>
Texto-de-información.
</span>
</a>
</li>

<li>
<a href="URL-DEL-ENLACE">Feed
<span>
Texto-de-información.
</span>
</a>
</li>

<li>
<a href="URL-DEL-ENLACE">Mapa del sitio
<span>
Texto-de-información.
</span>
</a>
</li>

<li>
<a href="URL-DEL-ENLACE">Contacto
<span>
Texto-de-información.
</span>
</a>
</li>
</ul>

» Cambiamos donde dice URL-DEL-ENLACE y Texto-de-información por los enlaces y texto que deseemos; también podemos agregar o quitar pestañas.
♠ Finalmente damos click en Guardar.

Si hay alguna duda, estaré gustosa de ayudarte