Menú vertical en Blogger

Es común tener un menú de forma horizontal en nuestro sitio web, pero hay quienes prefieren uno de forma vertical, bien sea porque se adecua mejor para su estilo, o porque quieren tener uno horizontal y otro vertical. Es por ello que hoy voy a enseñarte a crear un menú vertical que puedes personalizar a tu gusto.

Para ello hay que ir a Plantilla » Editar HTML y antes de ]]></b:skin> pega el siguiente código:

/* Menú Vertical
----------------------------------------------- */
#menuverticalv1 ul {
list-style-type: none;
margin: 0px;
padding: 0px;
width: 100%; /* ancho del menú */
font-size: 12px;
}
#menuverticalv1 ul li {
background-color: #DDDDDD; /* color del fondo del menú */
padding: 0px;
border-bottom: 1px solid #CCCCCC;
margin-bottom: 0;
}
#menuverticalv1 ul li a {
color: #000; /* color de las letras */
text-decoration: none;
display: block;
padding: 10px 10px 10px 20px;
}
#menuverticalv1 ul li a:hover {
background: #BBBBBB; /* color del botón al pasar el cursor */
border-left: 10px solid #000000; /* color del adorno del botón */
color: #FFFFFF; /* color de las letras al pasar el cursor */
}

He puesto en color verde la descripción de los estilos más relevantes, como el color del fondo y de las letras, pero puedes personalizar el resto como más te guste. Ahora para añadir el menú, en Diseño » Añadir un gadget, seleccionas HTML/Javascript y pegas el siguiente código:

<div id="menuverticalv1">
<ul>
<li><a href="URL del enlace">Título 1</a></li>
<li><a href="URL del enlace">Título 2</a></li>
<li><a href="URL del enlace">Título 3</a></li>
<li><a href="URL del enlace">Título 4</a></li>
</ul>
</div>

Ya sólo queda reemplazar el enlace y el título de cada botón. Puedes agregar todos los que necesites, y este sería el resultado:

Para ver el menú en acción, entra en el blog de pruebas de Pedazo Virtual, dando clic en el siguiente botón:

Blog de pruebas

Eso es todo, espero que te haya sido útil, si te ha gustado compártelo con tus amigos.

¿Que te gustaría aprender a hacer en Blogger?