Menú horizontal con subpestañas en dos columnas

30 de julio de 2012 306 comentarios ,
Este menú pertenece a la plantilla Johny Joss, es un menú horizontal en el que sus subpestañas se muestran en dos columnas y que además está hecho con CSS, sin nada de scripts.

La "ventaja" por así decirlo, es que las subpestañas al acomodarse en dos columnas no quedan muy largas, así que se verán ordenadas y con menos espacio a lo largo. Puedes ver un ejemplo aquí mismo:



ATENCIÓN: Si usas una plantilla hecha a través del Diseñador de plantillas de Blogger primero necesitas seguir los pasos de esta entrada.

Para poner este menú entra en la Edición HTML y antes de ]]></b:skin> pega los estilos CSS:
/* Menú horizontal con subpestañas en dos columnas
----------------------------------------------- */
#toppic {
width:940px; /* Ancho del menú */
height:37px;
background-image: -moz-linear-gradient(top, #317FB8, #385D96);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #317FB8), color-stop(1.0, #385D96));
filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#317FB8,endColorStr=#385D96);
border-bottom:1px solid #002851;
border-top:1px solid #2f558b;
margin:0 auto;padding:0 auto;
overflow:hidden;
text-shadow:1px 1px 2px #002851;
}
#topwrapper {
width:940px; /* Ancho del menú */
height:40px;
margin:0 auto;
padding:0 auto;
}
.clearit {clear: both;height: 0;line-height: 0.0;font-size: 0;}
#top {width:100%;}
#top, #top ul {padding: 0;margin: 0;list-style: none;}
#top a {
border-right:1px solid #2f558b;
text-align:left;
display: block;
text-decoration: none;
padding:10px 12px 11px;
font:bold 14px Arial;
text-transform:none;
color:#eee; /* Color del texto de las pestañas */
}
#top a:hover {
background:#2f558b; /* Color de las pestañas al pasar el cursor */
color:#c5fa6f; /* Color del texto de las pestañas al pasar el cursor */
}
#top a.trigger {
/* Flecha */
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjH-ZYR-a1B7KE0yBdVIRXLrh5Kqv5UUc8rfknrXyMHeXqEzNgXOt-QkpJPRZztEbkdeZ444Wy3rL1koK4bDsmZM7e88DzFoXEvlbASAwP1G3g_OmAWsAmKQUa9OYenm9qGVD89utgUcRE/s1600/arrow_white.gif);
background-repeat: no-repeat;
padding: 10px 24px 11px 12px;
background-position: right center;
}
#top li {float: left;position: relative;}
#top li {position: static !important; width: auto;}
#top li ul, #top ul li {width:300px;} /* Ancho del contenedor de las subpestañas */
#top ul li a {
text-align:left;
padding: 6px 15px;
font-size:13px;
font-weight:normal;
text-transform:none;
font-family:Arial, sans-serif;
border:none;
}
#top li ul {
z-index:100;
position: absolute;
display: none;
background-color:#1a3352; /* Color de fondo del contenedor de las subpestañas */
margin-left:-80px;
padding:10px 0;
border-radius: 0px 0px 6px 6px;
box-shadow:0 2px 2px rgba(0,0,0,0.6);
filter:alpha(opacity=87);
opacity:.87;
}
#top li ul li {
width:150px; /* Ancho de cada subpestaña */
float:left;
margin:0;
padding:0;
}
#top li:hover ul, #top li.hvr ul {display: block;}
#top li:hover ul a, #top li.hvr ul a {
color:#ddd; /* Color del texto de los submenús */
background-color:transparent;
text-decoration:none;
}
#top ul a:hover {
text-decoration:underline!important;
color:#c5fa6f !important; /* Color del texto de los submenús al pasar el cursor */
}
Ahora entra en Diseño, y en un elemento HTML/Javascript pega la estructura del menú:
<div id='toppic'>
<div id='topwrapper'>
<ul id='top'>
<li><a href='URL del enlace'>Pestaña 1</a></li>
<li><a href='URL del enlace'>Pestaña 2</a></li>
<li><a class='trigger' href='#'>Pestaña 3</a>
<ul>
<li><a href='URL del enlace'>Pestaña 3.1</a></li>
<li><a href='URL del enlace'>Pestaña 3.2</a></li>
<li><a href='URL del enlace'>Pestaña 3.3</a></li>
<li><a href='URL del enlace'>Pestaña 3.4</a></li>
<li><a href='URL del enlace'>Pestaña 3.5</a></li>
<li><a href='URL del enlace'>Pestaña 3.6</a></li>
</ul>
</li>
<li><a class='trigger' href='#'>Pestaña 4</a>
<ul>
<li><a href='URL del enlace'>Pestaña 4.1</a></li>
<li><a href='URL del enlace'>Pestaña 4.2</a></li>
<li><a href='URL del enlace'>Pestaña 4.3</a></li>
<li><a href='URL del enlace'>Pestaña 4.4</a></li>
<li><a href='URL del enlace'>Pestaña 4.5</a></li>
<li><a href='URL del enlace'>Pestaña 4.6</a></li>
</ul>
</li>
<li><a class='trigger' href='#'>Pestaña 5</a>
<ul>
<li><a href='URL del enlace'>Pestaña 5.1</a></li>
<li><a href='URL del enlace'>Pestaña 5.2</a></li>
<li><a href='URL del enlace'>Pestaña 5.3</a></li>
<li><a href='URL del enlace'>Pestaña 5.4</a></li>
<li><a href='URL del enlace'>Pestaña 5.5</a></li>
<li><a href='URL del enlace'>Pestaña 5.6</a></li>
<li><a href='URL del enlace'>Pestaña 5.7</a></li>
<li><a href='URL del enlace'>Pestaña 5.8</a></li>
</ul>
</li>
<li><a href='URL del enlace'>Pestaña 6</a></li>

</ul>
<br class='clearit'/>
</div>
</div>
Cambia las URLs de los enlaces y de las pestañas donde se indica.

Si quisieras agregar más pestañas entonces añade antes del </ul> en color azul una línea como esta:
<li><a href='URL del enlace'>Otra pestaña</a></li>
Y si quisieras agregar una pestaña con subpestañas entonces agrega esto:
<li><a class='trigger' href='#'>Otra pestaña</a>
<ul>
<li><a href='URL del enlace'>Pestaña 1.1</a></li>
<li><a href='URL del enlace'>Pestaña 1.2</a></li>
<li><a href='URL del enlace'>Pestaña 1.3</a></li>
<li><a href='URL del enlace'>Pestaña 1.4</a></li>
<li><a href='URL del enlace'>Pestaña 1.5</a></li>
<li><a href='URL del enlace'>Pestaña 1.6</a></li>
</ul>
</li>
En el primer código verás en las anotaciones en color verde el área de lo que se puede personalizar.
El color de fondo está hecho con gradientes CSS, #317FB8 es el color más claro y #385D96 el color más oscuro.
Si quisieras que las subpestañas se muestren en columnas de 3 entonces cambia el valor del
  /* Ancho del contenedor de las subpestañas */ por 450px

Cada pestaña tiene un ancho de 150px (ver la anotación en verde), por lo que si quisieras hacerlo más ancho tendrás que cambiar también el ancho del contenedor de las subpestañas, de lo contrario se mostrarán en una columna nada más.


306 comentarios en:

" Menú horizontal con subpestañas en dos columnas "

  1. Felicitaciones Potro muy buena herramiento para tener los menus mas ordenados.. Primero en comentar -.-!

    ResponderEliminar
    Respuestas
    1. Gracias Eduardo, esa es la idea, tener todo ordenadito :)

      Eliminar
    2. Gracias Potro, depronto cuando tenga más contenido me atreveré a insertar uno de estos, seguramente me pasaré por aquí para visualizar las buenas alternativas que ofreces.

      Saludos desde Colombia.

      Lion G.
      www.fanaticoweb.net

      Eliminar
  2. Hola, Potro!!! Justo algo así andaba keriendo, yo digo ke como ke sí nos lees el pensamiento xD, YOU'RE THE BEST!!! Gracias por el post. Besito =)

    ResponderEliminar
    Respuestas
    1. Gracias Merlina, aunque el post fue una petición de un usuario, se me hace que él sí lee la mente :P

      Eliminar
  3. Cooleresisisisisismo! muy bacano este menu, un poco de opacidad le da un buen estilo!

    ResponderEliminar
    Respuestas
    1. ¿Verdad que sí? Por un momento pensé quitarle esa opacidad pero definitivamente le da estilo :)
      Gracias por pasar!

      Eliminar
  4. Perfecto me será muy útil gracias Potro!

    ResponderEliminar
  5. Hola Potro, perdona por preguntarte otra cosa que no es relacionado al post.

    Porque en mi planilla el "defaut" de compartir que trae blogger no se me muestra?. (Facebook, Twitter, Enviar por correo...) - Me crea un espacio "vacío" y bastante ancho.

    P.d: Actualmente lo tengo desactivado.

    Saludos

    ResponderEliminar
    Respuestas
    1. Hola Elliugh, sigue los pasos de esta entrada:
      http://ciudadblogger.com/2010/06/botones-para-compartir-de-blogger.html

      Si continua el problema mira el comentario #149 de esa entrada.
      Saludos.

      Eliminar
    2. Hola!, definitivamente era por lo del comentario #149 ".share-button {display: inline-block;}"

      Problema resuelto, muchas gracias!

      Eliminar
  6. Potro, me encantó! pero como siempre tengo un pequeño problema, las pestañas me quedan blancas y no se lee nada salvo cuando paso el cursor que eso sí pude darle color pero no sé porque el menú en si queda blanco. Será que pongo mal la cuestión de gradientes? incluso dejando los valores que tu pusiste me queda así.
    te dejo el link para que veas: http://lacinerata.com.ar
    Gracias como siempre de antemano!

    ResponderEliminar
    Respuestas
    1. Hola Pabela, entré a ese blog pero no veo puesto este menú, así que no he podido saber cuál es el problema.

      Eliminar
    2. Ay Sí culpa mía perdoname es que de querer arreglarlo me mandé un moco y me había desaparecido la side bar jajaja no sé qué hice pero menos mal que esta vez SI me había guardado la plantilla, porque la kamikaze no siempre lo hace.
      Después el finde lo vuelvo a probar paso por paso y si no me sale o sigue sin mostrarse te aviso. Gracias!

      Eliminar
    3. Vale, vale, que todo salga bien entonces :)

      Eliminar
  7. Hola Potro se que no deberia comentar aqui nada pero como no tienes nada pa contactar como un formulario e pensado ponertelo aqui.

    Mi problema es que las entradas no se muestran enteras como las tuyas sino solo el titulo nose si es por la plantilla o esque falta algo aqui te dejo el blog para que lo veas:

    http://ata-system.blogspot.com.es/

    Un saludo.

    ResponderEliminar
    Respuestas
    1. Hola AtaSystem, así es la plantilla que usas, no es que le haga falta algo. Desconozco cuál haya sido el método para que las muestren así, por lo que no sabría decirte cómo mostrar todo el contenido. En todo caso sería bueno que reconsideraras el uso de otra plantilla que no tenga esa característica.
      Saludos.

      Eliminar
  8. UNa pregunta...los menus y submenus, pueden ser etiquetas??

    ResponderEliminar
    Respuestas
    1. Claro, puedes poner el enlace que quieras, incluyendo etiquetas:
      http://ciudadblogger.com/2010/06/menu-de-categorias.html

      Eliminar
    2. Osea, si no me equivoco, sigo los pasos de este tutorial y pongo en url la dirección de las eqtiquetas que quiero direccionar, no?

      Eliminar
  9. Genio, Potro, eres lo maximo... ya estoy agarrando confianza, jeje...

    Me gustaria saber si se puede poner en blogger una imagen flotante que no se deslize a los lados pero si de arriba a abajo... y que cuando presione las teclas para agrandar las letras, la imagen tambien se agrande y quede en su mismo lugar y no deslizante a los lados...

    Tambien que esta baje conforme choque en el limite superior de la pagina y no al momento de mover el mouse con la ruedita...

    Gracias Potro, y disculpe por poner el comentario en esta seccion...

    ResponderEliminar
    Respuestas
    1. Suena complicado, tendría que ver un blog que lo tenga para darme una idea más clara.
      Saludos.

      Eliminar
    2. Saludos Potro, gracias por contestar...

      En este blog puede ver a lo que me refiero. http://menderley.blogspot.com/ presiona las teclas Ctrl+(+) y mueve la pagina a la izquierda el chatbox tambien se mueve... en este caso que puedo hacer para impedir ese movimiento... pero sin que se arruine el movimiento de arriba a abajo...

      Y la otra es que ese chatbox no baje al momento de hacer scroll, sino al momento de chocar con el limite, como se muestra en el ejemplo suyo... http://ciudadblogger5.blogspot.com/ el anuncio baja y sube al hacer scroll, pero en mi caso quiero que baje cuando llegue a topar al chatbox...

      Jeje, suena complicadillo ahora que lo planteo de esa forma, de todas formas muchas gracias Potro, ya vere como le hago... o en el mayor de los casos esperare su respuesta... gracias...

      Eliminar
    3. Hasta donde sé (a no ser que me equivoque), no hay estilos que apliquen para cuando se hace un zoom en el navegador, así que por ese lado no puedes hacer nada.

      Lo otro quizá puedas conseguirlo con un script como este:
      http://ciudadblogger.com/2012/06/botones-para-compartir-que-se-detienen.html

      Tendrías que revisar los códigos de esa entrada y ver cómo aplicarlos en tu ejemplo. Algunos usuarios lo han hecho con otros elementos, lee los comentarios de ahí.

      Saludos.

      Eliminar
    4. Potro es usted un genio, es justo lo que estaba buscando, algo que cuando llegue al borde de la pagina lo arrastre hacia abajo, muchas gracias de verdad... ya lo aplique a la pagina, si gusta lo puede ver en menderley.blogspot.com, de verdad muchas gracias... por lo otro ya vere como le hago, de todas formas solo utilizo el blog para mis estudios y gracias a su ayuda me esta llendo bien... saludos igual...

      Eliminar
    5. Me alegro que te haya sido útil :)

      Eliminar
  10. Muchas gracias potro voy a ver si lo cambio por el que tengo gracias !!!

    ResponderEliminar
  11. Muchas gracias Potro me encanta tu blog y todo lo que publicas sigue asi =)

    ResponderEliminar
  12. Hola Potro que tal, primera vez que escribo y esta interesante el tema, más adelante cuando tenga mucho más temas en mi Blog lo voy a utilizar por ahora estoy luchando con este Blog ya que soy nuevo, y quiero que me ayudes, porque no se que esta pasando que no recibo visitas no se si puedas ver mi Blog, si tengo algún bloqueo.

    ResponderEliminar
    Respuestas
    1. Hola RICARDO, revisa que en la Configuración > Básico > Privacidad, tengas habilitado que los buscadores te puedan localizar. En la parte de Preferencias de búsqueda, ¿has cambiado algo?

      Eliminar
  13. Potro, un saludo. En la planilla que tengo ya viene implementada algunas pestañas y, asimismo,sub pestañas. Pero, cómo hago para ocupar esos espacios con información? Por ejemplo, en mi blog aparece la pestaña de fútbol internacional y las sub pestañas de Liga de Campeones, Copa Libertadores, etc.
    Quiero que al momento de que le den click, efectivamente, vayan a los temas que han seleccionado. O sea que haya un orden. No sé si me he dejado explicar, potro :S Nuevamente un saludo y gracias de antemano.

    ResponderEliminar
    Respuestas
    1. Hola Cristhian, una opción es que tus entradas las etiquetas para que puedan agruparse según el tema, y en tu menú pondrías el enlace a esas etiquetas, así cuando alguien haga click en (por ejemplo) "Copa libertadores" aparezcan todas las entradas que tienen esa etiqueta:
      http://ciudadblogger.com/2010/06/menu-de-categorias.html

      Eliminar
  14. Potro como movemos el menu entero a otra posicion?
    saludos

    ResponderEliminar
  15. Hola Potro, desde donde movemos el menu a otra posicion?
    saludos

    ResponderEliminar
    Respuestas
    1. El menú está en un elemento HTML/Javascript, así que desde Diseño puedes arrastrar ese gadget hasta donde desees.
      Saludos.

      Eliminar
  16. Hola potro! Muy buen post y útil como siempre. Tengo una pequeña consulta ¿Cómo puedo centrar los anuncios de adsense? Es que se van muy a la izquierda, gracias de antemano. :)

    ResponderEliminar
    Respuestas
    1. Si los has puesto manualmente en la plantilla encierra los códigos entre <center> y </center>

      Eliminar
    2. Hmm, pero no los hice manualmente lo hice desde diseño con la cuenta de adsense. Aprovechando este momento, en los comentarios [ejemplo] http://www.danpenguicp.com/2012/08/trucos-de-moda-pinguina-julio-2012.html noto que los comentarios de amontonaron con la fecha y no tengo idea de cuando pasó eso... en fin, gracias por ayudarme con mis dos curiosidades ;)

      Eliminar
    3. Entonces localiza los IDs de tus gadgets y agrega los estilos, por ejemplo:
      #Adsense1 {
      text-align:center;
      }

      Para lo otro no sé cómo estaban antes, pero puedes separarlos un poco cambiando esto:
      #comments-block .content{
      width:450px;
      max-width:340px !important;
      padding-left:80px;
      margin-top:10px;
      color:#000000;
      font-family:Arial;
      text-transform:capitalize !important;
      font-size:13px;
      }

      Por esto:
      #comments-block .content{
      width:450px;
      max-width:340px !important;
      padding-left:92px;
      padding-top:7px;
      margin-top:10px;
      color:#000000;
      font-family:Arial;
      text-transform:capitalize !important;
      font-size:13px;
      }

      Eliminar
  17. exactamente lo que estaba buscando muchas gracias potro muy bueno el menu oye una pregunta fuera de este tema me podrias ayudar a instalar jQuery ContentHover en mi blog

    http://www.backslash.gr/content/blog/webdevelopment/9-contenthover-jquery-plugin

    es que no le entiendo muy bien gracias

    ResponderEliminar
    Respuestas
    1. Hola Erick, no conozco ese plugin pero luego le doy una revisada y lo publico ;)

      Eliminar
  18. Mas que un comentario, además de felicitarte por tu ayuda, es una duda sobre el posible error que estoy cometiendo en este blog. espero me puedas ayudar después de darle mas vueltas que un caramelo en la boca y compararlo con el código incluido en tu post
    gracias de antemano y felicidades de nuevo

    ResponderEliminar
  19. Mas que un comentario, además de felicitarte por tu ayuda, es una duda sobre el posible error que estoy cometiendo en este blog. espero me puedas ayudar después de darle mas vueltas que un caramelo en la boca y compararlo con el código incluido en tu post
    gracias de antemano y felicidades de nuevo

    ResponderEliminar
  20. Mas que una pregunta es una duda sobre le posible error en el código sobre contenidos. No soy capaz de encontrar donde está el fallo por mucho que comparo con el descrito tu web.
    Gracias de antemano y felicidades por tu trabajo

    http://mihistoriadespana.blogspot.com

    ResponderEliminar
    Respuestas
    1. Hola Juan PM, quita el script que bloquea el botón derecho para que pueda revisar la plantilla y ver por qué no se despliegan los submenús.
      Saludos.

      Eliminar
    2. A mi me pasa lo mismo que a Juan: http://porsuertenacimadridista.blogspot.com.es/ No se despliegan los menús y he sustituido todo lo del anterior menú teoricamente bien

      Eliminar
  21. El menu me aparece perfecto pero no me bajan las pestañintas :S. Por cierto, increible el trabajo que haces aqui. He "tuneado! mi blog enterito siguiendo los pasos que nos marcas :)

    ResponderEliminar
    Respuestas
    1. Gracias por tu comentario SierraBares, cambia esto:
      #top li {position: static; width: auto;}

      Por esto:
      #top li {position: static !important; width: auto;}

      Con eso se deberá arreglar.
      Saludos.

      Eliminar
    2. Si señor!!! Eres un crack! Muy agradecido, este menú encaja perfecto con el diseño de mi blog :)

      Eliminar
  22. Hola Potro, se puede instalar este menu en una pagina web. Lo he intentado y me da errores:
    -No aparece el fondo de la barra del menu
    -Al desplegar un submenu no puedo acceder a los enlances"desaparecen" cunado intento acercarme a ellos.
    Saludos y muchas gracias

    ResponderEliminar
  23. Hola. He añadido este menú en mi blog de prueba http://lovingriodejaneiro2.blogspot.com.br/ pero me salen unas líneas discontinuas negras encima del menú y los submenús. Le he cambiado el color y algunas cosillas, pero antes de hacerlo también salían esas líneas. ¿Hay alguna forma de quitarlas? Muchas gracias. Laura.

    ResponderEliminar
    Respuestas
    1. Hola Laura, para lo de las líneas que aparecen en el menú agrega estos estilos:
      .widget ul li, .widget #ArchiveList ul.flat li {
      border: 0 !important;
      }

      ¡Saludos!

      Eliminar
    2. Muchas gracias! Ahora se ve bien :)

      Eliminar
    3. Disculpa Potro pero ahora me surge otro problema: en el internet explorer el color de fondo del menú principal sale invisible. ¿Sabes si hay solución para eso? Gacias de nuevo. Laura.

      Eliminar
    4. Hola Laura, después de height:37px; agrega esto:

      filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#317FB8,endColorStr=#385D96);"

      Eliminar
  24. Disculpa, no había leído que con las plantillas del Diseñador de plantillas de blogger no siempre funcionan los menús. Estoy viéndolo ahora en tu otro post que habla de ésto. Gracias igualmente, a ver si consigo hacerlo con lo que tú dices. :)

    ResponderEliminar
    Respuestas
    1. Hola Laura, mira el comentario #24.1, con eso deberá funcionar también para esas plantillas ;)

      Eliminar
  25. hola! se podria cambiar el color? por ejemplo blanco y negro?
    no entiendo muy bien ahora como hacer para poner mis propios titulos..
    te dejo mi blog, un saludo!!

    http://amaiamakeupartist.blogspot.com.es/

    ResponderEliminar
    Respuestas
    1. Hola Amaia Make Up Artist, donde está el código del color del fondo (mira al final de la entrada) puedes poner los códigos de los colores que quieras:
      http://ciudadblogger.com/p/codigos-de-colores-rgb-y-hexadecimales.html

      Eliminar
  26. Maginifico Potro. aunque me sigo quedando con el mio de mas niveles, me sirve mucho más, Pero este esta genial, lastima que no traiga más subniveles XD.

    ResponderEliminar
  27. Hecho. Lamento el tiempo de respuesta y los problemas que haya podido causar. Gracias de nuevo

    ResponderEliminar
  28. Me permito de nuevo, y perdona la pesadez, comentarte que he logrado que aparezcan los sub-menús, siguiendo las instrucciones que facilitabas a SierraBares aunque podrás comprobar que la posición de estos no es la que debiera. No se si será mucho pedir me indicaras como situarlos para que "abran" debajo de cada pestaña o menú. Gracias de nuevo y felicidades por este "peaso enciclopedia" para curiosos!
    Un abrazo

    ResponderEliminar
  29. De nuevo... yo! Me he puesto a trastear entre los códigos y por fin di con la que estimo la mejor solución al diseño de las subpestañas. Creo que ha quedado bastante a aparente.
    Aprovecho para pedirte autorices un link de tu espacio en mi "otro" blog ParidasMentales, para promover en lo posible el acceso a este espacio. De antemano gracias por tu tiempo y paciencia.
    Juan

    ResponderEliminar
    Respuestas
    1. No necesitas mi autorización Juan, puedes hacerlo con toda la libertad, muchas gracias :)
      Me da gusto que el menú ya haya quedado bien :)
      ¡Buen inicio de semana!

      Eliminar
  30. Aun a riesgo de quedar como un mega novato, ¿donde se pegan todos esto codigos?????

    ResponderEliminar
    Respuestas
    1. Lee con detenimiento la entrada, ahí dice dónde hay que pegarlos :)

      Eliminar
  31. En internet explorer se ve lo azul en blanco y en opera tambien.... ¿Alguna Idea de como reslverlo? SAludos Potro =)

    ResponderEliminar
    Respuestas
    1. En la última versión de Opera yo lo veo sin problema. En la última versión de IE se debería ver, pero sino usas la última versión entonces después de height:37px; agrega esto:

      filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#317FB8,endColorStr=#385D96);"

      Eliminar
    2. Perdón Guillermo, en Opera los gradientes no funcionan, me estaba confundiendo de navegador :P

      Eliminar
  32. Hace mucho tiempo que no hago comentarios aunque entro muchas veces en este blog, me gustaría saber si al submenu se le puede añadir otro submenú me sería de mucha ayuda

    ResponderEliminar
  33. Buenas noches Potro hace tiempo que no te pregunto alguna duda y esta vez me gustaría que me informaras si es posible agregar una subpestaña de una subpestaña.
    Un saludo y gracias

    ResponderEliminar
    Respuestas
    1. Hola conchi, supongo que comentaste con otra cuenta más arriba, ahí he respondido a la misma pregunta :)

      Eliminar
  34. Hola El Potro !! Muchas gracias por tu ayuda, el menú me funcionó muy bien, solo que no me quedó totalmente centrado en el blogger, se quedó un poco hacia la derecha....¿Alguna manera de arreglarlo?
    Me gustaría saber si es posible que dentro de cada nueva pestaña que se crea ella misma pueda tener otras pestañas propias! Un saludo y muchas gracias !!!

    ResponderEliminar
    Respuestas
    1. Hola fran, el menú no tiene opción a más subpestañas, pero puedes centrarlo cambiando esto:
      #top, #top ul {padding: 0;margin: 0;list-style: none;}

      Por esto:
      #top, #top ul {padding: 0;margin: 0;list-style: none;
      margin-left:30px !important;
      }

      Ese 30px sería la distancia desde la izquierda, puedes cambiarlo por otro hasta que quede centrado donde deseas.

      Eliminar
  35. Potro, no se si es cosa mía o no puedo ver más comentarios en este apartado.
    saludo

    ResponderEliminar
    Respuestas
    1. Hola Alicia, el otro comentario que dejaste en esta entrada está más arriba, es el #35, yo los estoy viendo todos sin problema, quizá tengas que eliminar cookies y caché de tu navegador.
      Saludos.

      Eliminar
  36. Hola Buenas! he seguido los pasos para colocar este menú en mi blog...y todo bien, el problema es que el color del menú no se me cambia o no se ve en Google Chrome y en los demás sí...gracias de antemano!

    ResponderEliminar
    Respuestas
    1. ¿En cuál blog lo has puesto?

      Eliminar
    2. Hola buenas Potro, gracias por responder...no había podido mirar. El problema ya lo solucioné, ahora lo que quiero es colocarlo un poquito más a la izquierda y no se cómo...te dejo el blog y le echas un vistazo, gracias. http://sacandoundineritoextraa.blogspot.com.es/

      Eliminar
    3. Aplica un margen negativo en el lado izquierdo:
      #toppic {
      margin-left: -30px !important;
      }

      Eliminar
    4. Muchas gracias me funcionó el margen, sólo que ahora se ve transparente. Leí otros comentarios aquí donde también se les veía transparente y tú decías que agregaran lo siguiente:

      después de height:37px; agrega esto:

      filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#317FB8,endColorStr=#385D96);"

      Lo hice y sigue transparente.

      Eliminar
    5. Nop, no es por eso. Lo que pasa es que cuando agregaste ese código eliminaste la línea que estaba ahí. Debe quedar así toda esa área:
      #toppic{
      margin-left:-40px !important;
      width:850px; /*Ancho del menú*/
      height:37px;
      filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#C5C5C6,endColorStr=#2B5271);
      border-bottom:1px solid #002851;
      background-image: -moz-linear-gradient(top, #C5C5C6,#2B5271);
      background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #C5C5C6), color-stop(1.0, #2B5271));
      border-top:2px solid #666766;
      margin:0 auto;padding:0 auto;
      border-radius: 10px 10px 10px 10px;
      overflow:hidden;
      text-shadow:1px 1px 2px #002851;
      }

      Eliminar
    6. Ahoraaaaaaa síiii, quedó perfecto!! Disculpa las molestias y muchìsimas gracias por enésima vez.

      Eliminar
  37. Hola Potro, es muy bueno este menú, ya lo he puesto en mi blog...pero una pregunta...¿Cómo podría quitar lo que me sobra del menú? Porque se sale del diseño y no queda muy bien...mi plantilla es la mínima.
    Te dejo la direccion para que veas como queda...http://lariberadelanocheplutonica.blogspot.com.es/

    ResponderEliminar
  38. Hey Potro, ya encontré la forma de recortarlo...No te he dado tiempo ni de contestar, jeje. La mayoría del diseño de mi blog lo he hecho siguiendo tus consejos, gracias por aportarnos tantos trucos, haces un magnífico trabajo.
    Un saludo!!

    ResponderEliminar
    Respuestas
    1. Qué gusto que lo hayas resuelto manuel, gracias por avisar. Saludos!

      Eliminar
  39. Hola quisiera saber como poner una columna izquierda en mi blog : http://megustaelterror.blogspot.com.ar/ tan solo tengo una pero a la derecha :S

    ResponderEliminar
    Respuestas
    1. No tengo una entrada sobre ello, pero en la red hay varios tutoriales que enseñan cómo poner otro sidebar en el blog.

      Eliminar
    2. Yo estoy buscando lo mismo Potro tenes un videotutorial o algo así para tener dos columnas ? Desde ya muchas gracias de nuevo .

      Eliminar
    3. No Vero, no tengo alguna entrada sobre ello :(

      Eliminar
  40. Potro ! Se que la pregunta no es de acá pero, en blogger se pueden utilizar cosas PNG ? Por que no me deja. Mira el puntaje era PNG y ahora no :( Como hago?
    http://eternamenteenlassombras.blogspot.com.ar/2012/08/resena-de-firelight-chica-de-fuego.html

    ResponderEliminar
    Respuestas
    1. Claro que se puede, de hecho todas las imágenes que hay aquí son en ese formato. Quizá lo habías puesto mal porque ahora mismo se ve todo bien.

      Eliminar
    2. En serio se ve .PNG? Genial ! Por que a mí me aparece con el fondo feamente en blanco
      Saludos
      Gracias

      Eliminar
    3. Pues yo veo a los lados unos adornos como con puntitos blancos, y el resto negro, no sé si es esa la imagen a la que te refieres.

      Eliminar
    4. Te refieres a abajo en la entrada dónde hay un 4 que es la puntuación? Si es así mejor por que a mi no se me ve así :)

      Eliminar
    5. Ah, ya comprendí. Te refieres a la transparencia, no al formato. Eso es porque la plantilla que usas tiene un color de fondo en las imágenes. Para resolverlo elimina el background que está dentro de .post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
      .BlogList .item-thumbnail img {

      Eliminar
    6. Mmmm dónde busco eso para eliminarlo? Es decir dónde está éste código: .post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
      .BlogList .item-thumbnail img { ?

      Eliminar
    7. En la Edición HTML de la plantilla.

      Eliminar
    8. Wuju ya pude. Tengo otra duda (No me mates) puse el gadget de páginas (el común no este) pero como no hay espacio no aparecen todas las páginas. Como hago? No puedo mover los gadgets :( Mi blog aqui: http://eternamenteenlassombras.blogspot.com.ar/

      Eliminar
    9. Pues según el código fuente de la plantilla sólo tienes 5 páginas y son las 5 que se muestran. Pero si te da mucho problema pon un menú, o un gadget donde tú agregues los enlaces y fin del problema ;)

      Eliminar
  41. Hola Potro, como de costumbre tengo un problema,
    sabes que es lo que tengo que poner en el codigo para que el menu de mi blog pueda tener una pestaña con subpestañas? esque lo intenté pero no aparecen debajo, un lio.
    Gracias de antemano.

    ResponderEliminar
    Respuestas
    1. Este menú no tiene esas opciones, pero puedes usar este:
      http://ciudadblogger.com/2011/04/menu-horizontal-con-subpestanas-hecho.html

      Eliminar
    2. Muchas gracias, he puesto el que me dijiste, en vez de meterlo en un gadget lo meti en el codigo en el mismo lugar donde estaba el otro y borre los estilos del otro menu, ahora tengo que modificar los tamaños y las imagenes para que se adapte perfectamente, muchas gracias XD

      Eliminar
    3. Ya he cambiado las imagenes y editado algunas cosas, ahora el menu ya se adapta perfectamente a mi blog, dime que tal te parece?
      http://www.proyectovhila.com/

      Eliminar
  42. Este comentario ha sido eliminado por un administrador del blog.

    ResponderEliminar
    Respuestas
    1. Si quieres cambiar el color de la fuente debes modificar donde dice /* Color del texto de las pestañas */

      Eliminar
  43. Este comentario ha sido eliminado por un administrador del blog.

    ResponderEliminar
    Respuestas
    1. Hola Guillem, elimina todos estos estilos, sin eso debería dejar de salir esa barra:
      .second-row h2 {
      display: none;
      }
      .second-row a {
      color: #FFFFFF;
      }
      .second-row {
      border-radius: 10px 10px 0 0;
      height: 45px;
      margin: 3px auto 0;
      padding-bottom: 0;
      padding-left: 0;
      padding-right: 0;
      text-transform: none;
      width: 964px;
      }
      .second-row li {
      color: #FFFFFF;
      float: left;
      font: bold 12px Arial;
      margin: 0;
      padding: 27px 7px 14px 10px;
      text-transform: uppercase;
      }
      .second-row ul {
      float: left;
      list-style: none outside none;
      margin-bottom: 0;
      margin-left: 0;
      margin-top: -4px;
      padding: 0;
      width: 969px;
      }

      Pd. Eliminé tu comentario por el aviso que está al final de la página.

      Eliminar
  44. Hola Potro:
    Por que no se ven los espacios azules desde el principio.
    http://franciscoadame.es
    Saludos

    ResponderEliminar
  45. Hola Potro:
    Las pestañas se ven bien en otros navegadores solo el Chrone es donde no se ve.
    Saludos

    ResponderEliminar
    Respuestas
    1. Hola FRANCISCO, no veo este menú en tu blog, supongo que has decidido no ponerlo.
      Saludos.

      Eliminar
  46. Hola: Ya instale la barrade menu, pero cuando quiero ir a las subpestañas se pierden y no hay dar click en las subpestañas:( alguien que me ayude.....????

    ResponderEliminar
  47. Hola potro, me podrías ayudar a alinear este menú, cambié los colores a rojo, aun no me cuadra bien no lo puedo alinear hacia los lados queda un gran espacio al lado izquierdo, y hacía abajo tambien queda un gran espacio vacío con el panel de la radio que tengo integrada... si no es mucha la molestia bro ya solo fataría eso para tener el diseño casi terminado, saludos mi amor <3

    http://rapychelas.blogspot.com (blog de pruebas de diseño)

    ResponderEliminar
    Respuestas
    1. Jajaja :)
      Aplícale un margen izquierdo y cámbiale el ancho, por ejemplo:

      #toppic {
      width: 927px;
      margin-left:-40px !important;

      Eliminar
  48. muchas gracias por tu blog!! estoy iniciandome y me sirve muchisimo. He conseguido hacer en mi blog lo q indicas en esta entrada..pero lo q no consigo es dotar de contenido a las pestañas en si. Soy novata y no sé donde crear el contenido para luego agregar la URL correspondiente.. He de crear una entrada en mi blog y añadir esa url?
    Gracias de antemano
    Espero tu respuesta

    ResponderEliminar
    Respuestas
    1. Hola Belinda, lo habitual es poner las URLs de las etiquetas para que tus entradas estén "agrupadas". En este post se explica mejor de lo que te hablo:
      http://ciudadblogger.com/2010/06/menu-de-categorias.html

      Eliminar
    2. Muchisimas gracias!ahora lo he entendido!!!
      Saludos! y enhorabuena por la pagina..me sirve de mucha ayuda

      Eliminar
  49. Creo que hasta yo que no se nada de nada de esto voy a poder hacerlo, gracias por la explicación! Y luego te comento cómo me fue.

    ResponderEliminar
  50. Hola que tal tengo un problema el menu me sale en modo numeración en vertical y sin submenus ni nada cual puede ser el problema. gracias de antemano

    ResponderEliminar
    Respuestas
    1. Puede ser que hayas puesto mal el código CSS:
      http://ciudadblogger.com/2011/07/errores-comunes-al-poner-los-codigos.html

      Eliminar
  51. yapues potro porfavor responde mi comentario D:

    ResponderEliminar
    Respuestas
    1. Ahí está wn, es que son casi 300 comentarios por responder :s

      Eliminar
  52. buenas amigo quisiera saber como puedo hacer que mi menú se corra hacia la derecha presionando una flecha como este http://www.nick.com/ ya tengo el menú hecho con imágenes y todo pero quisiera saber eso como hacer para que se corra hacia la derecha precionando la felcha te lo agrade seria mucho =)

    ResponderEliminar
    Respuestas
    1. Hola Nicklatino, hay dos carruseles que he publicado que quizá te puedan servir:
      http://ciudadblogger.com/2011/10/carrusel-de-imagenes-con-scriptaculous.html
      http://ciudadblogger.com/2010/02/carrusel-de-imagenes-con-jquery-y.html

      Eliminar
  53. Potro sigo sin encontrar la solución, podrías mirarme el código por si encuentras el fallo. Este es mi blog malagadechampions.blogspot.com.es gracias de antemano

    ResponderEliminar
  54. Es que si lo introduzco desaparece el menu y en su lugar aparece una cosa asi:

    - Inicio
    - Prensa deportiva
    - La pizarra de asensi
    - Galeria
    -

    ResponderEliminar
    Respuestas
    1. Entonces el problema sí es el que te mencionaba inicialmente, seguramente al ponerlo estás eliminando una llave de cierre }
      Mira el enlace que te puse antes.

      Eliminar
  55. Este comentario ha sido eliminado por un administrador del blog.

    ResponderEliminar
    Respuestas
    1. ¿No será la versión de tu navegador? Yo en ambos lo veo igual.

      Eliminar
  56. Hola,
    muchas gracias por crear este blog, me sirvió mucho este tutorial para armar el menú de mi web.
    El único problema que tengo, es con el tamaño que no coincide con el de la pagina. Algunos valores los modifique y quedo bien pero no encuentro cual es el que tengo que revisar para modificar el error, la web es: http://www.acercadelseguro.com.ar/

    Me podrás orientar??

    Saludos!

    ResponderEliminar
    Respuestas
    1. Gracias por tu comentario. Aplícale un margen izquierdo negativo, por ejemplo:
      #toppic {
      margin-left: -30px !important;
      }

      Eliminar
    2. excelente! menos 30 clavado y quedo como tenia que ser.
      Una cosa menos por mejorar jaja

      saludos

      Eliminar
  57. Hola
    Que tal me duda es como puedo hacer para que mi menu tambien le aparezca la linea dorado al margen derecho y izquiero como a todo el menu.
    Este es mi blog http://flagelacionyamargura.blogspot.com.es/.
    Muchas gracias y espero tu respuesta

    ResponderEliminar
    Respuestas
    1. Hola, agrega los siguiente estilos:
      #top {
      border-left: 1px solid goldenrod;
      }

      Saludos.

      Eliminar
  58. Primero, gracias por crear este blog y ayudar a tanta gente.

    Segundo, como puedo cambiar el color del fondo del menú, el que aparece nada mas abrir el blog, sin poner el cursor por encima ni nada.

    Es que me sale del mismo color que el fondo del blog.

    Gracias de antemano.

    ResponderEliminar
  59. Siento ser tan pesado pero lo único que veo es lo siguiente:

    color:#eee; /* Color del texto de las pestañas */
    background:#2f558b; /* Color de las pestañas al pasar el cursor */
    color:#c5fa6f; /* Color del texto de las pestañas al pasar el cursor */
    #top li ul, #top ul li {width:300px;} /* Ancho del contenedor de las subpestañas */
    background-color:#1a3352; /* Color de fondo del contenedor de las subpestañas */
    width:150px; /* Ancho de cada subpestaña */
    color:#ddd; /* Color del texto de los submenús */


    Y no encuentro lo que sería :
    "Color de las pestañas "

    Disculpa las molestias.

    ResponderEliminar
    Respuestas
    1. Esta es la parte que lo menciona, recuerda que son colores gradientes:
      "El color de fondo está hecho con gradientes CSS, #317FB8 es el color más claro y #385D96 el color más oscuro."

      Eliminar
  60. Hola! Gracias por tu ayuda! Es la 1ra vez que comento pero me has ayudado mucho! Me puedes ayudar con un problema? Hice todo como explicaste en la entrada! Pero las subpestañas se abren por muy poco tiempo y no da oportunidad de escoger una opcion! Si pudieras explicarme algun error que tuve o algo k me faltara te lo agradeceria mucho! Mi blog es "AnimexGG"

    PD: Grax de nuevo por toda tu ayuda!! :D

    ResponderEliminar
    Respuestas
    1. Hola AnimexGG Hollow, para solucionarlo agrega debajo de #top li ul { esto:
      margin-top: -3px;

      ¡Saludos!

      Eliminar
  61. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  62. perdon por tantos comentarios pero ya lo logre solucionar, pasate por mi blog potro :P http://www.tfmprofessional.com

    ResponderEliminar
  63. Hola como estas?
    Hace 3 días que descubrí tu pagina, Muchas Gracias!!, me ha servido bastante he modificado algunas cosas.

    Sobre el menú lo implemente todo muy bien, en vez de poner el código en la parte de diseño - html, lo puse directamente en el código, ya que tenía un menú y lo cambie por el tuyo, le agregue otra columna, solo tuve dos problemitas, por si acaso alguien les pasa lo mismo. El color de fondo de mi blog es diferente al del menú, en #toppic agregue background:#333; overflow:hidden; = tuve problemas con este código porque me ponía una linea blanca arriba del menú, lo cambie por none. Ahora todo se ve excelente! ese menú lo andaba buscando hace varios meses, porque me gusta como lo tiene yahoo respuestas. Por si quieres pasar por mi blog para ver como quedó es http://www.aprenderbillar.net

    ResponderEliminar
    Respuestas
    1. Bienvenido a Ciudad Blogger Xavier. A decir verdad te ha quedado bastante bien el menú, enhorabuena :)

      Eliminar
  64. Hola es posible hacer este mismo menu en vertical?

    ResponderEliminar
  65. Potro, tengo un problema: Voy a Edición Html pongo lo que hay k poner ahí, luego voy a un gadget en html, pongo lo k hay que poner luego ahí. Y cuando lo guardo en vez de salirme el menu con el estilo que has puesto m sale con el estilo predeterminado que te viene cuando haces el blog, gracias de antemano. :)

    ResponderEliminar
  66. Hola Potro,
    he hecho lo que indicas para plantillas diseñadas por blogger, y hasta ahí todo bien pero al añadir, un código que a continuación pondré, me aparece al inicio de la entrada y no me sale el menú. No se que puedo estar haciendo mal. Gracias de antemano!
    ** El código es este:
    /* Menú horizontal con subpestañas en dos columnas
    ----------------------------------------------- */
    #toppic {
    width:940px; /* Ancho del menú */
    height:37px;
    background-image: -moz-linear-gradient(top, #317FB8, #385D96);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #317FB8), color-stop(1.0, #385D96));
    filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#317FB8,endColorStr=#385D96);
    border-bottom:1px solid #002851;
    border-top:1px solid #2f558b;
    margin:0 auto;padding:0 auto;
    overflow:hidden;
    text-shadow:1px 1px 2px #002851;
    }
    #topwrapper {
    width:940px; /* Ancho del menú */
    height:40px;
    margin:0 auto;
    padding:0 auto;
    }
    .clearit {clear: both;height: 0;line-height: 0.0;font-size: 0;}
    #top {width:100%;}
    #top, #top ul {padding: 0;margin: 0;list-style: none;}
    #top a {
    border-right:1px solid #2f558b;
    text-align:left;
    display: block;
    text-decoration: none;
    padding:10px 12px 11px;
    font:bold 14px Arial;
    text-transform:none;
    color:#eee; /* Color del texto de las pestañas */
    }
    #top a:hover {
    background:#2f558b; /* Color de las pestañas al pasar el cursor */
    color:#c5fa6f; /* Color del texto de las pestañas al pasar el cursor */
    }
    #top a.trigger {
    /* Flecha */
    background-image: url(http://3.bp.blogspot.com/-LzmPTNyR6po/TwETZufjSTI/AAAAAAAAATo/oisHmXUjmSY/s1600/arrow_white.gif);
    background-repeat: no-repeat;
    padding: 10px 24px 11px 12px;
    background-position: right center;
    }
    #top li {float: left;position: relative;}
    #top li {position: static !important; width: auto;}
    #top li ul, #top ul li {width:300px;} /* Ancho del contenedor de las subpestañas */
    #top ul li a {
    text-align:left;
    padding: 6px 15px;
    font-size:13px;
    font-weight:normal;
    text-transform:none;
    font-family:Arial, sans-serif;
    border:none;
    }
    #top li ul {
    z-index:100;
    position: absolute;
    display: none;
    background-color:#1a3352; /* Color de fondo del contenedor de las subpestañas */
    margin-left:-80px;
    padding:10px 0;
    border-radius: 0px 0px 6px 6px;
    box-shadow:0 2px 2px rgba(0,0,0,0.6);
    filter:alpha(opacity=87);
    opacity:.87;
    }
    #top li ul li {
    width:150px; /* Ancho de cada subpestaña */
    float:left;
    margin:0;
    padding:0;
    }
    #top li:hover ul, #top li.hvr ul {display: block;}
    #top li:hover ul a, #top li.hvr ul a {
    color:#ddd; /* Color del texto de los submenús */
    background-color:transparent;
    text-decoration:none;
    }
    #top ul a:hover {
    text-decoration:underline!important;
    color:#c5fa6f !important; /* Color del texto de los submenús al pasar el cursor */
    }

    ResponderEliminar
    Respuestas
    1. Hola Srta. Cris, el código debe ir antes de ]]></b:skin> no antes de <b:skin><![CDATA[
      Son códigos parecidos, pero no son iguales.

      Eliminar
    2. Vale, mil gracias! voy a probar ahora a ver que tal!

      Eliminar
  67. Hola,
    Sabes como hacer este menú en vertical. Sería similar al de esta página: www.redcoon.es

    Si pudieras ayudarme con esto, al menos una luz de como hacerlo.

    Gracias.

    ResponderEliminar
    Respuestas
    1. No lo sé JustMe, sólo lo he probado como está en la entrada.

      Eliminar
    2. De igual forma gracias por responder.

      Saludos

      Eliminar
  68. Buenas. Amigo Potro Ami Me Salio muy todo Pero El Menu Esta Para Otro lado osea esta mas para la derecha y no esta centrada y no logro centrarla

    http://trabajandonomoleste.blogspot.com/ observa para que veas

    ResponderEliminar

  69. Buenas Amigo Potro. En esta ocacion me salio todo bien pero el menu me salioo muy a la derechera y yo quiero que este centrado con la cabecera entra vea que esta mal me ayudaria porvafor http://trabajandonomoleste.blogspot.com/

    ResponderEliminar
    Respuestas
    1. Hola, cambia el valor del margin de #toppic por 0 -30px auto;
      Y el width ponlo en 870px;

      Eliminar
  70. todo chvr....un execelente blog....lo puse en mi blog...pero me sale asi.... no me aparecen las subpertañas...estan al fondo de la plantilla del blog...chekealo porfa...http://infoeconomiaynegocios.blogspot.com/

    ResponderEliminar
    Respuestas
    1. Hola manolo, justo debajo del ejemplo que está en la entrada hay un aviso que parece que has pasado por alto ;)

      Eliminar
  71. Hola me super encantó este menú,lo que me gustaría saber es si puedo ponerle una subpestaña a la subpestaña...
    Muchas gracias por todos tus tutoriales

    n_n

    ResponderEliminar
  72. No pasa nada Potro muchas gracias por contestar

    :D

    ResponderEliminar
  73. Cada dia Aprendo muchas cosas nuevas en blogger gracias

    ResponderEliminar
  74. Hola de nuevo santo potro que nos ayudas, en fin mira tengo un detallito con lo del menú fijate que me apareció otro y no lo puedo eliminar, no me deja seleccionarlo y darle eliminar. ¿Cómo puedo eliminarlo desde edición html? Espero una última ayudita. jejeje te dejo una captura.

    http://img534.imageshack.us/img534/1984/2mens.png

    ResponderEliminar
    Respuestas
    1. Hola Marcos, ese es un gadget de Páginas, desde la sección Diseño podrás verlo, ahí te debería dar la opción de eliminarlo.

      Eliminar
    2. Si potro aparece como un gadget, pero en la sección de Diseño no me deja eliminarlo, no me deja ni siquiera seleccionarlo y moverlo. Será que desde html se pueda eliminar.

      Eliminar
    3. Probablemente sí, SIN expandir artiluios busca una línea como esta y elimínala:
      <b:widget id='PageList1' locked='true' title='Páginas' type='PageList'/>

      No olvides antes de guardar los cambios usar la Vista Previa para cerciorarte que has eliminado el gadget que deseas y no otro.

      Eliminar
  75. Hola, me encanta este menu pero tengo un pequeño problema. Cuando pincho un menu , me aparece el submenu pero este último desaparece antes de que tenga tiempo de pinchar la opción que quiero

    http://rinconesconencantofrancia.blogspot.com.es/

    Gracias de antemano por la ayuuda. Genial tu web!

    ResponderEliminar
    Respuestas
    1. Hola Andre, debajo de #top li ul { agrega:
      margin-top: -2px;

      Eliminar
    2. muchas gracias, ya funciona.

      muy buenos todos tus tutoriales

      Eliminar
  76. Hola Potro, me han recomendado tu página y la verdad que está muy bien. Pero maaadre, soy una inutil. He hecho lo primero que dijiste, lo de "como usar cualquier menu en plantillas..." pero me salía todo a la izquierda y no horizontal.
    Al final no he hecho eso y lo he intentado con las indicaciones que has puesto aquí,pero no me sale bien, no se me despliega me sale todo seguido. Te paso el link de mi blog para que veas la maravilla que me ha quedado :-S

    http://gatashirka.blogspot.com.es/

    ¿Qué he hecho mal?

    Muchas gracias!

    ResponderEliminar
    Respuestas
    1. Hola Gata Shirka, muchas gracias por tu comentario, lo que ha pasado es que cuando has puesto el primer código has eliminado una llave de cierre } eso ha hecho que no se muestre y vea como debería:
      http://ciudadblogger.com/2011/07/errores-comunes-al-poner-los-codigos.html

      Eliminar
  77. Hola que tal, mi problema es que mi submenu funciona bien tanto para mozilla como para chrome, pero con internet explorer no me funciona, el problema es que no me deja seleccionar nada del submenu.He probado la solucion que diste hace poco pero no me funciona, haber si me puedes ayudar gracias.

    ResponderEliminar
    Respuestas
    1. No sé cómo ayudarte FlagelacionyAmargura, no tengo ese navegador así que no sabría cómo ver tu blog e inspeccinoarlo :(

      Eliminar
  78. Hola, El Potro. Te consulto porque no me aparece la lista desplegable sino, en lugar de eso, me aparece en líneas (pestaña 1 y 2 en un renglón, 3 en otro, las subpestañas 3.1, 3.2... en la que sigue, etc.). Incluso seguí los pasos que propone tu otro post del aviso: "Cómo usar cualquier menú en las plantillas del Diseñador de Plantillas de Blogger" y, en este otro caso, el menú aparece sin formato, en forma de ítems (mucho peor aún)

    En qué me estoy equivocando? Cómo quito los formatos?

    Una cosa más: probé de muchas formas posibles (omitiendo algún paso de este o del otro post citado) y encuentro que omitiendo agregar los estilos CSS no ocurre ningún cambio. No sé si con esto te estoy ayudando en algo.

    Gracias por tu paciencia. Muy bueno lo que haces con este sitio. Gracias.

    ResponderEliminar
    Respuestas
    1. Hola Nelson, por lo que mencionas parece que has eliminado una llave de cierre } al poner los estilos del menú:
      http://ciudadblogger.com/2011/07/errores-comunes-al-poner-los-codigos.html

      Eliminar
  79. Hola potro!!!!

    Sabes que hoy en dia los bloggers tienen la disposicion de pestañas debajo de la cabecera en su formato de "paginas en blanco" ..mi pregunta es...podrias hacerle unas subpestañas a ellas??pq se me estan acumulando muchas debajo de la cabecera y me gustaria unir algunas y dandole el click del raton que se abrieran dos o mas subpestañas a ese apartado en concreto.

    Espero tu respuesta.Muchas gracias!!!

    Este es mi blog pa' q veas lo q te digo

    http://masromance.blogspot.com.es/

    Un saludito y feliz puente!!!!!

    ResponderEliminar
    Respuestas
    1. Hola Marilì, no es posible, en esos casos conviene quitar el gadget de páginas y usar un menú como este o cualquier otro, y en el menú que elijas enlazar tus páginas.
      Saludos!

      Eliminar
  80. Hola que tal Potro, mi duda es como puedo ser para que el fondo de mi submenu no se vea trasparente y no se vea lo que hay por detrás.

    ResponderEliminar
    Respuestas
    1. Hola, elimina esta parte para quitarle la opacidad:
      filter:alpha(opacity=87);
      opacity:.87;

      Eliminar
  81. buenas noches Potro, creo ya no esta este archivo
    http://dl.dropbox.com/u/647003/CiudadBlogger/Scripts/jqueryslidemenu.css
    lo tendras en otra dirección? ya no funciona mi menu, saludos

    ResponderEliminar
    Respuestas
    1. Buen día ShurKonrad, hay una versión de ese menú que ya no requiere esos archivos:
      http://ciudadblogger.com/2011/12/menu-horizontal-con-efecto-deslizante.html

      Eliminar

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.

Nota: solo los miembros de este blog pueden publicar comentarios.

 
Ir Arriba Ir Abajo
I Ciudad Blogger