TRUCOS y
TUTORIALES
para tu blog
No, no vendemos
camisetas... aun
Camiseta Ciudad Blogger

Menu vertical para el blog

24 de agosto de 2009 | Número de comentarios172 comentarios
Sé que no a todos les interesan los menús horizontales debajo de las cabeceras, así que para a quienes se les adecua mejor un menú vertical en el blog aquí les van las indicaciones para crear un menú de manera rápida y personalizable.

Entra a Diseño | Edición de HTML y antes de ]]></b:skin> pega lo siguiente:
/* Menú Vertical
----------------------------------------------- */
#menuvert ul {
list-style-type: none;
margin: 0px;
padding: 0px;
width: 200px; /* ancho del menú */
font-size: 11pt;
}
#menuvert ul li {
background-color: #B0CBDD; /* color de fondo del menú */
padding: 0px;
}
#menuvert ul li a {
color: #000; /* color de las letras */
text-decoration: none;
display: block;
padding: 10px 10px 10px 20px;
}
#menuvert ul li a:hover {
background: #336699; /* color del botón al pasar el cursor */
border-left: 10px solid #000066; /* color del rectángulo junto al título */
color: #FFFFFF; /* color de las letras al pasar el cursor */
}

Ahora en Diseño > Elementos de la página > Añadir un gadget, selecciona HTML/Javascript y pega ahí esto:
<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>
<li><a href="URL del enlace">Título 4</a></li>
</ul>
</div>
Ya sólo cambia las URL de los enlaces y los títulos de las pestañas; puedes agregar o eliminar tantas pestañas como quieras.
Puedes personalizar los colores del menú a tu antojo, en el primer código he puesto las anotaciones para que sepas dónde cambiar el color de fondo, el color de las letras, etc.
El resultado es este:

172 comentarios :

  1. Muy bueno bro... durante mi blogger-depresión, hasta había pensado en colocarle un menu de este tipo, pero luego de pensar un rato no sabía donde, y decidí dejarlo como esta. Seguramente lo tendré en cuenta para la próxima recaída!!!! jajajaja.

    Un abrazo!!!

    ResponderEliminar
  2. Pues fíjate que podría quedar bien para agrupar las suscripciones de RSS, mail, Twitter, etc. Digo, en lugar de botones como el mío, podrías usar un menú así.
    Ummm, de hecho creo que eso haré aquí, jaja. No, no, no, no, me estás contagiado la blogger-depresión, jajaja.

    Un abrazo!

    ResponderEliminar
  3. Jajajajajaja... perdona bro! las depresiones se contagian mas facilmente que las alegrías.

    No es una mala idea... la voy a tener en cuenta... pero para serte sincero... estoy cansado de pelear con Blogger para modificar mi plantilla. Por lo que me voy a dedicar a postear un poco, ya que tengo descuidado mi blog y Respondones. Como habrás visto en el contador, ya nadie entra, y es lógico, hace bastante que tengo todo parado.

    Con respecto a tus suscripciones, sinceramente me gustan... pero no puedo decirte si quedará mejor o no el menú.

    Gracias por ayudarme a hacer todos los cambios en mi plantilla!!!!!

    Un abrazo!!!

    ResponderEliminar
  4. Tienes razón, hay que dejar descansar un poco la plantilla y postear que esa es la finalidad de un blog.

    Un abrazo!

    ResponderEliminar
  5. pues empece hace poco a hacer lo mismo..... si........ eh vuelto !!!
    XD

    despues de una bloggerdepresion..... ke por lo visto se hacen famosas...XD

    bueno pues yo eh querido hacer un menu asi en el blog pero un pockito mas complicado y con mas efectos pero pues supongo que sera con el tiempo ya que apenas estoy retomando lo de postear.... y en vdd lo lamento...... pero pues almenos no estuvo al 100% abandonado....

    saludos potro y cyberbloggero y sigan asi

    ResponderEliminar
  6. Mira qué milagro... lo tuyo excedió los límites de una blogger-depresión, jaja.
    Lo importante es que ya estás de vuelta. Me alegro mucho que estés de regreso, espero que empieces a postear pronto.

    Saludos.

    ResponderEliminar
  7. Hola
    Interesante eso de la blogger-depresión, buena idea para ponerse de psico-blogger :) jejeje
    Voy a intentar hacer este menu vertical...
    ¿Este efecto que tiene este menu al pasar el cursor lo podria hacer con las etiquetas? ¿qué se modificaría?
    Muchas gracias

    ResponderEliminar
  8. Hola Jorge,

    En el gadget de Etiquetas no, pero podrías crear un menú con las etiquetas, serían los mismos pasos, ya sólo en la URL del enlace pondrías la URL de cada etiqueta.

    Saludos.

    ResponderEliminar
  9. Hola locura adolecente,

    Donde dice color de fondo del menú y color del botón al pasar el cursor sustitúyelos por esto:

    background: url (URL del botón);

    Ten en cuenta que deberás usar un botón para el modo normal y otro para cuando pases el mouse encima de él.

    Saludos.

    ResponderEliminar
  10. Potro ¡¡¡¡Me quedaron geniales!!!!

    Sos un Master !!

    Cada cosa que me dijiste me salió !! Rápido, fácil, sin vueltas, sencillito. Lo explicas bien ¿que más se puede pedir?

    Nada. Solo agraderte mucho.
    Date una vuelta y mira el menú vertical !!
    Para colmo, los colores son los justo para combinar con mi blog: celeste y azul !!!

    Estoy super-feliz :D :D :D

    Graciaaaaaaaas Potro !!!!!!!!

    Muaaaaaaaaaackkkkkk

    ResponderEliminar
  11. Excelente! los colores quedaron justos para tu plantilla =)
    Saludos!!!

    ResponderEliminar
  12. hola potro muy bueno tus consejos los coloque pero quiero saber como hago para el menu tenga su contenido por ejemplo cuando haga click en mensaje me lleve a esa seccion no me sale pegate una vuelta por mi blog www.nochedeclasicos.com.ar lo probe ahi fijate lo que sale nose me podrias explicar por favor

    ResponderEliminar
  13. Hola NOCHE DE CLASICOS,

    Sólo necesitas poner la URL del enlace donde está en color rojo.
    Por ejemplo:
    http://www.nochedeclasicos.com.ar/2009/09/lo-nuevo-de-ale-sanz-el-cantante.html

    Saludos.

    ResponderEliminar
  14. Potro, recién hoy y ahora compruebo que los links que coloqué en este truco del menú vertical (yo lo hice oculto además) pero los links... no me funcionan, los puse mal, porque quedó con mi IP.
    Los copié picando en cada etiqueta (donde tengo los post para editar) y puse en cada etiqueta con el botón derecho del mouse: "propiedades", copié eso, y lo coloqué como link, pero no abren asi !!
    Como obtengo la URL de cada etiqueta?? Yo creí que sabía, pero por lo visto... no lo sé :(

    Ahora te mando por mail como lo hice yo, que es lo que coloqué :S

    Help !!! =)

    ResponderEliminar
  15. Hola Maria Rosa,

    Entra a tu blog y haz click sobre una entrada que contenga la etiqueta a la que quieres sacarle la URL.
    Luego con el cursor encima de la etiqueta haz click con el botón derecho del mouse y selecciona Copiar acceso directo. Esa será la URL de la etiqueta, por ejemplo la de Pacientes es esta:
    http://drgoliamiguel.blogspot.com/search/label/PACIENTES

    Saludos!!!

    ResponderEliminar
  16. Pero mirá que fácil era, y yo me compliqué la vida solita (Aaaajajaja!)

    Graciaaaaaaaas Potro

    ¿Que haría yo sin vos? ¿Eh? Sin tus instrucciones y tu sabiduría bloggeril, HTML, scrip, y demás chirimbolos ;)

    Sos un master !!!!!!!! =)

    ResponderEliminar
  17. Jajajaja, sabiduría bloggeril, jajajaja.

    Gracias a ti por tus comentarios, de verdad que me has alegrado la noche ;)

    Besos!

    ResponderEliminar
  18. Terrible bro!!! quedó excelente!! GRACIAS!!!!!

    ResponderEliminar
  19. Por nada brother, me da gusto que te haya servido.
    Saludos!

    ResponderEliminar
  20. Muy bueno potro,y si queremos agregar una imagen a un lado del texto,cual seri el codigo o donde iria?

    ResponderEliminar
  21. Hola Borest,

    En el segundo código tendrías que poner el código de la imagen antes de donde va el título:
    <li><a href="URL del enlace"><img src="URL de la imagen"/> Título 1</a></li>

    Pero forzosamente se va a recorrer la imagen cuando se pase el cursor sobre el enlace.

    Saludos.

    ResponderEliminar
  22. Si bueno,he intentado hacerlo pero puedes mirar mi blog para que veas como queda el menu,queda la imagen por arriba y me baja el texto.Puedehaber solucion a eso?

    ResponderEliminar
  23. Gracias potro, me ha servido perfecto lo acabo de poner en el blog,y que bueno que ya pudiste ver mi blog,muchisimas gracias deveras.Saludos.

    ResponderEliminar
  24. Hola Borest,

    Dentro del código de la imagen pon esto:
    valign="middle"
    De esa forma debe alinearse la imagen con el texto.
    Saludos.

    ResponderEliminar
  25. hola "el potro" exelente aporte te queria preguntar.. para hacerlos mas chicos respecto a la altura.. como le hago? ya que a lo ancho son geniales!! pero los siento muy grandes espero que me puedas orientar

    saludos :)

    ResponderEliminar
  26. Hola Fernand Martinolli,

    En el primer código busca donde dice #menuvert ul li { justo abajo de ahí pega esto:
    height:35px;

    El 35 modificalo hasta que alcance la altura deseada.

    Saludos.

    ResponderEliminar
  27. Perdón, lo que tienes que pegar debajo de esa línea no es eso, sino esto:
    line-height:5px;

    Saludos.

    ResponderEliminar
  28. Orale muchisimas gracias por compartir tus conocimientos funciono a la perfecion.. ahora me surgio una duda ... al momento de pasar el cursor por encima de estos links existe la posiblidad de que reproduzcan un sonido ? si es asi nos pudieras orientar?

    de antemano muchas gracias :D

    ResponderEliminar
  29. Ummm no, incluir ese tipo de efectos es algo complicado y sólo funciona en Internet Explorer.

    Saludos.

    ResponderEliminar
  30. hola potro otra vez yo jeje un saludo y una pregunta
    de k pagina o donde saco los colores para cambiarle el color de fondo? muy buen menu

    ResponderEliminar
  31. Hola Hysterical Fire,

    En este sitio puedes localizar el código del color que buscas:
    http://html-color-codes.info/codigos-de-colores-hexadecimales/

    Saludos.

    ResponderEliminar
  32. gracias potro y otra vez, eres el mejor!!!!!!!!!

    ResponderEliminar
  33. hola esta muy bueno el blog, me gustaria saber si para hacer un menu se deben colocar todas las entradas de la pagina en las diferentes secciones del menu, si pudieran responderme gracias

    EJ: si quiero colocar descarga de musica, debo colocar todos los link y sorry por mi ignorancia.

    ResponderEliminar
  34. Hola marcia,

    Lo que necesitas es que todas tus entradas tengan etiquetas, por ejemplo, las entradas que traten acerca de música debes ponerles la etiqueta 'música'
    Para hacerlo tienes que editar las entradas, y abajo verás un espacio en blanco, ahí debes escribir el nombre de la etiqueta.
    Luego entra en Diseño > Elementos de la página > Añadir gadget > Etiquetas.
    En ese gadget parecerán las etiquetas de tus entradas, sólo haz click con el botón derecho del mouse sobre la etiqueta y selecciona Copiar dirección de enlace (o algo así), esa es la URL que deberás poner en el menú, de esa forma cuando alguien haga click en Música aparecerán todas las entradas que hablan sobre el mismo tema.

    Saludos.

    ResponderEliminar
  35. Saben como agregarles a los botones para que haga un sonido al hacerles clic?

    ResponderEliminar
  36. Hola Aixadanixa,

    Antes había un script que permitía hacer eso pero sólo funcionaba con Internet Explorer, ahora no hay nada que funcione.

    ResponderEliminar
  37. hola potro me gustaria que hubiera una separacion entre cada pestaña del menu o un borde para que no se viera todo seguido, es posible?
    muxas gracias

    ResponderEliminar
  38. Claro, debajo de #menuvert ul li {
    pega esto:
    border-bottom:1px solid #000;

    Con eso tendrás un borde entre cada pestaña.

    Saludos.

    ResponderEliminar
  39. muxas gracias el potro por todo ;)
    saludos

    ResponderEliminar
  40. creo que me enamore de ti....y soy hombre xD!

    ResponderEliminar
  41. No te preocupes, si me conocieras te desenamorarías :D

    ResponderEliminar
  42. olas potro tengo una dudilla. en mi web ya puse el menu todo chvr pero es muy grueso y me gustaria que sea mas delgado para que no ocupe tanto espacio ps. que codigo debo cambiar? se puede verdad?

    ResponderEliminar
  43. ya obtube lo ke keria yeeee solo disminui los valores en padding eran 10px, 10px, 10px, 20px y yo los reduje a la mitad y listo.

    ResponderEliminar
  44. potro en mi blogg la platilla ke coloce suprimer la opcion comentarios, como la habilito?

    ResponderEliminar
  45. No he entendido ¿qué opción suprimiste?

    ResponderEliminar
  46. Hola mira tengo una duda, he añadido este menú a mi blog y lo he modificado y todo bien, pero antes de modificarlo (solo he cambiado los colores) me salía una página para añadir comentarios, entradas y demás y ahora lo único que me sale es... nada...
    Lo he quitado y vuelto a añadir por si acaso me he comido algo, pero nada que sigue igual.
    Así que... help meee!!!

    ResponderEliminar
  47. Hola Laura,

    No he entendido bien el problema, ¿en dónde te salía antes añadir comentarios y entradas?

    ResponderEliminar
  48. En el menú, yo seleccionaba un enlace y me salía y ahora nada de nada, mira te paso el enlace para que o puedas ver (espero que puedas XD)

    http://laemperatrizdelaluna.blogspot.com/

    Es nuevo así que... intenta no asustarte!!!

    ResponderEliminar
  49. Pierde cuidado que mis blogs de prueba sí son un desastre.

    No aparece nada porque no has puesto la URL a la que enlazará cada pestaña. Ayer te envié un mail explicándote cómo se hace. Revisa tu bandeja de correo no deseado por si acaso se hubiera ido allá.

    ResponderEliminar
  50. Hola Potro, che muy bueno! te felicito, porque la verdad todo lo que explicas está buenísimo, y tenés una forma de explicar muy buena jejeje.
    Pero quería preguntarte algo...
    Veras, yo tengo un blog, y quería ponerle este menú, pero en una de las pestañas quería ponerle "CONTACTO" como hago para que una persona que entre a mi Blog pueda contactarse conmigo. jeje, nosé si se entiende lo que te quiero preguntar.

    Gracias che! Saludos.

    ResponderEliminar
  51. Gracias por tus comentarios bug.
    Puedes hacer un formulario de contacto y que la pestaña contacto enlace a ese formulario.

    Saludos.

    ResponderEliminar
  52. Tengo una pregunta....en este menu como hago para que no me abra otro internet explorer...kiero q me lo habra en la misma pagina sin tener q crear otro IE...ayudenme uu

    ResponderEliminar
  53. El menú no tiene ningún atributo que indique que el enlace se abra en otra ventana, quizá has añadido algo que hace eso pero no es el menú.

    ResponderEliminar
  54. q raro solo he hecho lo q me decia ahi :S...chekeare 1 vez mas pero vale man ^^. Gracias

    ResponderEliminar
  55. Igual si me dices en qué blog lo has puesto puedo darme una idea de qué pueda ser lo que hace que se abra en otra ventana.

    ResponderEliminar
  56. Hola Potro me encanta todo lo que haces!!! es súper interesante, he aprendido muchísimo, muchas gracias!
    Estoy armando mi blog que es muy sencillo, pero por ignorancia porque de HTML no se casi nada, (ahora estoy en la fase de aprendizaje) no sé como quitar los puntos que vienen por defecto de los menús verticales en Blogger
    Seguro es súper fácil pero para mí es como leer un idioma extraño

    gracias otra vez

    ResponderEliminar
  57. Hola Paulina Teresona,

    ¿Cuáles puntos del menú? Necesitaría ver el blog para saber a cuáles puntos te refieres.

    Saludos!

    ResponderEliminar
  58. Hola Potro, finalmente ya lo resolví, finalmente me cambié a tumblr

    adjunto mi blog

    papelesblancos.tumblr.com

    muchas gracias por contestar
    Paulina

    ResponderEliminar
  59. Hola gracias por tus post los e estado viendo y son muy interezantes.. En relacion a este tipo de menu me preguntaba si sera posible añadirle sub-menu en el mismo y si fuese asi podrias decirme como lograrlo gracias...

    ResponderEliminar
  60. Con este menú no, ya más adelante publicaré uno vertical que sí pueda tener subpestañas.

    ResponderEliminar
  61. no puedo no se si lo pego mal cuando voy a vista previa el código que pego en la plantilla se ven detrás del encabezado que estoy asciendo mal

    ResponderEliminar
  62. Probablemente estás pegando el código después de donde se indica en lugar de pegarlo antes de.

    ResponderEliminar
  63. muchísimas gracias por fin di con el error te lo agradezco mucho

    ResponderEliminar
  64. Saludos mano
    Este menú me sirve para el blog de aviación? para ponerlo a la izquierda?

    ResponderEliminar
  65. Por supuesto, puede servir para cualquier blog ya que no requiere de scripts.

    ResponderEliminar
  66. hola, gracias por la explicación me resultó todo .... menos que me salen todas las letras al inico del blog, como soluciono eso, me podrias ayudar, te dejo la direccion de mi blog para que me entiendas mejor

    http://regalarte-jsv.blogspot.com/

    te agradezco si me ayudas mira que se ve bien feo jajaja

    ResponderEliminar
  67. Hola JESSICA, no veo que tengas puesto el menú en tu blog.

    ResponderEliminar
  68. hola Potro, me me gusta el menu vertical que tienes, pero me gustaria que ese menu estuviera cada palabra adentro de un cuadrito y que estuvieran centradas, crees que se pueda hacer?

    ResponderEliminar
  69. Para centrar las letras agrega debajo de #menuvert ul li a { esto:
    text-align:center;

    Para que tengan un borde que las enmarque agrega debajo de #menuvert ul li { esto:
    border-bottom:1px solid #000;
    border-left:1px solid #000;
    border-right:1px solid #000;

    ResponderEliminar
  70. hola, muy interesante tu blog, muchas felicidades-
    disculpa tengo un blog y me gustaria ponerle videos de youtube; pero quisiera poner de 4 en 4 en forma horizontal.
    se podria hacer esto?
    si tienes una respuesta de to agradecería mucho.

    ResponderEliminar
  71. Puedes probar usando una tabla y ahí colocar los códigos de los videos.

    ResponderEliminar
  72. Gracias por el menu Potro, un saludo.

    ResponderEliminar
  73. Hola! Gracias por explicar todo y por el menu :)
    La única duda que tengo es esta: dónde están los códigos para cambiar el color?
    Un saludo!

    ResponderEliminar
  74. Hola Auxi,

    En esta parte se cambia el color de fondo:
    background-color: #B0CBDD; /* color de fondo del menú */

    Saludos!

    ResponderEliminar
  75. hola potro, ya te hice una consulta en otro posteo, pero creo que es mas pertinente haberte consultado en este post,

    esta es la duda, si yo quiero poner en la url del menu la direccion de una de las etiquetas, es super entendible,

    para poder hacer eso tuve qe crear un gadget de etiquetas

    pero como hago para no tener al gadget por un lado y al menu en otro gadget (de html)
    es decir, yo pretendo tener una seccion del menu qe tenga la url de una de las etiquetas y qe el gadget de etiquetas no exista o no se vea, espero haberte expresado claramente, te agradeceré mucho tu atencion!

    ResponderEliminar
  76. Hola oso, ya te he respondido en la otra entrada. Saludos!

    ResponderEliminar
  77. Ya sé cuál es mi problema!!!
    Ahora en Diseño > Elementos de la página > Añadir un gadget, selecciona HTML/Javascript y pega ahí esto

    En ese paso, yo no puedo seleccionar HTML/Javascript, no me sale. Al añadir un gadget directamente me da la lista de opciones. ¿Cómo lo soluciono?
    http://laputaironia.blogspot.com/

    ResponderEliminar
  78. Cuando entras en Diseño > Elementos de la página > Añadir un gadget, verás que del lado izquierdo hay unas pestañas, dicen, Lo básico, Destacados, Los más populares, Más gadgets, y Añade tu propio.

    En el primero, en Lo básico da click y verás una lista de gadgets, el primero dice 'Seguir por correo electrónico', y un poco más abajo está el que dice HTML/Javascript, ese es el que necesitas para agregar el menú.

    ResponderEliminar
  79. ayyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy mil graciassssssssssssssssssssssss que ayer me tiré hasta las cinco de la mañana dándole vueltas!!!!!!!!!!!!!!!!!!!! GRACIAS GRACIAS GRACIAS GRACIAS GRACIAS!!!!!!!!!!!!!!!!!!!!!!

    ResponderEliminar
  80. ahora tengo otro problema :-(... Se me abre el menú, pero igual que el menú de etiquetas... No habría un modo de que, cuando se seleccione una categoria del menu, se despliegue bajo la misma las entradas que contiene?????

    ResponderEliminar
  81. Así es el menú y de hecho así son todos, el único gadget que muestra el nombre de las entradas es el gadget llamado Archivo del blog.

    ResponderEliminar
  82. y las letras se pueden poner más gordas??? Es decir, en negrita???

    ResponderEliminar
  83. Sí, debajo de #menuvert ul { agrega:

    font-weight:bold;

    ResponderEliminar
  84. Antes que nada muchas gracias por tus aportes, en verdad no cualquiera se toma el tiempo de compartir con los demás y contestar todas sus inquietudes.

    Copié el código y funcionó a la perfección, pero me gustaría saber ¿cómo puedo hacer para que la pestaña permanezca del color seleccionado cuando estas en el contenido que esta debe mostrar?, por ejemplo si estas en la página de "mapa de sitio" la pestaña "mapa de sitio" se muestre con el color de selección.

    Espero haberme explicado.
    ¡Saludos! y muchas gracias de antemano.

    ResponderEliminar
  85. Por cierto, en la plantilla "viajes" de blogger inserte el gadget "lista de enlaces" y lo ubique debajo de la cabecera a modo de menú horizontal, pero la barra donde se ubican los enlaces es muy ancha, por lo cual la intenté modificar colocando line-height:20px; debajo de .tabs-inner .widget li { en diseño html pero no sucedió nada.

    Supongo que no es esa la parte que debo modificar.

    Gracias de nuevo.

    ResponderEliminar
  86. Hola ツ carlos [я*],

    Usualmente esos efectos en las pestañas sólo son posibles con uso de algún script, pero no con CSS como en este caso.
    Lo de la plantilla que mencionas necesitaría verlo puesto en algún blog para entender bien cuál es el problema y decirte qué opciones hay para solucionarlo.

    ¡Saludos!

    ResponderEliminar
  87. ¡Hola!

    http://proob123.blogspot.com/

    Esa es la dirección del blog con el que estaba jugando, y como puedes notar la barra horizontal de menús es algo ancha.

    ¡Qué mal lo de las pestañas! Pienso que es un efecto que tiene mucha vistosidad.

    Gracias por tu tiempo.
    ¡Saludos!

    ResponderEliminar
  88. Hola de nuevo ツ carlos [я*],

    Busca esta parte de tu plantilla:

    .tabs-inner .widget li a {
    display: inline-block;
    padding: 1em 1.5em;

    Cambia ese 1em por otro valor, por ejemplo 10px
    Saludos.

    ResponderEliminar
  89. Funcionó como siempre... En serio, muy agradecido, muy agradecido.

    ResponderEliminar
  90. Hola potro, quiero consultarte algo, como podría hacer para agregarle una subpestaña a alguna seccion de éste menú, por ejemplo que al pasar el cursor por la seccion descargas de éste menu , se deslice una o dos subpestañas.
    desde ya gracias por la atención, y voy agradecerte una respuesta
    saludos

    ResponderEliminar
  91. Con este menú no es posible, ya tengo un poco de tiempo que he querido publicar un menú que sí lo permita pero he tenido otras entradas pendientes que no me han dejado hacerlo, pero espero sacar todo lo atrasado lo más pronto posible y publicar un menú vertical con subestañas. Si me esperas unos días podrás verlo ;)

    ResponderEliminar
  92. potro ayudame a colocara este menu en mi blogger... aqui te dejo el link: http://net.tutsplus.com/tutorials/javascript-ajax/how-to-create-a-mootools-homepage-inspired-navigation-effect-using-jquery/

    ResponderEliminar
  93. Hola Redacción, no hace falta repetir la pregunta. En estos días lo pruebo y si sale bien en Blogger lo programo para las próximas entradas. Saludos.

    ResponderEliminar
  94. hola potro , como andas ? te hago una consulta, tiene un menu vertical en acordeon, desplegable tipo slide que muestre los submenu hacia abajo y no hacia el costado ? como siempre muchas gracias por la atencion y estare atento a una respuesta, saludos

    ResponderEliminar
  95. Hola Torneo Morumbi,

    Hay un menú vertical desplegable al que podrías ponerle los enlaces que quieres mostrar:
    http://ciudadblogger.com/2011/03/menu-vertical-desplegable-con-jquery.html

    Saludos.

    ResponderEliminar
  96. POTRO gracias por la rápida atención. Espero que no tenga problemas al ponerle los enlaces, el tema es que esa subpestaña tiene que ser igual a la pestaña, se logra ?
    A su vez potro, voy a dejar la direccion en donde encontre hoy un menu del agrado que estaba buscando, el gran inconveniente es que no me funca, podrias probarlo y en la semana o cuando puedas avisarme si te funciono en tu blog de pruebas !!
    como siempre te agradesco la amabilidad.
    abrazo

    ResponderEliminar
  97. me falto la direccion:

    http://www.davidrojas.net/demos/acordeon_multinivel.html#

    es el ejemplo de menu que te conte. gracias.

    ResponderEliminar
  98. Claro que sí, deja lo pruebo pero no te prometo publicarlo en una semana ya que tengo bastantes posts pendientes, pero en cuanto me haga un espacio lo publico con mucho gusto, sino ese al menos uno que sea bastante parecido ;)

    ResponderEliminar
  99. tal cual potro, sería de mucha ayuda. Esperaré por novedades. y espero darme cuenta de las mismas jejej
    Muchas gracias.

    ResponderEliminar
  100. querido potro, he aprendido tanto de ti, mira aplique este menu en mi directorio, y hoy me entere que en explorer se ve todo negro donde lo puse que es en varias partes al final de la plantilla, tienes alguna idea de porque pasa eso, pues en los otros exploradores me anda de maravilla, odio explorer con tosa mi alma siempre hace problemas tampoco se ve como se debería ver las entradas, que horror

    Ojala me puedas dar un dato de porque sucede:S
    aquí mi directorio http://www.bebloggerablogs.com/

    ResponderEliminar
  101. Hola Be Bloggera,

    Parece que es porque hay un error en el código del color que has puesto para el fondo del menú. Tienes este:
    #244244244;

    Recuerda que los códigos hexadecimales son de seis caracteres, y tú has incluido nueve ahí. Cambialo por uno de seis y deberá arreglarse en Internet Explorer.

    Saludos y muchas gracias por tu amable comentario.

    ResponderEliminar
  102. Muchas gracias Potro lo he arreglado como me dijiste y quedo super, eres maravilloso te pasate

    ResponderEliminar
  103. Potro te felicito!

    También te quiero hacer una pregunta...

    Veo que al menú cuando se le posa el raton le aparece una barrita mas oscura del lado izquiero y tambien la palabra se desplaza un poco a la derecha ¿se pueden cambiar esas dos cosas?

    ResponderEliminar
  104. Claro Ariel, sólo cambia esto:
    border-left: 10px solid #000066; /* color del rectángulo junto al título */

    Por esto:
    border-right: 10px solid #000066; /* color del rectángulo junto al título */

    ResponderEliminar
  105. El Potro y puedo cambiar que cuando le asiento el raton no se desplace el nombre un poco a la derecha?

    ResponderEliminar
  106. Abajo de eso agrega esto:
    margin-right:-10px;

    ResponderEliminar
  107. El Potro y porque pasaba eso? ¿sera que en el código principal de arriba habia algo que hacia que eso pasara?

    ResponderEliminar
  108. Lo que pasa es que el menú tiene un borde al pasar el cursor sobre la pestaña, así que, el grosor del borde (azul fuerte en mi ejemplo) es lo que desplaza el texto. Sino tuviera ese borde no se movería el texto.

    ResponderEliminar
  109. El Potro, está muy bueno el menú, además es justo lo que andaba buscando porque vi otros menús por ahí pero no me gustaba la idea de que tuvieran una imagen alojada por ahí.

    Ahora te hago otra pregunta, el tipo y tamaño de fuente se le puede cambiar?

    ResponderEliminar
  110. Sí, en font-size: 11pt; cambias el tamaño, y debajo de eso puedes poner el tipo de fuente:
    font-family:Arial;

    ResponderEliminar
  111. Muchas gracias por las respuestas y además por responder rápido. Te felicito por ayudar y haber creado éste sitio, yo recién estoy empezando con un blog...lo quiero hacer bien y la verdad que lleva mucho tiempo y dedicación

    Saludos!

    ResponderEliminar
  112. Tiempo, dedicación y muuucha paciencia, verás que con eso conseguirás poco a poco darle forma a tu blog tal como quieres ;)

    ResponderEliminar
  113. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  114. El Potro, tengo un problema que tanto el menú como un banner que he puesto en el gadget no me queda centrado...cómo puedo hacer para centrar las cosas adentro del gadget?

    ResponderEliminar
  115. aca te dejo el blog
    http://thebestonlinestores.blogspot.com/

    ResponderEliminar
  116. Hola Ariel,

    Reduce el ancho del menú a 185px (en los códigos dice dónde es el ancho del menú), se ve así porque el menú está más ancho de lo que es el ancho de tu sidebar.
    Para alinear elementos dentro de un gadget mira aquí:
    http://ciudadblogger.com/2009/12/alinear-elementos-y-gadgets.html

    Saludos.

    ResponderEliminar
  117. El Potro, siempre de gran ayuda tus respuestas

    Te hago otra consuta, tengo pensado reformar el ancho de los gadgets de la columna de la izquierda para que queden mejor con el menu, el tema es que estoy pensando tambien agragar otra columna de gadgets del lado derecho pero me pregunto si se podra reformar el ancho de una sola columna de gadgets o si se reforman todas?

    Me gustaria saber si es posible reformar el ancho de una sola columna de gadgets

    ResponderEliminar
  118. Si agregas otra columna entonces tendrás que aumentar el ancho del blog, de lo contrario todo lo demás se reducirá. Saludos.

    ResponderEliminar
  119. Gracias, disculpa tantas preguntas, saludos !

    ResponderEliminar
  120. Hola nuevamente Potro, ya aprendí bien el tema del menú, incluso a añadirle CSS, voy de apoco porque estoy haciendo 4 blogs, la consulta que te quiero hacer es la siguiente: Si lo pongo imágenes a los botones, hay que subirlas si o si fuera de blogger o se pueden alojar de alguna manera en blogger?

    Otra cosa, poner ese tipo de imagenes le aumente el tiempo de carga al blog?

    ResponderEliminar
  121. Hola Ariel,

    Puedes subirlas a Blogger, de hecho las imágenes que subimos desde Blogger se alojan en Picasa, así que también las puedes subir directo en Picasa:
    http://ciudadblogger.com/2011/06/subir-imagenes-y-obtener-la-url-de-la.html

    Lo del tiempo de carga depende de qué tan grande sea el tamaño de la imagen, sino es mucho no debe afectar.

    Saludos.

    ResponderEliminar
  122. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  123. hola potro, felicitaciones,tienes unos temas de gran ayuda, ahora por favor si me puedes ayudar con este pequeño problema, es con el menú horizontal, no consigo poner a la medida de la imagen que esta de cabecera hay alguna manera que esto se pueda ajustar a esa medida, aquí te adjunto el link, http://constructoraasociadesfega.blogspot.com/ , hechale un vistazo Xfa! desde ya muy agradecido por tu ayuda. SALUDOS CORDIALES.

    ResponderEliminar
    Respuestas
    1. Gracias kawsaqi.
      Para extender el menú y que lo cubra todo, cambia esto:

      #menucontainer{
      position:relative;
      height:50px;
      color:#FFFFFF;
      background:#383636;
      width:100%;
      font-family:Helvetica,Arial,Verdana,sans-serif;
      }


      Por esto:

      #menucontainer {
      position: relative;
      height: 50px;
      color: white;
      background: #383636;
      width: 107%;
      font-family: Helvetica,Arial,Verdana,sans-serif;
      margin-left: -30px;
      }

      Eliminar
  124. grandioso!!, me re-sirvió, muchas gracias Potro, eso! que cambien otro tipo de menú tuve que guiarme de los puntos que detallas. muchas gracias, un abrazo, saludos desde Perú!!.

    ResponderEliminar
    Respuestas
    1. Qué gusto que te haya servido, ¡saludos!

      Eliminar
  125. Buenas. Aqui saluda Manu desde otro usuario =P Resulta que una de la páginas que administro tiene este menu, y funcionaba normalmente. La cuestión es que hace poco revisé y los links que tiene cada pestaña no me los reconoce. Probé en Chrome y Firefox y pasa lo mismo. Nosé si surgió alguna incompatibilidad en la plantilla o qué.
    Perdon la molestia, saludos
    http://universidad-mijd.com.ar

    ResponderEliminar
    Respuestas
    1. Hola Manu, revisa las URLs, están incompletas, cópialas y pégalas correctamente para que funcionen los enlaces. Saludos.

      Eliminar
  126. Muy buen post Potro pero estoy buscando una manera de crear el menú con una imagen, es decir quiero que el menú sea una sola barra (Una imagen) y que aparezcan los títulos de cada pagina dentro de esa barra pero al darle clic encima de cada texto vaya a su pagina correspondiente.
    Espero me contestes, necesito muy urgente esa información.
    Mira este es un ejemplo de lo que estoy buscando: http://cp-globalpenguin.blogspot.com.es/ ¡Gracias!

    ResponderEliminar
    Respuestas
    1. No hace falta duplicar los comentarios, ya te he respondido en la otra entrada ;)

      Eliminar
  127. Potro, no me sale... se me queda muy mal ubicado. ¿Qué crees que puede ser?

    Un saludo

    www.antiguedadesreligiosas.blogspot.com

    ResponderEliminar
    Respuestas
    1. Hola AnticuarioReligioso, estos menús son para la sidebar, si lo pones en esa área quizá debas primero seguir estos pasos:
      http://ciudadblogger.com/2011/03/como-usar-cualquier-menu-en-las.html

      Eliminar
    2. Gracias Potro, finalmente he optado por cambiarlo de posición, pero ahora no me salen las barras divisorias ¿Cómo puedo solucionarlo? Gracias de antemano!!

      Eliminar
    3. En realidad no hay barras divisorias, así es como debe salir. En el del ejemplo se ve así por la plantilla que tengo, cuando lo publiqué tenía otra plantilla en el cual se veía como en el tuyo, así es como debe ser ;)

      Eliminar
  128. Hola Potro, sé que has estado de vacaciones y no te quiero meter ninguna prisa,,, Verás, he metido ese código y copiado uno a uno los datos de las pestañas así como urls, bien, todo bien,,, pero parece que debe quedar algún resto de la barra de botones anterior pq aunque la borre me sale cada X tiempo sin ponerla y duplicandome los enlaces. ¿Sabes si es por tener algún codigo duplicado o algo en el html?

    ResponderEliminar
    Respuestas
    1. Hola Javier. Quizá existen rastros del otro código que tenías, no sé qué menú tenías antes, pero ve a la entrada donde tomaste los códigos y revisa que hayas eliminado absolutamente todo lo que hayas puesto de ahí.
      Si todo estuviera bien prueba eliminar las cookies y caché de tu navegador, solo por si fuera el caso de que la "memoria" del navegador sigue mostrando algo que existió antes.

      Eliminar
  129. Hola Potro,,, el menú que tenía era horizontal y puesto a mano con códigos tomados de tú blog hace ya algún año que otro. De todos modos te quería consultar algo pero no sé donde puedo preguntarte,,, es referente a las plantillas de artisteer,,, ya me comentarás si procede ok? Como siempre gracias Potro por tú amabilidad.

    ResponderEliminar
    Respuestas
    1. Como me dijiste en otro comentario creo que tengo un problema de caché pq ahora he puesto otra plantilla y continua haciendome 2 menús y he de borrar uno.

      Eliminar
    2. De Aristeer no sé nada Javier, esas plantillas y yo no nos llevamos muy bien, parece que no me quieren :(

      Eliminar
    3. ¿En cuál blog tienes el problema y cuál menú deseas eliminar?

      Eliminar
  130. Hola potro lo puedo colocar en mi blog http://serviciodereparaciones.blogspot.com.es/ por el lado izquierdo como flotante.
    Gracias,

    ResponderEliminar
    Respuestas
    1. Nunca lo he intentado hacer flotante Jesus, puedes probar poniendo debajo de #menuvert ul { esto:
      position:fixed;
      left:0;
      top:250px;

      Eliminar
  131. Potro querido Gracias... Quedó bien si bien no es un boton de cada color, logre la composición :)))

    http://anapradapecadora.blogspot.com.ar/

    ResponderEliminar
  132. yo quisiera decir que voy haciendo cosas en blogger a base de pruebas
    ¿me podeis decir un codigo de menu vertical donde pinche en el titulo y me lleve a donde dice?como por ejemplo una autora Amanda quick pinchar y que me aparezca el lugar donde esta la sipnosis y demas del libro ?

    ResponderEliminar
    Respuestas
    1. Hola LaBibliotecaria, cualquier menú podría servirte, en realidad tú eliges qué página abrirá la pestaña, es cuestión de que elijas cuál dirección poner en la URL de la pestaña.

      Eliminar
  133. Hola protro muchas gracias por tan magnifico aporte y ayudarnos a todos. Me gusta mucho este menú, como hago para colocarlo a la derecha? quiero poner el menú a la derecha. Gracias de antemano. Saludos desde Venezuela.

    ResponderEliminar
    Respuestas
    1. Hola, puedes moverlo a la derecha con estos estilos:
      #menuvert {
      float:right;
      }

      Eliminar
    2. Hola de nuevo, gracias por tan pronta respuesta potro. Esos estilos donde lo coloco? lo que quiero es colocar el menú a la derecha y centrado. Gracias de nuevo.

      Eliminar
    3. Todos los estilos van siempre antes de ]]></b:skin>
      Saludos.

      Eliminar
  134. Hola potro disculpa pero tengo otra pregunta. Como hago para poner el menú a la derecha y en el centro. Me quedó arriba a la izquierda. Mira como va http://pruebascsplus.blogspot.com/ espero tu respuesta. Gracias.

    ResponderEliminar
    Respuestas
    1. Hola, mira el comentario que está arriba.

      Eliminar
  135. hola, como hago para el menu de categorias que tienes en tu blog?? con el buscador de google.
    Gracias!

    ResponderEliminar
    Respuestas
    1. Hola Carlos, el buscador no es parte del menú, es sólo otro gadget que puse debajo del menú. Éste se puede hacer de varias formas, una forma simple es con una tabla HTML:
      http://ciudadblogger.com/2009/05/insertar-tablas-en-blogger.html

      Eliminar
  136. ¡Hola El Potro! Primero decir que me encanta Ciudad Blogger, por mucho que mire no termino de descubrir cosas nuevas sobre los códigos y el mundo Blogger (que tanto se percibe por cualquier lugar xDD) así que mi enhorabuena por este genial blog~~

    Yyyyy una vez dicho eso voy a una duda que tengo sobre este post xD.
    Pues me gustaría quitar los puntos negros que aparecen por defecto en las listas verticales de menú, este es mi menú:

    http://oi41.tinypic.com/2q1zytc.jpg

    Lo que quiero suprimir (los puntos que aparecen por defecto) están enmarcados en un recuadro azul claro. Espero que puedas ayudarme, porque por mucho que lo he intentado no he logrado arreglarlo xD.

    ¡Gracias de antemano!

    ResponderEliminar
    Respuestas
    1. Muchas gracias Pegaso. Prueba con este código:
      .sidebar ul, .sidebar li, #menuvert ul li, #menuvert li {
      list-style:none;
      }

      Eliminar
  137. Hola! gracias por compartir esto, una pregunta, ¿se pueden colocar menus verticales Y horizontales? porque no quiero que quede todo junto en el sector superior, y ademas me gustaría tener menú para otras temáticas a los laterales de mi blog. Muchas gracias

    ResponderEliminar
    Respuestas
    1. Por supuesto baby blue, puedes usar todos los menús que quieras, este lo puedes poner en la sidebar (por ejemplo) y luego puedes poner otro menú más debajo de la cabecera. En la categoría "Menús" encontrarás más opciones.

      Eliminar
  138. hola ... estoy diseñando una red social movil bastante sencilla y me parece un menu excelente ,,, aunque estoy esperando puedas ayudarme ..
    necesito hacer un duplicado del menu osea
    como dos listas paralelas .
    saludos y gracias de ante mano.

    ResponderEliminar
    Respuestas
    1. Hola hecgabor, es sencillo, sólo aumenta al doble al /* ancho del menú */ por ejemplo que quede en 400px
      Luego debajo de #menuvert ul li { agrega esto:

      width: 49%;
      float:left;

      Eso hará que el menú se divida en dos columnas.
      Saludos.

      Eliminar
  139. gracias . es justo lo que buscaba.

    ResponderEliminar
  140. Hola, sigo tu blog desde hace tiempo y ahora que sé que has vuelto, me gustaría saber cómo puedo poner dos menús como este, uno a la izquierda y otro a la derecha. Lo pondría a cada lado de la cabecera, pero creo que eso sé hacerlo.

    ¡Un saludo!

    ResponderEliminar
    Respuestas
    1. Hola María, gracias por seguir este blog :)
      ¿Lo quieres poner abajo de la cabecera, o justo a los extremos de la cabecera?

      Eliminar

Los comentarios están siendo moderados y serán publicados una vez que hayan sido revisados por un administrador.
Si tu blog contiene material protegido por derechos de autor habilita tu perfil y deja únicamente el nombre de tu blog, no dejes la dirección del mismo, de lo contrario el comentario será eliminado.

 
Ir Arriba Ir Abajo
¿Te gusta Ciudad Blogger?