Menú horizontal tipo listón hecho con CSS3

26 de febrero de 2012 277 comentarios ,

Este es un menú tipo horizontal listón que está hecho con CSS3 por completo, nada de imágenes, y da el aspecto de que estuviera envolviendo el blog. Queda bien en blogs que tienen los bordes del contendor definidos, y/o que tienen un color de fondo distinto al contenedor principal.

Un ejemplo de este menú puedes verlo a continuación.


Para poner este menú tipo listón en tu blog, entra a la Edición HTML de tu plantilla, y antes de
]]></b:skin> pega los estilos:
/* Menú Listón
----------------------------------------------- */
#menuListon:after, #menuListon:before {
content: '';
position: absolute;
}

#menuListon {
height:25px; /* Alto del menú */
text-align: center;
position: relative;
margin: 0 -30px 5px -30px;
padding: 10px 0;
background: #e5592e; /* Color del listón */
background-image: -moz-linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0));
background-image: -webkit-linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0));
background-image: -o-linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0));
background-image: -ms-linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0));
background-image: linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0));
box-shadow: 0 2px 0 #bbb;
}

#menuListon:before, #menuListon:after {
border-style: solid;
border-color: transparent;
bottom: -10px;
}

#menuListon:before {
border-width: 0 20px 10px 0;
border-right-color: #8C3115; /* Color de la sombra del doblez */
left: 0;
}

#menuListon:after {
border-width: 0 0 10px 20px;
border-left-color: #8C3115; /* Color de la sombra del doblez */
right: 0;
}

#menuListon ul {
margin-top: 0px;
}

#menuListon li {
list-style: none;
display: inline;
padding-right:20px;
}

#menuListon li a {
text-shadow: 0 2px 1px rgba(0,0,0,0.5);
display: inline;
text-decoration: none;
color: #f0f0f0; /* Color del texto */
font-size: 18px; /* Tamaño del texto */
transition:all .1s linear;
-o-transition:all .1s linear;
-moz-transition:all .1s linear;
-webkit-transition:all .1s linear;
}

#menuListon li a:hover {
font-size:20px; /* Tamaño del texto al pasar el cursor */
transition:all .1s linear;
-o-transition:all .1s linear;
-moz-transition:all .1s linear;
-webkit-transition:all .1s linear;
}

Luego, SIN expandir los artilugios busca este código:
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Nombre de mi blog (cabecera)' type='Header'/>
</b:section>
Debajo de él pega el HTML del menú:
<div id='menuListon'>
<ul>
  <li><a href='URL del enlace'> &#10029; Pestaña 1</a></li>
  <li><a href='URL del enlace'> &#10029; Pestaña 2</a></li>
  <li><a href='URL del enlace'> &#10029; Pestaña 3</a></li>
  <li><a href='URL del enlace'> &#10029; Pestaña 4</a></li>
  </ul>
</div>
Ahí agrega las URLs de tus enlaces y el nombre de tus pestañas. Lo que está en negrita son los caracteres de estrellas, los puedes eliminar si lo deseas.

En el primer código, verás en color verde algunas áreas que se pueden personalizar, tales como el color de fondo, del texto, etc.
Si el listón quedara muy abierto entonces modifica los dos -30px que están en la parte azul, con un valor más cercano a cero se hará más reducida la abertura del listón.

El menú estará debajo de la cabecera, si deseas que esté arriba, entonces el código del segundo paso, en lugar de pegarlo debajo de ese código, pégalo arriba de él.

No está de más decir que como usa CSS3 sólo se verá bien en navegadores modernos, así que navegadores con versiones antiguas abstenerse.
Como puedes ver, es un menú sencillo pero muy estético, y además hecho sólo con CSS.



277 comentarios en:

" Menú horizontal tipo listón hecho con CSS3 "

  1. Respuestas
    1. Apenas ahora me enteré qué significa yeyo, le pondré su veladora a San Google por sacarme siempre de las dudas, jeje.

      Eliminar
  2. Hola Potro!
    Llevo unas cuantas semanas siguiendo tus consejos para cambiar la apariencia de mi blog. Busqué muchos sitios y el tuyo es el que más claro me lo deja siempre. GTe agradezco mucho tu tiempo y dedicación.

    Por si quieres ver cómo quedó mi blog:
    http://cartasamifuturoyo.blogspot.com/

    Un saludo!

    ResponderEliminar
    Respuestas
    1. Muchas gracias mi yo del pasado, ojalá sigas encontrando útiles y entendibles estas publicaciones.
      Buen inicio de semana.

      Eliminar
  3. hola potro como puedo subscribirme a las entradas de los menu es para asi saber cuando postearas akel menu que te comente ace unos dias

    ResponderEliminar
    Respuestas
    1. Hola JAH, puedes suscribirte a todas las entradas aquí, o si quieres suscribirte sólo a las entradas del menú puedes hacerlo desde aquí. Saludos.

      Eliminar
  4. Hola, Potro. Me gustaría centrar la cabecera de mi blog (es una imagen). ¿Serías tan amable de indicarme cómo tengo que hacerlo?

    ResponderEliminar
    Respuestas
    1. Hola Tu modista a domicilio. Para centrar la imagen de la cabecera agrega antes de ]]></b:skin> esto:

      #header img {margin:0 auto;}

      Eliminar
    2. Muchas gracias, ha quedado perfecta.

      Eliminar
  5. HOLA POTRO TENGO UNA EMERGENCIA URGENTE :( AGREGE UN GADGET NUEVO PARA PONER UN SLIDER PERO EL GAGGET SE DESAPARECIO Y SE PUSO DEBAJO DE LAS ENTRADAS DEL BLOG Y NO LO PUEDO ELIMINAR POR FAVOR AYUDAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA http://parteatra1.blogspot.com/ ODSERVA

    ResponderEliminar
    Respuestas
    1. Entré a tu blog pero no vi ningún slider abajo de las entradas. Aun así, desde la sección de Diseño puedes eliminar el gadget (si lo pusiste en un HTML/Javascript), o sino, directo desde la sección de Edición de HTML.

      Eliminar
    2. lo puse en HTML/Javascript si te fijas Bienn en la barra de menuu ariba se veh el slider :( plz observalo estoy parado solo por eso e borrado todas las entrada solo por eso

      Eliminar
    3. no tiene imagenes el slider .... y el gadget se me esconde no lo puedo ver ..

      Eliminar
    4. ¿Pero ya intentaste eliminarlo como te dije?

      Eliminar
  6. Ummmm ahora si te fajaste hermano...este menú es una lindura es super profesional........GRACIAS.. :D

    ResponderEliminar
  7. Excelente Potro! mil gracias, y eso si este menu es muy customizable, infinitas maneras de mejorarlo, Gracias Bro!

    ResponderEliminar
    Respuestas
    1. Por supuesto, es la ventaja de que esté hecho sólo con CSS, puede modificarse "al gusto del cliente" ;)

      Eliminar
  8. Gracias ;)) Llevo, dias sin Salir de Tu Page ;)) y esto, es lo que eh Logrado http://farmvillealextremo.blogspot.com/ Que Opinas?

    ResponderEliminar
  9. Está muy bueno (*-*)/ Como siempre haces un buen trabajo compartiéndonos información de manera "entendible hasta para principiantes como yo" xD

    solo una pregunta... ¿Es posible colocar el segundo código directamente en un gadget HTML en el crosscol? porque este código me deforma la vista en el Diseño del blog :/

    ResponderEliminar
    Respuestas
    1. Por supuesto, también puedes ponerlo en un gadget, aunque es posible que dentro del gadget no ocupe todo el ancho que debería tener. Yo no me preocuparía por la pestaña de Diseño, total eso sólo lo ve el administrador :)

      Eliminar
    2. Hola, yo lo puse en un gadget HTML, conseguí ponerle el tamaño adecuado, pero ahora me sale un punto (como una viñeta) antes de cada pestaña, ¿sabrías a que se debe?

      La barrita queda bien, pero se ve algo sosa, intenté que tuviera alguna otra forma, o ponerle la misma imagen del fondo del blog (lo intenté con trasparente, pero se queda blanco debido al bloque que tengo en medio), pero ni idea de como.

      Gracias ^^

      Eliminar
    3. No veo que tengas puesto este menú en tu blog :/

      Eliminar
  10. Respuestas
    1. veo que volviste a agregar el "¿Te gusta Ciudad Blogger?" :-) Yo Gracias a ti también lo tengo y me quedó muy bien. Saludos!

      Eliminar
    2. Lo quité porque me daba problema con los comentarios anidados, pero después que Blogger cambió el script pude ponerlo otra vez :D

      Eliminar
  11. HEy potro esta realmente bueno este menu se podra hacer despegable para ver si le cambio el mio a mi pagina hermano?

    ResponderEliminar
    Respuestas
    1. Tal vez, pero yo por ahora ya no le haré nada más, si alguien quiere personalizarlo un poco más será opcional.

      Eliminar
  12. lindo
    algun dia podes poner un codigo que te permite poner un javascript como imagen te cabecera

    ResponderEliminar
    Respuestas
    1. No entendí, ¿qué tipo de javascript para la cabecera? o.O

      Eliminar
    2. Seguro quiere una imagen de cabecera, para que cuando uno comparte su blog (redes sociales= facebook) salga automaticamante la imagen de la cabecera, algo que también me gustaría hacer, siempre que comparto mi blog no sale la imagen de cabecera del blog, sino otras que pongo en mis post, Potro si sabes como hacer que cuando comparta mi blog http://elojoderojas.blogspot.com solo salga la imagen de cabecera, me ayudaría mucha

      Eliminar
    3. Puedes poner un metatag que muestre una imagen predeterminada cada vez que se comparta en Facebook. Eso lo consigues poniendo debajo de <head> esto:

      <meta content='URL de la imagen' property='og:image'/>

      Eliminar
  13. Potro...

    Se puede poner en las pestañas unas subpestañas?

    Es posible? Como?

    Saludos!

    ResponderEliminar
    Respuestas
    1. Seguramente sí ricardogot2010, pero como mencionaba más arriba, será cuestión de cada quien el tipo de personalización que le quieran hacer. Saludos.

      Eliminar
  14. Muy guapo, el pex es que tengo una version vieja en IE y no se vé igual... IE ya debería jubilarse... brother ya tengo lo de los PopularPosts, cuando gustes conversamos, un abrazo!

    ResponderEliminar
    Respuestas
    1. ¡Jubílalo! jajaja :)
      A ver si mañana que tenga un chance platicamos para que me presumas tu invento :)

      Eliminar
  15. Hola Potro!!!
    Escribo para consultarte, si es que soy el unico o no, al que Blogger le esta funcionando algo muy lento.
    No me deja ver el diseñador de plantillas ni me deja ver algunos graficos de estadisticas y menos agregar blogs a una lista porque queda "en espera".
    Tienes alguna noticia sobre eso? O que podria ser?
    Desde ya gracias y un fuerte abrazo como siempre

    ResponderEliminar
    Respuestas
    1. Sí está fallando, el gadget de estadísticas lleva varias semanas sin funcionar para muchos, también hay usuarios que han reportado que no se pueden agregar más enlaces a la lista de enlaces. Ambos problemas se han reportado en el foro de ayuda pero hasta ahora ningún empleado ha dicho que lo estén reparando, o a qué se deba... para variar.

      Eliminar
  16. hola potro una pregunta como hago para poner un icono a cada enlace del menu, ejemplo un icono de una casa al de inicio, otro al de contacto que quede el icono ubicado como las estrellitas que tienen este menu..! saludos..!

    ResponderEliminar
    Respuestas
    1. Hola Neomontoya, sólo quita el código de la estrella y en su lugar pon el código de la imagen que quieres. Saludos.

      Eliminar
    2. Y ese código donde se encuentra ?

      Eliminar
  17. Potro, agregue donde tu lo dijiste,pero quedaba oculto por la cabecera entonces lo puse debajo de </header>
    quedo bastante bien, estoy conforme pero no queda así tipo listón, sino como una franja naranja con los enlaces, osea no tiene esas aberturas que tiene en cada punta. Este es el blog, para que lo revises: http://desarrollov85.blogspot.com/
    esta en desarrollo, tiene sus imperfecciones.

    Por Favor Revisalo

    ResponderEliminar
    Respuestas
    1. Es por el tipo de plantilla que usas, probablemente pueda verse mejor arriba del DIV llamado 'wrapper', pero como te digo, por el tipo de plantilla no creo que quede muy bien.

      Eliminar
  18. EXCELENTE!!}
    El tamaño del LISTON en forma horizontal se puede modificar?
    El tipo de letra se puede cambiar?

    Muchas GRACIAS

    ResponderEliminar
    Respuestas
    1. El tamaño se ajusta al contenedor, aun así se puede modificar ese aspecto como se menciona en la entrada. Saludos.

      Eliminar
  19. Hola Potro, tengo un problema y espero que me puedas ayudar :) Necesito cambiar el boton de Leer mas de mi web por una imagen, osea reemplazarlo. Si me lo puedes explicar o hacer un post con esto aca te dejo mi plantilla: https://docs.google.com/open?id=0B_PhIYphvTNTaXNKV1pEbHlUVUdlem10RUVlSWdQZw para bajarla hay que apretar Ctrl+S y explicarme como hago para reemplazarlo por esta imagen: http://k15.kn3.net/BCFB11886.png Muchas Gracias! tu ayuda cuanto más pronta sea mejor. Saludos ! :D

    ResponderEliminar
    Respuestas
    1. Hola emmaremix, no hace falta que envíes la plantilla. Sólo expande los artilugios, busca el texto Leer más y cámbialo por el código de la imagen que deseas.
      Saludos.

      Eliminar
  20. Muy bueno Potro, muchas gracias.
    Va siendo hora de plantearse el cambiar algunas cosillas del blog nuevamente y las ideas vienen de lujo !

    ResponderEliminar
    Respuestas
    1. A guardarlo a los marcadores entonces por si después te animas a ponerlo ;)

      Eliminar
  21. Saludos Potro quisiera que expusieras en este blog con tu estilo ameno y comprensible a todos la implementación en bloguer de "Comentarios anidados sin el nuevo código" que aparece en los blog de Vagabundia y BX-Niconico. Como ellos lo explican e tratado de implementarlo y me sale un error de XML que no me permite guardar los cambios. Como es lógico algo no he entendido bien o copiado mal, un saludo y el agradecimiento anticipado a tu valioso trabajo.

    ResponderEliminar
    Respuestas
    1. Aún no he probado ese método guillemaro, tendrías que preguntarles a ellos, estoy seguro que responderán a tu duda. Saludos.

      Eliminar
  22. hola potro me ha gustado mucho este menu, pero debo ser la unica a la que el liston no se ve solo se ven los enlaces de las pestañas y no se que hecho mal le he dado un monton de vueltas y no lo veo, puedes verlo aqui
    http://zerezas-otrasformasdecocinar.blogspot.com/
    gracias

    ResponderEliminar
    Respuestas
    1. Hola zerezas, no he visto puesto el menú, pero sí me he fijado que tienes unos errores en los estilos. Esta parte:
      .column-right-outer .widget, .column-left-outer .widget {
      border-bottom:4px solid#437AD1 ;
      #ID {
      margin-top: -20%px;
      }
      padding-bottom:15px;


      Cámbiala por esta:
      .column-right-outer .widget, .column-left-outer .widget {
      border-bottom:4px solid#437AD1;
      padding-bottom:15px;
      }
      #ID {
      margin-top: -20%px;
      }


      Saludos.

      Eliminar
  23. Lo mismo me pasa ami no veo el liston solo veo los enlaces a que se deve esto =?...otra pregunta como peudo poner en un gadget para que aparesca noticias de una sola etiqueta...

    ResponderEliminar
  24. david pon aqui un enlace a tu blog para quese vea porque
    si potro no lo ve no te podra solucionar el problema

    ResponderEliminar
  25. ¿Se le puede quitar la sombra al texto?

    ResponderEliminar
    Respuestas
    1. Claro, elimina esta parte:
      text-shadow: 0 2px 1px rgba(0,0,0,0.5);

      Eliminar
  26. Este es mi blogger de para hacer todas esta cosas i sale de la misma manera que en el blogger de zerezas http://pruevasssssss.blogspot.com/

    ResponderEliminar
    Respuestas
    1. Te sucede lo mismo que a zerezas, al poner el primer código eliminaste una llave de cierre:
      http://ciudadblogger.com/2011/07/errores-comunes-al-poner-los-codigos.html

      Eliminar
  27. POTRO ESTO TE LO PEDI YOOOOO MUCHAS GRACIAS AHORA NO PUEDO PERO EN CUANTO PUEDA LO INSTALO GRACIAS

    -Da algun tipo de problema el css que se usa?

    ResponderEliminar
    Respuestas
    1. Tarde pero seguro ;)
      Problema... no debería, excepto en IE que no lee este tipo de estilos.

      Eliminar
  28. Casi todo OKEY POTRO:

    Unas inquietudes...

    Quería agregar una pequeña imagen para que reemplace la estrellita dentro del LISTON, pero el menu se me movio?.....Habra que agregarle otro codigo para que no se mueva?

    Cambie la imagen flotante de FACEBOOK, pero se me ha separado de la esquina (barra de scroll)....Como haria para juntarlo a la barra de desplazamiento?

    Y por ultimo:
    El Fondo de color de la Caja de FEEDBURNER, me ha quedado transparente...Y no se como cambiarlo de color.

    Muchas GRACIAS....Gracias a tus codigos, le he dado vida a mi BLOG...EXCELENTISIMO E STU BLOG

    MI BLOG: http://frogelio-leader.blogspot.com

    ResponderEliminar
    Respuestas
    1. Hola FROGELIO, de agregas una imagen en cada enlace debes procurar que ésta sea pequeña para que no interfiera ni con el alto ni con el espacio a lo ancho del menú.

      Las imágenes flotantes tienen una parte en los estilos, en tu caso una que dice top y otra que dice right. Top es la distancia desde arriba y right la distancia desde la derecha, cambiando esos valores la puedes mover de lugar.

      Lo de Feedburner no lo he visto, si me indicas donde está te lo agradeceré porque me pierdo entre las imágenes :)

      Saludos.

      Eliminar
    2. GRACIAS POTRO:
      Tuve que colocarle a right:-30 px, para que se aproxime la imagen a la barra.

      INQUIETUD:
      Y por ultimo SUSCRIBIRSE via FEEDBURNER, ya lo coloque casi al principio de la columna izquierda de mi BLOG para que lo veas..Se ve transparente la caja del gadget, que apenas lo hace notar...Ojala se puede CAMBIAR el fondo del color
      http://frogelio-leader.blogspot.com

      MIL GRACIAS.....

      Marketing gratuito para tu GENIAL BLOG....

      Eliminar
    3. Esa pregunta déjala en la entrada que corresponde, para no desviarnos del tema de este post, y para darle el seguimiento en el lugar indicado.

      Saludos.

      Eliminar
  29. Gracias potro era verda habia eliminado una llave de cierre al poner el primer codigo xD gracias potro :3 .... Otra pregunta Hay al codigo para poner enñaces en im gadget solo de una etiqueta especifica porfa potro si lo hay podrias pasarmelo te lo agradeceria mucho :3

    ResponderEliminar
    Respuestas
    1. Sólo pon la URL de la etiqueta que quieres poner en el menú:
      http://ciudadblogger.com/2010/06/menu-de-categorias.html

      Eliminar
  30. holaaaaa, ya estoy de vuelta efectivamente era por ese código erróneo y lo tenia a la vista, en cuanto al menú, yo tenia la cabecera divida con un entrada tuya y la elimine dejando una sola cabecera y no se si se deba a eso que la plantilla tiene dos códigos este es el primero,
    el menú esta puesto debajo del primer codigo que solo pone esto
    y debajo esta el menu
    Y el segundo estaun poquito mas abajo



    que es donde lo debia poner por eso no lo viste
    acaso me sobra uno?

    tengo mas cuestiones asi te dejo otro comentario aqui

    ResponderEliminar
  31. no se ha guardo ningun codigo que puesto no se si lo vas a entender en fin tengo otra cuestion el menu ha quedado muy bien, pero al gachet de paginas le he puesto el mismo color que al liston pero no queda bien por la plantiila hay alguna solucion como la de esta menu o parecida?
    gracias po todo

    ResponderEliminar
    Respuestas
    1. Pues ahora está ahí, quizá ayer no me fijé bien, pero ya veo el menú funcionando bien.
      No es que haya alguna solución para el gadget de páginas pues no es un problema en realidad, es sólo que visualmente no es muy estético, pero eso es porque esos gadgets no están diseñados para poner tantos enlaces. Quizá te convenga más quitar ese gadget de páginas y en su lugar poner un menú que tenga subpestañas para que esté más ordenado.

      Saludos.

      Eliminar
  32. Hola potro, me podrias dar solo el codigo para el doblez? puse el que dice xxxx:after y xxxx:before pero no me funcionaes para ponerselo a otra cosa, solo eso
    saludos

    ResponderEliminar
    Respuestas
    1. Toma el código de la entrada y ponlo en un editor online, así podrás ir quitando uno a uno los códigos y ver a qué corresponde cada área. Saludos.

      Eliminar
  33. se me olvido poner la url perdoname potro
    http://zerezas-otrasformasdecocinar.blogspot.com/

    ResponderEliminar
  34. ha quedado genial y lo vor a poner en el otro blog, en cuanto sl menu subpestañas te lo he mirado todos y algunos me gustan pero son algo complicados para mi, seria quitar el gachet de paginas y ner los enlaces en el menu de subpestañas? como hay cosas que todavia se me escapan tu me aconsejas alguno?
    gracias

    ResponderEliminar
    Respuestas
    1. Exactamente zerezas, sería poner el menú que te guste, y en las pestañas poner los enlaces a tus páginas ;)

      Eliminar
  35. INQUIETUD:
    El SUSCRIBIRSE via FEEDBURNER, ya lo coloque casi al principio de la columna izquierda de mi BLOG para que lo veas..Se ve transparente la caja del gadget, que apenas lo hace notar...Ojala se puede CAMBIAR el fondo del color
    http://frogelio-leader.blogspot.com

    Y el color de fondo de la Caja de Seguidores, tambien es posible modificarlo?

    MIL GRACIAS.....

    Marketing gratuito para tu GENIAL BLOG....

    ResponderEliminar
    Respuestas
    1. Bueno, yo me refería a la entrada de la suscripción pero bueno, para ya no dar más vueltas te respondo aquí...

      Para que tenga un color de fondo agrega esto:
      .subscribe-wrapper {
      background: #ff0;
      width: 160px;
      }


      Los colores de la lista de Seguidores sólo se puede personalizar desde el gadget, si haces click en editar verás esas opciones.
      Saludos.

      Eliminar
  36. Hola!
    Primero parabenizarte por el blog, siempre me ayuda mucho. He usado un tutorial antiguo tuyo para poner las pestañas horizontales, pero sigo con un problema son los links. Quiero poner en cada boton, unas de las etiquetas del blog, pero no encuetro forma. Si puedes echale un vistazo a mi blog para ver lo que puede estar pasando. todas las etiquetas estao puestas de la siguiente forma: http://mimmbodas.blogspot.com/search/label/Tema%3A%3AViaje

    Otra cosa, si me puedes echar una mano, es la enorme distancia entre la barra de navegacion y el topo de la pagina. Hace algun tiempo altere algunos parametros que hicieran cambiar esta distancia, y ahora resulta que no se como arreglarlo. (me acuerdo que tenia que ver con meta tags, o algo asi)

    Muchas gracias!

    ResponderEliminar
    Respuestas
    1. Hola MIMM BODAS, gracias por tu comentario.
      Así es como debes poner el enlace a las etiquetas, sólo tienes que quitar donde dice URL del enlace y en su lugar poner la URL de la etiqueta, tal como se explica aquí:
      http://ciudadblogger.com/2010/06/menu-de-categorias.html

      Para el espacio que mencionas mira esta entrada:
      http://ciudadblogger.com/2011/02/eliminar-espacio-superior-en-las.html

      Saludos.

      Eliminar
  37. gracia potro eres tu mi salvacion he decirte que estoy aqui en tu blog todos los dias buscando cosas,he visto todos los menus casi que me los se de memoria, y no se cual poner que no me resulte complicado y todos me gustan me orientas un poquito por favor
    gracias.

    ResponderEliminar
    Respuestas
    1. Ahí es cuestión de gusto y necesidades, sino quieres complicarte mucho usa uno que no requiera scripts, que esté hecho con CSS, así te evitarás posibles problemas de incompatibilidad.

      Eliminar
  38. Hola potro otra vez yo :) perdón pero mira yo tengo una pagina con unos amigo echos y el problema es que utilizo una plantilla que seguramente conoces bloggertube y las entradas son diferentes a las plantillas comunes lo que yo quiero saber es como hago para que cuando habra una pagina independiente las entradas se vean diferente perdón que e escrito tanto es que si no no se como explicarme

    ResponderEliminar
    Respuestas
    1. Hola Marcos, ¿te refieres a que las páginas independientes luzcan diferentes a las entradas? Si es así mira esta entrada, ahí hay información al respecto:
      http://ciudadblogger.com/2010/02/mostrar-las-paginas-estaticas-de-forma.html

      Eliminar
  39. Hola El Potro.. quisiera pedirte un favor.. como puedo agregar a mi blog el sistema de comentarios que tienes en tu pagina web. Disculpa la ignoraqncia y te agradezco tu respuesta.

    Cordialmente

    ResponderEliminar
    Respuestas
    1. Hola GCS, uso los comentarios anidados, veo que usas una plantilla original de Blogger, así que también debes tener tú la opción de Responder.
      Saludos.

      Eliminar
  40. hola Potro !!

    muchas gracias por compartir esta información, soy nuevo en este mundo de blogger y apreciamos tu ayuda

    Saludos y que continue el exito

    ResponderEliminar
    Respuestas
    1. Gracias Emilio, que tengas mucho éxito en este largo camino de los blogs. Un abrazo.

      Eliminar
  41. GRACIAS POTRO....
    Al menos ya quedo algo mas estetico.

    El Color de fondo del gadget de MIS SEGUIDORES, no funciona..Pero en fin...Lo dejare ahi.

    Ultimas inquietudes:
    El FANBXOX DE TWITTER NO ME FUNCIONA..Solo me sale una linea azul o sino, sale vacia...y con mensaje de error......Se tiene que crear una pagina oficial igual que facebook paar que funcione?

    La imagen del fondo de mi blog, en el navegador del Mozilla, sale incompleto...O tambien hay un codigo especial para que ocupe toda la pantalla del monitor...(sobretodo en los ultimos monitores LCD)....


    Simplemente MIL GRACIAS....y que sigan los exitos en tu vida profesional...

    ResponderEliminar
    Respuestas
    1. El fanbox de Twitter puedes conseguirlo aquí:
      http://ciudadblogger.com/2010/11/agregar-un-fan-box-de-twitter.html

      La imagen de fondo sale del tamaño real, lo que sucede es que no es muy ancha, no puede ocupar toda la pantalla porque el ancho de la misma no lo permite. Tendrías que, poner una imagen más ancha, o hacer que la imagen se repita, aunque esto segundo no es lo más estético. Si deseas hacerlo edita el gadget donde colocaste la imagen, ahí verás esto:

      body {background-image: url(" http://i1253.photobucket.com/albums/hh592/frogelider/espacioamor.jpg"); background-position: center; background-repeat: no-repeat; background-attachment: fixed; }

      Si quitas lo que está en negrita se repetirá la imagen hasta cubrirlo todo.
      Saludos.

      Eliminar
  42. Sensacional Potro, lo tengo puesto en mi blog y me gusta el resultado. Tengo una pregunta: ¿no puede cambiarse el tipo de letra (fuente) tal y como ofrece el diseñador de Blogger en sus pestañas?. Gracias.

    ResponderEliminar
    Respuestas
    1. Desde el Diseñador no, pero puedes cambiarle la fuente manualmente, agregando debajo de #menuListon li a { esto:
      font-family: Impact;

      Saludos!

      Eliminar
  43. gracias me pongo a ver que nenu me va mejor este menu lo he puesto en lo dos blogs y les ha quedado genial gracias.
    miralo aqui
    http://zerezas-curiosidadesvarias.blogspot.com/
    http://zerezas-otrasformasdecocinar.blogspot.com/

    ResponderEliminar
  44. Más que perfecto Potro, gracias. Fuente cambiada. Un saludo.

    ResponderEliminar
  45. Hola, excelente, gracias por el trabajo que te das por hacer esto.

    Una cosa, ¿a esto se le puede agregar submenús? Recién estoy aprendiendo algo en HTML y tengo esa duda...

    gracias y saludos

    ResponderEliminar
    Respuestas
    1. Probablemente Kamui, pero por lo pronto no le haré ese tipo de modificaciones al menú, quizás más adelante haga uno como este con subpestañas.
      Saludos.

      Eliminar
  46. exelente ya esta en mi blog algo modificado

    http://dhayzon.blogspot.com/

    ResponderEliminar
  47. hola potro oye tengo una duda con el fondo de mi web e ensanxado la pagina de los 950px a los 1050 pero aora el fondo no encaja el k sale los dos laterales grises y el centro negro e intentado buscar la solucion en el codigo fuente para saber k eslo k tengo ke modificar pero m toy volviendo loco aver si t puedes pasar por la pagina y ves lo que quiero decir http://shopimvu-as.blogspot.com/ gracias de antemano

    ResponderEliminar
    Respuestas
    1. Yo lo veo bien JAH, ¿cómo debería estar?

      Eliminar
    2. si aora esta bien pork le devolvi a su sitio pero si lo ensanxo a 1050px el fondo de dos columnas grises y centro negro no se ensanxa cuando puedas me gustaria k t mirases el codigo fuente para saber que tengo ke modificar y asi poder ensanxar todo y ya que estoy me gustaria saber como poder añadir otro apartado a mi menu y que se veaporque cuando añado un apartado no se me ve nose si esq el menu esta limitado por unas pocas categorias o por el ancho del menu en si perdona que pida tanto pero esq me gusta que ya que hago algo este bien hecho y antes de preguntar aqui pregunte por xats pero nadie sabe o nadie se ofrece como tu a ayudar me sabe mal tener que preguntar tanto

      Eliminar
    3. Debe ser que el fondo es una imagen, por eso si ensanchas los contenedores verás que el fondo se mantiene igual, por lo tanto debes localizar la imagen de fondo y editarla para hacerla a la medida que tendrá ahora el blog.
      Al menú sólo basta con añadirle antes de </ul> otra línea como esta, pero claro está que deberás tener suficiente ancho en el menú:

      <li><a href='URL del enlace'> &#10029; Pestaña 5</a></li>

      Eliminar
    4. mil gracias potro funcionó a la perfeccion.
      como siempre son de valorar tus consejos y mas aun, tu ayuda.
      un abrazo amigo

      Eliminar
    5. Gracias a ti JAH, otro abrazo para ti.

      Eliminar
  48. Hola amigo potro por favor me podrias hacer un banner de tu pagina bien bueno para enlazarlo a la mia por agradecimiento de tanto que me has ayudado que tenga un tamaño de height="80" y width="420" algo asi como este http://img502.imageshack.us/img502/3314/2634590f232c819m3.png
    por favor enviamelo a: ventas@variedadespalencia.com
    gracias por todo amigo sigue asi, suerte.

    ResponderEliminar
    Respuestas
    1. Gracias variedades palencia, pero de esa medida no tengo :(
      Tengo este que mide 420 de ancho, pero no tiene esa altura:
      http://lh5.googleusercontent.com/-sJrk98c_PoA/Ttfz3Wt8GuI/AAAAAAAAGi8/dqZY63xfIiQ/s420/ciudadblogger8.png

      Gracias de todas formas :)

      Eliminar
    2. Ok amigo no hay problema yo la acomodo cuando este lista en una de mis publicaciones te envio el enlace para que la veas ok, tambien le he estado dando click a tu publicidad para ayudarte de algun modo a que esta magnifica pagina siga por siempre gracia a ti amigo por tanta ayuda de verdad dudo mucho que hubiese hecho mi pagina sin tus tutoriales.

      ANTONIO PALENCIA

      Eliminar
    3. Ok amigo esta bien yo lo acomodo, cuando este listo en mi pagina te doy el enlace de la entrada para que lo veas ok, tambien de vez en cuando le hago click a tu publicidad para de un modo contribuir a que esta magnifica pagina siga adelante porque gracias a ti y a tus tutoriales he realizado mi pagina gracias amigo potro sigue asi.

      ANTONIO PALENCIA

      Eliminar
    4. Te lo agradezco Antonio. Saludos y mucho éxito!

      Eliminar
    5. Listo potro lo prometido es deuda puedes ver en esta publicacion que coloque un banner de tu pagina http://www.variedadespalencia.com/2010_05_14_archive.html
      y hay seguimos ayudando en lo que podamos hermano.

      Eliminar
    6. Muchas gracias Antonio, buen fin de semana :)

      Eliminar
  49. Hola potro, me ha encantado este tipo de menú, muy sencillo, pero con un buen resultado final.

    Has mencionado que este tipo de menús quedan bien en blogs con un color de fondo distinto al contenedor principal, y yo te pregunto ¿Cómo podría ponerle a mi blog en fondo de color diferente al contenedor principal?

    Saludos y muchas gracias.

    ResponderEliminar
    Respuestas
    1. Hola Javier S, si usas una plantilla del Diseñador de plantillas entonces ahí puedes elegir los colores de fondo tanto para el contenedor como para el fondo del blog. Si usas una plantilla personalizada entonces en el body { puedes poner el color de fondo. Saludos.

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

      Eliminar
    3. Hola Potro, lo que yo quiero realmente es una sencilla línea alrededor del blog, y encontré la forma de hacerlo poniendo lo siguiente:

      <body style="border:10px groove #026ddf; margin: 0;">

      Lo que pasa es que no me gusta eso de que me aparezca lo más oscuro (que es el efecto que le da "groove"), pero al quitar ese dato, directamente me desaparece la línea.

      ¿Qué puedo hacer para que solo me salga la línea del color que yo quiero?

      Saludos y muchas gracias.

      Eliminar
    4. El groove es el estilo del borde, si lo quieres "normalito" cambia el groove por solid

      Eliminar
    5. Fenómeno, quedó genial.

      Una (nueva) pregunta ¿Éste efecto de las pestaña no se podrían aplicar a los títulos de las entradas y de los gadgets de la columna lateral?

      Saludos y muchas gracias.

      Eliminar
    6. Supongo que sí, sería cuestión de que cambies los #menuListon por h2 para que se aplique en los títulos de los gadgets, o por .post h3 para que se cambien los títulos de las entradas.

      Eliminar
    7. Efectivamente pude hacerlo, pero sin embargo no queda exactamente igual.

      Por ejemplo, tanto los gadget, como los títulos de las entradas tuve que ponerlos centrados, porque si los ponía a la izquierda quedaban muy pegados al borde, en vez de quedarse como antes de darle formato.

      En el título de las entradas al pasar el cursor por encima cambia de color, y yo quiero que el color de las letras quede igual.

      Y por último el efecto (la sombra negra, no el de saltar hacia delante) de las letras no es el mismo.

      ¿Cómo podría hacerlo para corregir esos fallos?

      Te dejo el link del blog donde estoy haciendo las pruebas a ver si me puedes ayudar http://pruebasmarinasalas.blogspot.com

      Saludos y muchas gracias de nuevo.

      Eliminar
    8. Debe quedar así, el resto se personaliza donde se indica, de este mismo código guíate para el de los gadgets:
      .post h3:after, .post h3:before {
      content: '';
      position: absolute;
      }

      .post h3 {
      height:25px; /* Alto del menú */
      text-align: center;
      position: relative;
      margin: 0 -30px 5px -30px;
      padding: 10px 0;
      background: #e5592e; /* Color del listón */
      background-image: -moz-linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0));
      background-image: -webkit-linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0));
      background-image: -o-linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0));
      background-image: -ms-linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0));
      background-image: linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0));
      -moz-box-shadow: 0 2px 0 #bbb;
      -webkit-box-shadow: 0 2px #bbb;
      }

      .post h3:before, .post h3:after {
      border-style: solid;
      border-color: transparent;
      bottom: -10px;
      }

      .post h3:before {
      border-width: 0 20px 10px 0;
      border-right-color: #8C3115; /* Color de la sombra del doblez */
      left: 0;
      }

      .post h3:after {
      border-width: 0 0 10px 20px;
      border-left-color: #8C3115; /* Color de la sombra del doblez */
      right: 0;
      }

      .post h3:hover {
      font-size:20px; /* Tamaño del texto al pasar el cursor */
      transition:all .1s linear;
      -o-transition:all .1s linear;
      -moz-transition:all .1s linear;
      -webkit-transition:all .1s linear;
      }

      Eliminar
    9. Muchas gracias Potro por su tiempo, quedó todo muy bien. Saludos :)

      Eliminar
  50. chebre el menu, pero sabes, a mi me gustaría este menú que aparece en este web: http://diario16.pe/ me gusta el efecto que se da cuando paso el cursor en el menú. Haber si algún día te das un tiempito y publicas un post para poner ese menú en mi blog.
    Una pregunta potro ¿como hago para poner un menú sin ir a edición HTML? me gustaría crear un menú solo a partir gatget javascrip html ¿se puede o no se puede?... gracias por la respuesta de antemano, Potro

    ResponderEliminar
    Respuestas
    1. También se puede poner en un gadget, es sólo que algunas veces, según el menú, es necesario que esté directo en la plantilla para que se vea bien. Saludos.

      Eliminar
  51. Buena Potro. Seguramente sea una pregunta estupida o muy sencilla de contestar pero me estoy volviendo loco.

    El menu es muy bueno y sencillo pero no quiero que me aparezca nada al lado de las etiquetas ni estrellas ni un cuadrado que pone 2070 como es mi caso. Como podias solucionarlo????

    Muchas gracias y enhorabuena por tener una pagina tan buena

    ResponderEliminar
    Respuestas
    1. Hola Tokky, sino quieres que aparezcan las estrellas elimina del último código lo que está en negrita.
      Saludos!

      Eliminar
  52. Hola amigo potro, mira como hago para colocar otro listo solo debajo de la pagina al final para hay colocar creditos?

    ANTONIO PALENCIA

    ResponderEliminar
  53. Hola potro mira cree este menu pero le adapte pestañas desplegables y me surgio un solo problema, resulta que al querer bajer el raton para ir al sub menu este desaparece y la unica forma es darle rapidamente para poder ir al submenu como arreglo eso amigo para que el submenu se mantenga? miralo aqui en este blog de prueba que tengo http://tiendasanderson.blogspot.com/ y dime que tal ha quedado se que no lo hago tan bien como tu pero me pase toda la tarde en esto jejejeje

    AHH Y YA PUDE COLOCAR TAMBIEN EL LISTON ABAJO PARA LOS CREDITOS AMIGO, HICE TODO LO QUE ME PROPUSE LO UNICO ES ESE DETALLE QUE TE COMENTE LO DEL SUDMENU QUE NO LOGRO REPARAR


    ANTONIO PALENCIA

    ResponderEliminar
    Respuestas
    1. Hola Antonio, cambia esta parte:
      #menuListon ul {
      margin-top: 0px;
      }


      Por esta:
      #menuListon ul {
      margin-top: -15px !important;
      }


      Eso hará que el submenú se suba y se pueda pasar el cursor sobre él.
      Saludos.

      Eliminar
    2. Listo potro, de verdad que cada dia me sorprendes mas hermano usted es un genio yo que dure un dia tratando de buscar ese error y no lo consegui y tal vez tu con solo ver el codigo ya sabias cual era, una vez mas gracias amigo mil gracias.

      Eliminar
    3. Por nada Antonio, es un gusto poderte ayudar. Saludos.

      Eliminar
  54. Potro lo mejor de todo es que pude crear 3 versiones de este menu para tenerlos a la mano y cambiarlos a mi gusto en mi web variedadespalencia.com gracias maestro.


    ANTONIO PALENCIA

    ResponderEliminar
    Respuestas
    1. Eso es mucho mejor entonces, habrá de donde escoger :)

      Eliminar
  55. HOla Potro, tengo un problema con mi menú desplegable. Al cargar la página, los desplegables de la primera pestaña aparecen desordenados y luego se ordenan.
    Aparte de esto, en el único navegador que anda casi bien el menú es en Firefox...

    Podrías pasarte por mi blog y fijarte?
    www.lorosenargentina.blogspot.com

    ResponderEliminar
    Respuestas
    1. Hola Noe, es por la velocidad de carga del blog, como no carga de inmediato esos datos el menú no se muestra bien.
      Veo que usa un script, y ya se encuentra después de HEAD lo cual es lo más indicado para estos casos sin embargo veo que los scripts son extensos, así que esa podría ser una de las razones por la que no carga de inmediato el menú y lo muestra de esa forma.
      Quizá ayudaría ligeramente si los estilos del menú los pones más arriba, por ejemplo antes de body{

      Eliminar
  56. buenos dias `potro he seguido tu consejo y he puesto un menu vertical deslizante para las paginas quiero ponerle una imagen de que tamañotengo que ponerla
    en este menu no logro bajar la logintud para centralo con la imagen de la cabecera he puesto el lado decho pero no logro pone el izquierdo
    gracias

    ResponderEliminar
  57. uf se me olvido la url com siempre
    http://zerezas-otrasformasdecocinar.blogspot.com/

    ResponderEliminar
    Respuestas
    1. Hola zerezas, cambia el width:100% por width: 1160px; con eso alcanzará todo el ancho. La imagen si la pones en esa área será también de 1160px de ancho.
      Cualquier otra duda sobre ese menú vamos a verlo en esa entrada para no desviarnos del tema de este post ;)

      Saludos.

      Eliminar
  58. Nunca me había pasado en ésta web pero me ha salido ésto

    No se ha podido analizar su plantilla, porque no está bien formada. Asegúrese de que todos los elementos XML se han cerrado correctamente.
    Mensaje de error de XML: The element type "header" must be terminated by the matching end-tag "".
    Error 500

    y copio y pego tal cual. Lo intenté 3 veces y nada. Si alguien me puede ayudar... gracias

    ResponderEliminar
  59. No sé donde va mi publicación.... se debió perder porque ultimamente las webs y yo no nos llevamos bien. Pues no me sale eso :(. me sale error y lo copio y lo pego tal cual y nada. Error 500 me sale al final cuando le doy a vista previa. No sé qué puede pasar

    ResponderEliminar
    Respuestas
    1. Hola Wendy, es posible que al poner el segundo código estés eliminando algo por error; cerciórate que no elimines nada al poner el código.

      Eliminar
  60. hola wendy a mi me paso lo mismo te falta una llave de cierre o un codigo anterior que tengas puesto al menos eso me paso a mi, o al copiar el codigo del menu nos dejamos algo y pon tu direccion donde te pasa esto para que potro lo vea

    ResponderEliminar
  61. Muchas gracias zerezas :) mi direccion es www.elrincondewendyb.blogspot.com.es. Es que sabes? Me pasa con mucha frecuencia en muchas paginas y me parece raro qeu sea eso, pero a saber. gracias de nuevo

    ResponderEliminar
    Respuestas
    1. Me ha quedado perfecto y precioso. Gracias zerezas, muchísimas gracias :). Y a ti Potro sólo decirte que eres GENIAL y que explicas todo a las mil maravillas. Decirte que ya tengo tu página en mi blog :). Gracias de nuevo

      Eliminar
  62. hola wendy me alegro mucho es frustrante cuando por mas que lo intentamos no sale nada aderechas, pero todo se lo debo a potro y su generosidad, le tenia panico a la plantilla,porque no entendia nada,
    pero desde que di con ciudad blogger ya es otra cosa, blogs de ayuda hay tropecientos pero con la claridad meridiana de potro ninguno y si tiene algun otro problema antes de ver otra pagina pasate por aqui chao

    ResponderEliminar
  63. Hola Potro, me gustaría saber si éste listón se puede usar también para una página que estoy haciendo en dreamweaver. Y si es así, cómo pego los códigos porque creo qeu son diferentes. Gracias

    ResponderEliminar
    Respuestas
    1. Pues todo lo que hay acá sólo lo pruebo en Blogger, pero supongo que debe poderse si el primer código lo pones dentro de tus estilos CSS y el otro dentro del BODY.

      Eliminar
    2. Pues sí, ha quedado perfecto. Sólo he tenido que modificar algo los márgenes y listo. Es que quiero hacer páginas asociadas al blog pero con el mismo estilo de apariencia y me era muy útil ese menú. Eres un crack. Gracias de nuevo por todo

      Eliminar
    3. Hola Potro :). Tengo un "problemilla" que no sé si tú me lo podrás solucionar. Resulta que el listón me va estupendamente en mi web... pero se ve bien en todos los navegadores menos en el explorer 9. Puedes echar un vistazo a ver dónde está el error. Muchas gracias

      www.elbazardelassorpresas.com

      Eliminar
    4. Internet Explorer siempre es un problema cuando de estilos se trata, a pesar de que en la versión 9 acepta más estilos CSS3 aún no reconoce todos :(

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

    ResponderEliminar
    Respuestas
    1. Hola ZETRACTO, en las anotaciones en color verde dice dónde se cambia el color del listón.

      Pd. He eliminado tu comentario por el aviso que está al final de esta página.

      Saludos.

      Eliminar
  65. hola poto mi prolema es el sigueinte la web que estoy editando tiene un menú secundario o segundo menú de categoria intentado editarle los link al menú con los link de las etiquetas pero cuando ya esta listo lo editado le doy vista previa me sale un texto en ingles un error 500 nose que hace si tu me puedes har una solución para ee menu modelo no se pierda asi quede igual que esta en la web con enlases etiquetas como categorias. de ante mano Jean Pierre De la Torre la cuenta esta no e mia es de mi papá

    ResponderEliminar
    Respuestas
    1. Hola Jean Pierre, probablemente haya un error en la URL que estás poniendo en el menú, o al ponerla estás eliminando algún caracter.
      Si únicamente estás cambiando (o agregando) la URL de la etiqueta asegúrate que no elimines nada, pues con quitar un solo caracter podría arrojarte ese error.

      Eliminar
  66. Hola Potro tengo mucho tiempo entrando en tu blog y te felicito , estoy realizando un blog nuevo y utilice el menu de liston , no me quedo igual pero la apariencia que tiene me gusta , pero no se que pasa coloco el enlace de las paginas manual (que tiene tres alternativas colocarla horizontal, vertical o no mostrarla , yo utilizo la ultima ya que esa es la que antes me funcionaba para hacerlo manual y cuando me conecto me sale que la pagina no existe , que pasa por favor ayudame mi blog es: http://entreamigoscreativos.blogspot.com.es/

    ResponderEliminar
    Respuestas
    1. Hola Lizi, no entiendo bien a qué te refieres cuando dices que te conectas. Pero en el menú debes poner las URLs de las entradas o páginas que quieras, sino lo pones entonces sí te dirá que la página no existe.

      Eliminar
  67. Pero es que tomo la URL de las páginas y lo coloco en cada enlace del menú y me dice que no existe la página y está la página , y antes habia colocado otro menú pero mapeado y me paso lo mismo ... No se donde esta el fallo ?

    ResponderEliminar
    Respuestas
    1. ¿Cuál es la URL del enlace que estás poniendo? Porque en ese blog no veo que hayas puesto alguna, en todos sigue diciendo "URL del enlace".

      Eliminar
  68. Hola Amigo [ El Potro ]...

    Una consulta... Me gustaría poder tener un recuadro de búsqueda en la parte donde se encuentra el "menú tipo horizontal listón"

    en la parte derecha dentro del listón cómo lo indica la imagen.

    Imagen (http://img1.imagilive.com/0512/sshot-11.png)

    Gracias por la ayuda.!

    ResponderEliminar
    Respuestas
    1. Mira esta entrada, a partir de ella puedes hacer combinaciones y pruebas:
      http://ciudadblogger.com/2012/04/menu-horizontal-con-subpestanas-y.html

      Eliminar
  69. Hola!!!

    Estoy empezando con mi blog y me estás siendo de una gran ayuda!!!He leído que podemos cambiar las estrellitas por otras imagenes cambiando el código en negrita,pero donde puedo obtener el código de una nueva imagen que quiera poner?
    Por otro lado,puedo cambiarle el color al listón?

    Gracias.

    ResponderEliminar
    Respuestas
    1. Hola Fresas y Menta, el color se cambia donde se indica en la entrada. Las estrellas son caracteres, y puedes cambiarlas por otros caracteres de figuras, por ejemplo como los que hay en esta entrada:
      http://ciudadblogger.com/2009/10/tips-para-dar-mejor-uso-los-comentarios.html

      Eliminar
  70. Hola!!...te escribí en otro tema hace un rato ...porque necesitaba que me ayudarás en implementar un menu tipo listón en u nuevo blog que estoy modificando...buscando encontré este tutorial que publicaste y lo aplique pero no me funciona del todo...puedo poner los link de las paginas y el testo de cada una queda horizontal y ok....pero lo que es el fondo, el listón no se ve...que podré haber hecho mal???...

    Te agradecería tu valiosa ayuda...como siempre!!!

    Te dejo el link de mi blog :

    www.imprimetufiesta.com

    Saludos!!

    María Angélica
    imprimetufiesta@vtr.net

    ResponderEliminar
    Respuestas
    1. Hola de nuevo María Angélica, lo que ha sucedido es que cuando pusiste los estilos de este menú (el primer código) eliminaste la llave de cierre } de los estilos que están arriba, por eso no se ve el menú como se debería ver.
      Mira esta entrada con más información al respecto que explica por qué sucede eso y cómo corregirlo:
      http://ciudadblogger.com/2011/07/errores-comunes-al-poner-los-codigos.html

      Eliminar
  71. Potro quisiera saber, por que el menu siempre se va hacia la derecha, osea no queda bien centrado, las palabras que lleva el menu siempre se van hacia el lado derecho!!!

    ResponderEliminar
  72. hola Potro
    primero en hora buena por tu blog que la verdad es muy bueno sobre todo para alguien que empieza.
    he puesto el menu en el blog que estoy preparando la unica pega es que me salen simbolos de > y no se porque?
    he intentado implantar otros menus con purecss y siempre me sale el simbolito > asi que deduzco que algo hago mal en general me podrias ayudar? muchas gracias

    ResponderEliminar
    Respuestas
    1. Hola Toni. Eso sucede porque tu plantilla tiene estilos para que los LI (listas ordenadas) tenga ese símbolo que es una imagen de fondo. Si buscas en tu plantilla esta parte:
      .art-blockcontent-body ul li {

      Verás que hay ahí una URL, esa URL es de una imagen, si la quitas se dejarán de ver esos símbolos.
      Saludos.

      Eliminar
    2. Muchas gracias era eso. me volvia loco para encontrar la solucion y tu lo has solucionado a la primera que grande eres!
      muchas gracias

      Eliminar
  73. Muy bueno, pero como quitar esta linea ( http://prntscr.com/c6x6m ) ???
    a, y como hacer que las pestañas esten mas separadas_??? Gracias)

    ResponderEliminar
  74. Encontre un problema mas con mi menu((
    Mira en mi primera pestaña puse esto "http://prntscr.com/c708b" ("ГЛАВНАЯ" - Significa Pagina Principal), pero al pulsar en esa pestaña me sale que esa pagina no existe( y la URL de ariba es esta: http://gold-tm.blogspot.com.es/gold-tm.blogspot.com , que debo hacer para que la URL de arriba salga solo "gold-tm.blogspot.com" que es mi blog y se habra como debe ser al pulsar en la pestaña???

    ResponderEliminar
  75. Potro lo del ultimo comentario no te preocupes, culpa mia=))) que ya lo arregle, me habia despistado con la URL y la puse mal)) Lo siento...
    Pero lo de la "linea" sigue estando ahi y nesecito respuesta.)

    ResponderEliminar
    Respuestas
    1. Elimina esta parte del código de los estilos, con eso se quitará esa línea:

      -moz-box-shadow: 0 2px 0 #bbb;
      -webkit-box-shadow: 0 2px #bbb;

      Eliminar
  76. Esto solucionado, gracias) pero otra cosa que te pidi antes tambien, era como hacer que las pestañas esten mas separadas_? Thanks!)

    ResponderEliminar
    Respuestas
    1. Modifica el valor de padding-right por uno más alto.

      Eliminar
    2. Oye Potro no se que pasa pero ahora todos las paginas ded mi blog tienen el mismo URL y eso no me deja terminar el menu=(
      Esta es la URL que me sale en todos: gold-tm.blogspot.com/p/blog-post.html , que hago_?

      Eliminar
    3. ¿Modificaste algo o cómo sucedió? ¿son páginas del blog o enlaces?

      Eliminar
    4. Tenia ya hecho el menu con paginas que cree antes y esas tenian cada una su enlace pero luego las borre por un problema que tenia y decedi crear unas nuevas para luego ponerlas de nuevo en los codigos HTML del menu. Pero como ves ya no lo pude hacer porque la URLs eran iguales.( no se que hacer..
      Oye y si inserto mi plantilla guardada antes de empezar el menu, las paginas tambien se cambiaran a las viejas, porque se guardan con la plantilla no_???

      Eliminar
    5. Pues no sé bien cómo funcione el gadget, podría ser que funcione, puedes probar hacerlo, o también prueba eliminar el gadget y luego ponlo otra vez.

      Eliminar
    6. He probado lo de insertar la plantilla guardada pero todo sigue igual=( Pero sobre que gadget ablas_? Oye, y tu como haces que tus entradas tengan esos enlaces tipo nombre_? yo podria cambiarlas solo las mias por las que quiero entoces terminaria con el problema no_? me puedes explicar como lo haces, es que llevo 2 dias paralizado en mi blog=(

      Eliminar
    7. Ya tengo la solucion, la unica pregunta que me queda para terminar el menu es: como hacer que el nobre de lapestaña no se repita en la parte superiorde la pagina? ejemplo: http://prntscr.com/cci6h , Gracias.)

      Eliminar
    8. Mira esta entrada, ahí se explica:
      http://ciudadblogger.com/2010/09/ocultar-titulos-de-las-paginas.html

      Eliminar
    9. Muchas gracias)) Saludos y buen findesemana_)

      Eliminar
  77. Hola potro te sigo hace poco tiempo pero se aprende mucho contigo. Acabo de realizar un menú tipo horizontal listón que está hecho con CSS3 y funciona perfectamente pero tengo que poner todas las urls de cada post para las diferentes pestañas??? mi blog es
    http://guachinchesparranderos.blogspot.com.es/
    Gracias y saluditos

    ResponderEliminar
    Respuestas
    1. Hola José, en el menú tú vas a enlazar lo que desees, no hay una regla para eso, puedes enlazar páginas, entradas, etiquetas, o algún otro sitio.
      Saludos.

      Eliminar
  78. Hola Potro tengo una duda con respecto a este post, ya tengo hecha la mitad, pero cuando llego a la parte de aqui agregas tu URL no se que hacer me puedes ayudar? Este es mi blog estoy empezando con tus consejos a mejorarlo, pero aun me falta mucho jejeje elrincondesuhi

    ResponderEliminar
    Respuestas
    1. Hola Suhail Pineda, ahí debes agregar las direcciones de los enlaces que quieras, ya sea la URL de una entrada, de una página, de una etiqueta o de otro sitio. Por ejemplo, si quisieras enlazar a Google entonces la URL sería:
      http://google.com

      Eliminar
  79. Una pregunta como haría para una misma pestaña me sirviese para varias entradas. Perdona si es un poco liosa la pregunta es que me estoy iniciando en el mundo de los blogs y ando un poco perdido. Quiero hacer un blog docente, y por lo tanto lo que querría es estructurarlo en temas, pero claro cada tema tendría varias entradas, como podría hacer

    ResponderEliminar
  80. Una pregunta como haría para una misma pestaña me sirviese para varias entradas. Perdona si es un poco liosa la pregunta es que me estoy iniciando en el mundo de los blogs y ando un poco perdido. Quiero hacer un blog docente, y por lo tanto lo que querría es estructurarlo en temas, pero claro cada tema tendría varias entradas, como podría hacer

    ResponderEliminar
    Respuestas
    1. Hola Miguel, necesitas agrupar las entradas por etiquetas como se explica aquí:
      http://ciudadblogger.com/2010/06/menu-de-categorias.html

      Saludos.

      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