Menú vertical para tu blog de blogger


Para añadir un menú vertical en tu blog de blogger deberemos seguir los siguientes pasos:



1)
Vamos a Diseño
2) Edición de HTML
3) Buscamos ]]></b:skin> (tecleamos Ctrl + F para buscar más rápido)
4) Justo antes de ]]></b:skin> pegamos el siguiente código:


/* Menú Vertical BLOGGER
----------------------------------------------- */
#menuvert ul {
list-style-type: none;
margin: 0px;
padding: 0px;
width: 250px; /* ANCHO DEL MENÚ */
font-size: 11pt;
}
#menuvert ul li {
background-color: #BBB00; /* COLOR DE FONDO */
padding: 0px;
}
#menuvert ul li a {
color: #000; /* COLOR LETRAS */
text-decoration: none;
display: block;
padding: 10px 10px 10px 20px;
}
#menuvert ul li a:hover {
background: #336699; /* COLOR AL PASAR EL RATÓN */
border-left: 10px solid #000066;
color: #FFFFFF;


 Podemos cambiar los colores, el ancho, etc. Fijaros en las descripciones del tipo /*


5) Ahora vamos a Diseño -> Elementos de página -> Añadir un gadget -> HTML/Javascript
6) Pegamos el siguiente código:


<div id="menuvert">
<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>
</ul>
</div>



Si quieres añadir más Títulos al menú copia-pega otro <li><a href="URL del enlace">Título 4</a></li> después del <li><a href="URL del enlace">Título 3</a></li>

Y ya hemos terminado.

19 comentarios:

  1. Hola Andreahsm. Cuando creas una entrada, abajo te aparece esta imagen: http://2.bp.blogspot.com/_aDt36_21zpk/Spe3mshq9nI/AAAAAAAABhs/FF_bs_mESv4/s1600-h/programarentrada.JPG

    Alli puedes poner las etiquetas que quieras.

    Un saludo.

    ResponderEliminar
  2. Este comentario ha sido eliminado por un administrador del blog.

    ResponderEliminar
  3. Hola Ramón. He decidido borrar tu comentario porque he recibido correo SPAM (encima en mi correo personal -desconozco cómo lo has conseguido) tuyo sobre productos milagrosos contra enfermedades. No me gusta que se especule ni se haga negocio con ello con algo que millones de personas sufren. Espero que lo entiendas. Saludos

    ResponderEliminar
  4. Hola! GRACIAS por compartir tu conocimiento. Hice tal cual lo explicas y funciona perfecto.
    Un cordial saludo.

    ResponderEliminar
  5. Gracias Juan Antonio. Bienvenido al blog. Un saludo.

    ResponderEliminar
  6. Hola!!

    Al pasar el ratón por encima de los títulos, como puedo eliminar el punteado que me sale debajo de cada uno de ellos?

    gracias de antemano!!

    ResponderEliminar
  7. Hola,

    Tengo un problemille, me aparece una cruz al lado de cada título como esto "+ Título 1". es una imagen, que no es que esté escrito y no se muy bien como quitarla...me puedes echar un cable?

    Gracias,

    ResponderEliminar
  8. Hola "el que grita". Imagino que estos problemas que me comentas son referidos al "menú vertical" explicado en esta entrada. He entrado en tu blog y no he visto este menú. ¿Podrías aclararme a qué te refieres? Gracias, ¡un saludo!

    ResponderEliminar
  9. Me ha encantado este aporte y es más ya lo tengo perfectamente aplicado en mi blog (el cual acabo de empezar y esta tomando forma gracias a este blog) la única cosa es que en el menú, en cada categoria, cuando no pasas el ratón por encima, estas contienen una flecha que no me gusta como queda y me gustaria quitarla. Como no se si me explico os dejo mi blog y a ver si entendeis lo que quiero decir.

    http://overtheropesprowrestling.blogspot.com/

    Gracias de antemano, espero que me podáis ayudar.

    ResponderEliminar
  10. Hola muchas gracias por la información tengo una duda. Mira yo quiero crear un blog pero con estilo web es decir que quiero que salga el menú bale eso ya lo tengo. Pero ahora como hago para escribir por ejemplo una nueva entrada en ese mismo blog y me salga en el menú sin tener que hacer un blog nuevo para vingularlo? no se si me entiendes mi correo es asierux@gmail.com y agradecería la ayuda gracias

    ResponderEliminar
  11. @Pacman. He visitado tu blog y no veo el menú. ¿Lo has quitado?

    @Asierux. En el código del paso 6) debes vincular la entrada que quieras poner en el menú. En donde pone "URL del enlace" deberás poner el enlace de la entrada que quieras. Y en título el nombre que quieras darle.

    Saludos!

    ResponderEliminar
  12. Creo que te falta } de cierre cuando termina el menú, en la parte de css , gracias está muy bueno.

    ResponderEliminar
  13. hola espero puedas regresarme :3
    tengo una duda con esto, ya lo ize ok puse youtube como prueba juasjuas
    pero sii, en vez de poner esoo del fondo letra y esoo lo qiero hacer pero una imagen, como lo haria?
    algo asi como en este blog, y como organizo las cosas:
    kokomi-blog.blogspot.com
    buenoo si vez el menu de al lado lo qiero asi :3 yo tengo mis fotitos, pero como las implemento? y claroo como organizoo las entradas para qe se acomoden asi :3? o tengo qe poner url de cada entrada manualmente D:? jiji
    gracias, mi blog (recien empiezo por eso esta todo caca xD!!)
    http://kagamine-blog.blogspot.com/
    gracias :)

    ResponderEliminar
  14. Hola! tengo una pregunta. He creado el menu, pero:
    -No se ponerle la URL
    -Se pueden poner apartados dentro de cada uno? ya que yo queria hacer algo como darle.. y que se desplegaran debajo los titulos de las entradas o algo...

    Muchas gracias. Un saludo

    ResponderEliminar
  15. O meter varias URL en una pestañita...^^

    ResponderEliminar
  16. Cómo se hace para agregar submenús en un menú vertical para blog de blogger? Gracias por tu página.

    ResponderEliminar
  17. Hola amigo tu blog esta bueno gracias por tomarte tu tiempo para ayudarnos a todos, mira mi duda es la siguiente yo quiero crear entradas pero que no aparecan en la parte principal del blog sino quiro meterlas en menus desplegables como le hago eso para que quede como una pagina web paga me podrias ayudar te informo que cuento con un programa para crear menus es buenisimo se llama Flash Menu Labs Pro v2 si no lo tienes dime y te lo paso aunque no se usarlo muy bien espero su respuesta amigo

    ResponderEliminar
  18. Gracias man estoy creando mi radio y me sirvió...

    www.radioanimups.blogspot.com

    una radio con mucha onda yeah!!

    ResponderEliminar