Menú vertical simple para tu blog

Hoy os mostramos un menú vertical que puedes emplear y aplicar en tu blog muy fácilmente.

Para verlo en funcionamiento puedes visitar esta página.
Recuerda que también puedes ver otro menú, en este caso horizontal, aquí.

Para agregarlo sólo tienes que dirigirte a Diseño>Elementos de la página.

Añade un nuevo Elemento HTML, preferiblemente en la sidebar, y pega el siguiente código: 

<div id="menuvertical-trucoteca">
<ul id="menuv">
    <li><a href="#">Inicio</a></li>
    <li><a href="#">Acerca de</a></li>
    <li><a href="#">Enlazar</a></li>
    <li><a href="#">Contacto</a></li>
</ul>
</div>
<style type="text/css">
#menuv {
        float:left;
}
#menuv li {
        background: url(http://i825.photobucket.com/albums/zz180/latrucoteca/Degradadomini2.png);
    margin:6px;
    padding:3px;
    border:1px solid #08088A;
        width: 150px;
        text-align:center;
        font-family: Segoe UI, Arial;
        font-size: 14px;
}
#menuv li:hover {
        background: url(http://i825.photobucket.com/albums/zz180/latrucoteca/Degradadomini2.png);
        border:1px solid #08088A;
        filter:alpha(opacity=80);
        -moz-opacity: 0.8;
        opacity: 0.8;
        -khtml-opacity: 0.8;
}
#menuv a:hover {
        color: #ffffff;
        text-decoration: none;
        font-weight: bold;
}
#menuv a {
       color: #ffffff;
</style>

Si quieres añadir un nuevo enlace en el menú, solo tienes que copiar y pegar (tantas veces como necesites) la línea que esta en negrita. Quedaría algo asi:

    .................

    <li><a href="#">Enlazar</a></li>
    <li><a href="#">Contacto</a></li>

    <li><a href="#">El título que quieras</a></li>

    .................

Ahora solo tienes que personalizar los enlaces y los títulos; para ello cambia el # por la dirección a la que enlace, y los títulos, Inicio - Acerca de - Enlazar - Contacto - etc., por las palabras que prefieras. Guarda cambios, y ya lo tendrás todo listo.