Menú vertical simple para tu blog

lunes 4 de enero de 2010
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.

Y por cierto, si quieres un menú realizado a tu medida, puedes pedirnoslo en los próximos días (hasta el 8 de Enero) y te lo diseñaremos... ¡totalmente gratis!
No dejes escapar esta oportunidad, ¡anímate!

8 comentarios:

  • Cari Y Yoly

    Hola amigo!
    Que bueno esta esta entrada, voy a ver si me animo a hacerlo.
    Besos y abrazos

  • La Trucoteca de Blogs

    Hola Cari y Yoly!
    Nos alegra mucho que os haya gustado, ya sabeis que si necesitais algo, aquí estamos para ayudaros ;)
    Por cierto, acabamos de agregar vuestro banner a las Páginas Recomendadas :)
    ¡Muchos saludos desde España!

  • Maria Rosa

    Javier y/o Germán:
    Ahhhhh me quedó precioso !!!!
    Gracias por compartirlo ! :D

    También puse los marcadores sociales que dejaron Uds. en un post, y saqué el que tenía, lo dejé en el sidebar solo (la barrita de marcadores antiguo) la nueva la hice en el foot de los post.

    Besoooooootes
    Gracias amigos !!
    Los quiero !!! =)

  • La Trucoteca de Blogs

    Hola Maria Rosa!
    Nos alegra que te haya gustado, la verdad es que es un menú que queda fantástico en tu blog, tal y como hemos visto :D
    Gracias por tus visitas, de verdad :)
    ¡Un gran abrazo desde España!

  • CHiCken

    me gusto, ya tenia un menu vertical antes, pero este me gusto mas por los colores y te da opacidad :) muy bueno, visita: http://myestilodeyo.blogspot.com

  • La Trucoteca de Blogs

    Hola Chicken!
    El menú te ha quedado chulísimo, de verdad :D
    Por cierto, tu página, además de ser interesante, está muy bien elaborada y trabajada, ¡enhorabuena!
    ¡Muchos saludos!

  • gabriel mi blog

    hola me llamo gabriel

    y me gusto mucho tu blog y la ayuda que me dio
    bueno te agradezco por ya que tengo una gran cantidad de blog enlazados entre si tu post me eyudo a enlazarlo de forma mas chevere y copada

    bueno un diez para la pagina!1

    sigan asi!!!!

  • La Trucoteca de Blogs

    Hola Gabriel
    Nos alegra que te sirviera el truco :)
    ¡Un saludo!

  • Ir Arriba