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.

35 comentarios:

  • El Angel de cari

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

  • La Trucoteca

    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!

  • *//////*

    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

    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!

  • Joan Irazu

    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

    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

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

  • Jony_08

    Hola, que tal? Te quería comentar que me vino barbara la información ya que estaba buscando como crear los menus y demás. Te quiero hacer una pregunta. En las distintas solapas de los menus me aparece por ejemplo un punto negro, y quisiera saber como sacarlo, porque queda desprolijo así. Quisiera que me quedara como lo tiene usted en el ejemplo. Cuál sería el problema? Para que se de cuenta, por ejemplo, quedaría algo asi .Acerca de, y lo que quiero eliminar es ESE punto. Espero que pueda ayudarme y solucionarme el problema. Cualquiera cosa, si me puede responder que sea a este mail de yahoo: jonathanmarinelli@yahoo.com.ar

    Excelente su página!

    Muchas gracias!

  • La Trucoteca

    ¡Hola Netexpantion!
    Si no fuera porque tienes una plantilla de "estas nuevas" de Blogger en las que se nos hace tan complicado buscar códigos tan elementales como tendría que ser en este caso, te podríamos decir una solución fiable 100%.
    Aún así, me parece que la cosa está relacionada con el list-style. Te diríamos que pusieras después de #menuv {
    float:left;
    , lo siguiente:
    list-style:none;
    Creemos que con este codigo será suficiente, aunque no te aseguramos nada ;)
    Si el problema persiste, avísanos :)

    ¡Saludos!

  • Jony_08

    La verdad? Muchísimas gracias por la ayuda! Gracias a ese código que me pasaron me solucionaron el problema que tenía. Ahora puedo empezar a diseñar tranquilo mi blog. Gracias por la amabilidad y por la simpatía y las ganas que le ponen al sitio. Sigan así!

  • La Trucoteca

    Netexpantion, nos alegra que todo se haya podido solucionar, ya sabes que nos tienes aquí para lo que necesites :D
    Un abrazo!

  • Pela

    Hola, nada más agradecer lo del menú vertical, ha quedado bonito en el blog que tenemos con la banda, lo he aprovechado para enlazar los temas que tenemos par descargar, mil gracias.

  • La Trucoteca

    Hola Pela, gracias a tí también, nos alegramos de que te haya salido bien, te ha quedado fantástico con ese pequeño cambio que le has hecho al fondo ;)

    ¡Un saludo!

  • Toptrucos/Emilio

    muy bueno, me funciona correctamente, pero me salen puntos negros al lado izquierdo de cada palabra, ¿como me lo quito?
    http://fananimalcrossingprueba.blogspot.com

  • Toptrucos/Emilio

    bueno ya nada, cambie a otro menu que me gusto mas, pero genial aporte! me encata este blog ¡a favoritos!

  • La Trucoteca

    Toptrucos, gracias por tu comentario :) , de todas formas, por si quisieras ponerlo de nuevo, tienes la solución a tu problema de los puntos en un comentario anterior que le respondimos a Netexpantion =)

    ¡Un saludo!

  • Exelente, gracias, este blog es lo que necesito, explica facilmente y sin dar vueltas como otros blogs de ayuda.
    Aguante este blog!!!!!!!!

    http://mirevistaliteraria.blogspot.com/

  • La Trucoteca

    Hola Facundo Xmil!! Bienvenido al blog, y, muchas gracias por el comentario, nos alegra muchísimo que te haya servido de ayuda nuestra página :)
    Saludos!! ;)

  • pako

    muchas pero muchas graci me has ayudado mucho te debo una que te parece si pongo tu banner en mi blog para agradecértelo

  • Jose

    Hola, puse el menu y ahora despues de varios dias ya no me aparece,sabes porque puede ser?

  • La Trucoteca

    Pako, nos alegra que te haya gustado el menú :) , si quieres enlazarnos, encantados ;)

    José Luis, al parecer es por las imagenes del menú alojadas en Photobucket. Según dicen, están haciendo alguna tarea de mantenimiento, por lo que pronto volverán a aparecer bien =) (puedes ver lo que ha pasado con muchas imágenes que tenemos en este blog)

    ¡Saludos!

  • Jose

    Gracias por contestar tan rápido, ¿entonces volverán a aparecer o tengo que buscar otro menu?, muchas gracias.Un saludo.

  • LagunaBeach

    Hola, tengo el menu vertical insertado en la pagina que estoy constuyendo ademas que me encanto y como lo necesitaba horizontal lo coloque horizontal, pero mi sorpesa es que hoy no se ve, he venido a vuestra pagina y parece que tambien tiene problemas, lo que ya no se si el problema sera de blogger o de la imagen de photobucker, espero que se pueda solucionar porque no me gustaria tener que quitarlo ya que me gusta mucho. Gracias

  • La Trucoteca

    Pues sí, ya todo ha vuelto a la normalidad (en la mayoría de las cuentas afectadas). Parece ser que el problema les ha costado más de lo que esperaban a los chicos de Photobucket (como decían en su cuenta de Twitter y en su blog). Por eso siempre os recomendamos subir las imágenes que aquí os ponemos en los trucos a vuestros propios alojamientos ;)

    Aún así, gracias por vuestra paciencia y un saludo!

  • Hola me gusto eso del menú vertical y soy nuevo en esto de hacer un blog y por eso les pido que me digan como configurar la dirección osea el enlace, pues eso no lo entiendo. Los nombres de las pestañas son: Inicio, Libros, Historia, Noticias. Les agradezco por compartir estos trucos para los blog y me gusta tu pagina.

  • Sin censura

    muy buena pagina me es de gran ayuda ,si no te enojas estaria bueno un chat para comunicarnos entre los conectados.un aabrazo

  • La Trucoteca

    Frías sin sensura, si buscas verás que en la parte inferior del blog (en el footer) hay un chat en el que podéis hablar (más o menos) en directo ;)

  • Freddy Palacios

    Muchas Gracias por tu aporte,me ayudo mucho se me habia olvidado como hacerlo...

    Atentamente
    Freddy Palacios

  • Fernanda

    Guag, me pasé días buscando un menú como este. Muchísimas gracias, ya lo voy a poner el el blog. Una duda: ¿No se le pueden añadir imágenes pequeñas al lado del texto? No sé si me estoy explicando bien, espero que entiendas. Nada otra vez muchísimas gracias.
    Un beso.

  • BWM

    Amigo muchas gracias por el aporte, esto era precisamente lo que estaba buscando....

    Gracias,

  • PORTAL DEL VÍDEO CLIP CUBANO

    Excelente idea, ya la estoy aplicando en mi Blog, muchas gracias por el aporte.
    Saludos: Héctor
    www.videosenfamilia.blogspot.com

  • Unknown

    hola ke tal esta excelente,pero me gustaria cambiar el color,como podria hacerlo,quisiera que fuera de color negro,me podrias ayudar,espero tu respuesta,saludos.

  • Unknown

    hola ke tal esta excelente el menu,pero me gustaria cambiarlo de color,lo quisiera de color negro,podrias ayudarme con eso?,espero tu respuesta,saludos.

  • Ir Arriba