Menú horizontal con subpestañas y buscador integrado

19 de abril de 2012 1053 comentarios ,


El siguiente menú está hecho únicamente con CSS, es un menú horizontal con subpestañas, y del lado derecho tiene un buscador redondeado.
Es un menú práctico para los que no requieren de menús muy complejos o prefieren no usar uno que requiera scripts y/o demasiadas imágenes, además, la instalación y personalización es bastante sencilla, y por si fuera poco es bastante funcional, ya que al tener el buscador integrado puedes tener dos elementos en una misma área.
Puedes verlo funcionando en este blog de pruebas, si usas el buscador escribe la palabra y presiona ENTER.


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ú horizontal con submenús en tu blog entra en la Edición HTML de tu plantilla, y antes de ]]></b:skin> pega los estilos:
/* Menu horizontal con buscador
----------------------------------------------- */
#menuWrapper {
width:100%; /* Ancho del menú */
height:35px;
padding-left:14px;
background:#333333; /* Color de fondo */
border-radius:20px; /* Bordes redondeados */
}
.menu {
width: 100%;
float: left;
font-family:"Lucida Sans Unicode", "Trebuchet Unicode MS", "Lucida Grande",sans-serif;
font-size:13px; /* Tamaño de la fuente */
font-weight:bold;
}
.menu ul {
float:left;
height:0px;
list-style:none;
margin:0;
padding:0;
border-radius: 0px 0px 20px 20px; /* Bordes redondeados del submenú */
}
.menu li{
float:left;
padding:0px;
}
.menu li a{
background:#333333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7-EMOY3pQ1mqaRvCAVp9S6ZVl1BswXrAoOp1fIanLtPDC-bPcO9YPj-FVzXgjwlONiQEQiUGUurS-noLCIv3pp3mH9EfHpdfX4scYUa1UXJ_IHTXnyUtM5p9kyzwVzm-qKbeyuULgjvo/s35/separador.gif) bottom right no-repeat;
color:#cccccc; /* Color de la fuente */
display:block;
font-weight:normal;
line-height:35px;
margin:0px;
padding:0px 25px; /* Espacio entre cada pestaña */
text-align:center;
text-decoration:none;
}
.menu li a:hover, .menu ul li:hover a {
background: #2580a2; /* Color de las pestañas al pasar el cursor */
color:#FFFFFF; /* Color del texto al pasar el cursor */
text-decoration:none;
}
.menu li ul {
background:#333333; /* Color de fondo del submenú */
display:none;
height:auto;
padding:0px;
margin:0px;
position:absolute;
width:200px; /* Ancho del submenú */
z-index:100;
border-top:1px solid #fff; /* Borde superior del submenú */
}
.menu li:hover ul{
display:block;
}
.menu li li {
display:block;
float:none;
margin:0px;
padding:0px;
width:200px;
}
.menu li:hover li a {
background:none;
border-radius: 0px 0px 20px 20px; /* Borde de las subpestañas */
}
.menu li ul a {
display:block;
height:35px;
font-size:12px;
font-style:normal;
margin:0px;
padding:0px 10px 0px 15px;
text-align:left;
}
.menu li ul a:hover, .menu li ul li:hover a{
background:#2580a2; /* Color de las subpestañas al pasar el cursor */
color:#ffffff;
text-decoration:none;
}

#search {
width: 228px; /* Ancho del buscador */
height: 22px;
float: right;
text-align: center;
margin-top: 6px;
margin-right: 6px;
/* Imagen de fondo del buscador */
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYtHNe1CpoSEXOhfTo3FrsEnX4IuqNreDKzbbBsTr1QHHF0sgtwbBtP4ucNm-NgrUkGll625TcQrw-WTi5pz3OI7aNWltO31SWpQ7EVZA-neoq42qilCSAqY_BHwArbHJ15O11FWe2u0k/s1600/search-bar.png) no-repeat;
}
#search-box {
margin-top: 3px;
border:0px;
background: transparent;
text-align:center;
}
Luego entra en la sección de Diseño, y en un elemento HTML/Javascript pega la estructura del menú:
<div id='menuWrapper'>
<div class='menu'>
<ul>
<li><a href="URL del enlace">Pestaña 1</a></li>
<li><a href="#">Pestaña 2</a>
<ul>
<li><a href="URL del enlace">Pestaña 2.1</a></li>
<li><a href="URL del enlace">Pestaña 2.2</a></li>
<li><a href="URL del enlace">Pestaña 2.3</a></li>
<li><a href="URL del enlace">Pestaña 2.4</a></li>
</ul>
</li>
<li><a 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>
</ul>
</li>

<li><a 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>
</ul>
</li>

</ul>


<form action='/search' id='search' method='get' name='searchForm' style='display:inline;'>
<input id='search-box' name='q' onblur='if (this.value == &quot;&quot;) this.value = &quot;Buscar...&quot;;' onfocus='if (this.value == &quot;Buscar...&quot;) this.value = &quot;&quot;;' size='28' type='text' value='Buscar...'/></form>

</div></div>
Agrega las URLs de los enlaces donde se indica así como el nombre de tus pestañas.
En el primer código puedes ver las áreas que se pueden personalizar tales como el color, etc.
La apariencia redondeada del ancho de todo el menú también es CSS, así que si usas un navegador antiguo no se verán esos bordes.

Si quisieras agregar otra pestaña entonces añade antes del último </ul> en color azul una línea como esta:
<li><a href="URL del enlace">Pestaña 5</a></li>
Si quisieras que ésta tenga submenús entonces el código que deberás poner es este:
<li><a 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>
</ul>
</li>
Sin embargo, se recomienda no poner muchas pestañas, ya que si se excede entonces las pestañas se mostrarán en un segundo renglón.

Y eso es todo, ¿apoco no fue sencillo?


1.053 comentarios en:

" Menú horizontal con subpestañas y buscador integrado "

  1. Magnífico...y por una vez lo veo sencillo para mí. Espero algún día poder hacerme un blog como dios manda y poder integrar uno de estos.
    Gracias por tu trabajo y regalárnoslo, Potro.
    Un beso

    ResponderEliminar
    Respuestas
    1. Pero si ya tienes uno como Dios manda. Aun así cuando le toque renovación ya tendrás varias opciones, lo difícil será decidirte qué usar ;)
      Besos.

      Eliminar
    2. Potro amigo... tengo una dificultad con mi blog... hice el procedimiento y mira cómo quedó: http://mycalidad.blogspot.com/

      El dilema es porque no guardé la plantilla jajaja.. por hacer las cosas a la carrera no me aseguré de todo :D

      HELPMEEE!!!

      Eliminar
    3. Hola Leo, cuando has puesto el código de los estilos has eliminado una llave de cierre, por eso se ve así:
      http://ciudadblogger.com/2011/07/errores-comunes-al-poner-los-codigos.html

      Eliminar
    4. Amigo Potro, como siempre agradezco tus orientaciones... ahorita pude solucionar la mitad del asunto... como se puede observar en mi sitio www.mycalidad.net | aparece la barra pero no tiene ningún tipo de "despliegue"...

      Realmente no sé que estoy haciendo mal... agradezco tu indispensable orientación...

      PD: Como gesto de agradecimiento te comento que hace mucho tiempo te tengo enlazado en mi blog.

      ¡Felicidades!

      Eliminar
    5. Elimina todos los class='tabs' que tengas en tu plantilla.

      Eliminar
    6. Perfecto hermano... usted es la machera... Gracias amigo, como siempre usted es el genio de estos asuntos.

      Mi blog luce como luce gracias a "El Potro"...

      ¡Una excelente semana!

      www.mycalidad.net

      Eliminar
  2. Hola Potro hace tiempo quería comentarte lo siguiente, para que funcionen bien estos menús en las plantillas del diseñador de blogger en IE debemos darle un z-index a tabs-outer, en este caso yo lo he hecho así
    <div class="tabs-outer" style="z-index:1000">
    Tengo un menú desplegable y funciona bien.
    Saludos.
    Gabriela.

    ResponderEliminar
    Respuestas
    1. Se me olvidaba decir que lo demás lo he hecho junto con lo de la entrada que escribiste para cambiar los estilos. :)

      Eliminar
    2. Excelente tip Gabriela. Ahora mismo pruebo algunos menús en esas plantillas y los miro en IE a ver qué tal va con tu recomendación, sirve que actualizo la entrada :)
      Buen fin de semana.

      Eliminar
    3. Te debo un café Gabriela, acabo de probarlo y funciona perfectamente. Gracias de nuevo :)

      Eliminar
    4. Bueno, acepto un consideración extra en el próximo concurso de dominios jajajaja.
      Nada, me alegro que funcione, ya que eso demuestra que voy avanzando en lo referente a Blogger.
      Buen finde igualmente.

      Eliminar
    5. Jajaja, mejor el café ;)
      Por cierto, puse el z-index con un valor mucho más bajo, con 1, y también funciona, te digo esto porque si funciona con ese valor será mejor usarlo de ese modo, para que después no pueda dar problemas con algún otro elemento que requiera un z-index con un valor más bajo que 1000

      Buen fin de semana!

      Eliminar
  3. Muchas gracias!! esto es justo lo que le falta a mi blog.
    Saludos

    ResponderEliminar
  4. Se ve muy bueno! a ver si lo implemento en mi blog.
    Gracias!

    ResponderEliminar
  5. Está genial, me encantó que tenga un buscador...Poco a poco estoy poniendo el blog más visible gracias a tus publicaciones :)
    http://netwnews.blogspot.com

    ResponderEliminar
  6. Gracias Potro! No retoco hace tiempo pero siempre procuro leer tus post y seguir aprendiendo, gracias a tí. Un abrazo!

    ResponderEliminar
    Respuestas
    1. Gracias por estar siempre, ya algún día tocará retocar el blog ;)

      Eliminar
  7. Potro, yo tengo un menú ya puesto. Para colocar este tendría que borrar todo lo anterior?

    ResponderEliminar
    Respuestas
    1. Este comentario ha sido eliminado por el autor.

      Eliminar
    2. No te preocupes potro, ya lo solucioné. Agregué tu sitio como link de interés en mi blog, ya que como forma de agradecimiento lo hago! http://bernardogeldres.blogspot.com

      Eliminar
    3. Gracias por el enlace Bernardo, y qué gusto que lo has resuelto :)

      Eliminar
  8. que bonito! quizas lo agregue a mi blog :)

    ResponderEliminar
  9. muy bueno brother, estuve buscando en tu blog, ando buscando un marco o un recuadro para poderlo añadir entre la cabecera y el contenido del blog, no se si me puedas ayudar con el código, busco un marco o recuadro llamativo para poner alli enlaces de afiliados, gracias !!

    ResponderEliminar
    Respuestas
    1. Hola zizu, todo depende de como qué quieras exactamente, en sí puedes poner cualquier tipo de gadget debajo de la cabecera, luego a ese gadget le puedes poner los estilos que quieras.
      Un ejemplo muy simple sería algo así:

      <div style="background:#ccc; color:#000; width: 400px; height: 150px; border:5px solid #000;">
      ...aquí lo que quieras poner...
      </div>

      Eliminar
  10. Seguro que funciona bien con IE y con Mozila?

    ResponderEliminar
    Respuestas
    1. Tan seguro como que el blog de pruebas se ve bien en ambos.

      Eliminar
  11. Potro: Decirte que soy una fiel seguidora vuestra y que he aprendido mucho con vosotros, pero me gustaría que me ayudaras con eso de los enlaces, pues no me aclaro a la hora de conseguirlos. Si eres tan amable intenta ayudarme.
    Besitos de Carmen

    ResponderEliminar
    Respuestas
    1. Gracias por seguir este blog Carmen.
      Los enlaces son las páginas que quieras que abra, ya sea una entrada, una sección de tu blog, o una página externa.
      Usualmente se ponen las URLs de las etiquetas, para de esa forma tener en el menú las categorías del blog:
      http://ciudadblogger.com/2010/06/menu-de-categorias.html

      Gracias por los besitos.

      Eliminar
  12. Muchisimas gracias Potro!

    Me has ayudado mucho, ya voy y lo pongo en mi blog.
    ¡¡¡Eres el mejor!!!

    De nuevo gracias :DDDD

    ResponderEliminar
  13. esta de la patada potro tambien funcion en una pagina html simple xd... lo voy a usar

    ResponderEliminar
  14. hola gente este blog me ayuda un monton, mil gracias. POTRO estoy armando un blog http://area51designs.blogspot.com.ar/ use varias cosas en jquery, todo bien salva que cuando agrego otro pagina, como "galería", y voy a ella no se ejecutan los scrypts, debe de faltarme tocar algun parametro pero no me doi cuenta que sera, MIL GRACIAS POR LA AYUDA GENIO!!!!

    ResponderEliminar
    Respuestas
    1. Hola Master-Robert, posiblemente lo que sucede es que has agregado muchas versiones de jQuery, y lo ideal es tener sólo una:
      http://ciudadblogger.com/2011/10/jquery-sus-versiones-y-el-conflito.html

      Eliminar
    2. Maestro antes que nada gracias por tomarte el tiempo de responderme. solo tengo una version de jquery, la última, eso no seria, que otra cosa puede ser ? te dejo mi blog asi ves como pasa en las paginas que agrego http://area51designs.blogspot.com.ar/ abrazo de gol!

      Eliminar
    3. hola potro y gente de ciudad, resolvi el problema, les digo que fue por si a alguien le sirve, la plantilla base que estoy usando trae el script "s3Slider" que era el causante de mis males, asi que lo elimine y remplasare por otro, saludos y gracias por la ayuda

      Eliminar
    4. Gracias por avisar cómo lo has resuelto.
      ¡Saludos!

      Eliminar
  15. Oye potro no se puede hacer como http://ciudadblogger.com/2011/12/menu-horizontal-con-efecto-deslizante.html

    en los submenus abrir tambien submenus

    ResponderEliminar
    Respuestas
    1. Probablemente sí, sería cuestión de que combines ambos, pruebes los códigos y experimentes con ellos.

      Eliminar
    2. uf pero ayudame tu no tengo la menor idea

      Eliminar
    3. Este no lo modificaré por ahora, quizá más adelante saque uno parecido, pero si quieres probar sólo mira la parte del buscador y los estilos que tiene, para que veas si se puede incorporar a ese menú.

      Eliminar
  16. Hola potro, quise dejar esta consulta en el post de "Enmarcar y separar comentarios en Blogger" pero no me dejó.

    Agregué el enmarcado, "enumeré" los comentarios y los números les puse un fondo de color para que sobresalten (esto último también lo tomé de tu blog, pero no recuerdo de dónde LOL) pero no pude ponerle un fondo a "responder"; ¿puedes darte una vuelta a mi blog, entrar a comentarios y echarme una manita, por favor. Gracias y buena tarde.

    P.D. Tengo un banner tuyo, pero no sé si pienses que lo deformé un poco al achicarlo.

    ResponderEliminar
    Respuestas
    1. 2da. P.D. También agregué la caja de comentarios de facebook como tú me indicaste y ya esta funcionando muy bien. Gracias de nuevo.

      Eliminar
    2. Hola EL GARRICK, en esta parte se agregan los estilos a esas áreas:
      .comments .comment .comment-actions a {
      ...aquí los estilos...
      }

      Saludos y gracias por el banner.

      Eliminar
    3. Gracias a ti, potro, y por aquí andamos. Enhorabuena mi amigo.

      Eliminar
    4. Hecho está, potro, y me gusta el resultado. Por último te consulto: hay un "responder" a las respuestas que ya se hicieron y ese no obtuvo cambios, ¿hice algo mal?

      Eliminar
    5. Puede ser que para ese sea esto:
      .comments .thread-toggle {
      .....
      }


      Todavía no memorizo bien esas partes, pero ya prepararé una entrada más completa sobre ello.
      Saludos.

      Eliminar
    6. Gracias potro, te comento que los cambios los recibió "Respuestas" (la que esconde y muestra las respuestas) pero no te preocupes, ya hiciste demasiado =) y yo espero la entrada respectiva.

      Gracias de nuevo, infinitamente agradecido estoy.

      Eliminar
  17. :o Buenísimo Potro de todos los que te vi, este es el que mas me ha gustado.
    Voy a probarlo y te cuento.

    Por cierto aprovecho para comentarte lo de mi dominio Godaddy. Les mandé un ticket y por alguna razón, (la cual me parece un misterio) dicen que el el dominio "http://midiminio.com" de auto-redireccionaba a "http://midominio.com" en vez de a "http://www.midominio.com" y entraba en un buckle.
    por ese motivo nunca se podia entrar sin la WWW desde los navegadores que te comenté. Por suerte ya esta arreglado :)

    Un abrazo y gracias por doble partida !

    ResponderEliminar
  18. Perfecto Potro ha quedado estupendo y me quite mi menú de imágenes anterior. se puede montar uno similar pero vertical ?

    No quiero poner todo en el horizontal superior para que la sidebar no se me quede pobre.

    Eres un monstruo, gracias !!!

    ResponderEliminar
    Respuestas
    1. Qué bueno que se solucionó lo de tu dominio y que te ha gustado el menú :)
      En la sección de Menús hay un par de menús verticales, quizá alguno de ellos te pueda interesar, especialmente uno que está hecho con CSS, ese podrías personalizar los colores para que se vea muy similar a este.

      Buen fin de semana!

      Eliminar
  19. Muy bueno Potro!! y es muy poco decir...
    Todo tu trabajo es buenísimo y además lo compartís íntegramente, aclarando nuestras dudas, con esa paciencia tan particular, digna de un buen maestro.
    Ni hablar de todo lo que hemos mejorado y aprendido, durante estos años que llevamos siguiéndote... ávidos de ver "qué puso El Potro hoy para compartir".
    Muchas gracias amigo!!

    ResponderEliminar
    Respuestas
    1. Qué amable eres Edu, muchas gracias por tu comentario, significa mucho para mí.
      ¡Un abrazo!

      Eliminar
  20. Hola, muy buena la informacion ofrecida en este post...magnifica...
    tengo una pregunta:
    se pueden introducir en paginas jimdo pro?
    si se puede me gustaria que me digas como, te lo agradeceria un muchisimo....

    ResponderEliminar
    Respuestas
    1. No tengo idea logostudio, nunca he usado esa plataforma :/

      Eliminar
  21. hola , proto mira que quiero cambiar el color de fondo de la plantilla y el codigo de color no me da que hago

    ResponderEliminar
  22. potro disculpa que te moleste dime como poner un boton de facebook como lo tiene esta pagina www.wsonlinehd.com EL BOTON QUE QUIERO QUE ME DIGAS COMO PONER ES DONDE DICE COMPARTE ESTA WEB ES ELPRIMER BOTON

    ResponderEliminar
    Respuestas
    1. Este es el código que usan:
      <center><a name="fb_share" type="box_count" share_url="URL de la página"> &nbsp;&nbsp; Compartir Pagina En Tu Facebook&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;</a>
      <script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script></center>

      Eliminar
    2. Potro, disculpa que me entrometa: si pones este botón y ya tienes la caja de comentarios de facebook, esta última no aparece, no se ve. Acaba de sucederme.

      Eliminar
    3. Sí, porque este tipo de botones son viejos, tendrías que tener tu caja de comentarios en XFBML, tal vez así no te dé problemas.

      Eliminar
  23. Hola potro me podrias decir como le puedo agregar un pequeño detalle en donde dice buscar se veria mucho mejor si le pones una imaen pequeña de una lupa asiendo referencia de uns busqueda me podrias decir que mas le agrego

    ResponderEliminar
    Respuestas
    1. Hola Nada, ahí no se le puede agregar ya que esa es la barra de búsqueda y ahí no se agregan imágenes, lo que puedes hacer es quitar ese buscador y poner uno que sí tenga un botón, para que a ese botón le pueda poner la imagen que deseas.

      Eliminar
    2. o también podría cambiar la imagen del buscador por una que tenga la lupita ^^

      yo la modifiqué así→ http://4.bp.blogspot.com/-uZfcme6d9Bo/T6Xnjt1m_MI/AAAAAAAAEHo/TtxIJQGv3Rc/s1600/search-box.png

      y luego le agregué un "padding-left:20px;" en #Search-box...

      Eliminar
    3. Esa es una idea muy práctica :)

      Eliminar
  24. Quisiera hablar con el admin o dueño de este blog , mente maestra , Podria ser en facebook guardare todos los datos si es q no quieres que sepan quien es el dueño :)

    ResponderEliminar
    Respuestas
    1. En la página de Facebook hay una sección de mensajes ;)
      http://facebook.ciudadblogger.com

      Saludos.

      Eliminar
  25. Hola adoro tu blog. Me ha servido muhco de ayuda. Pero me gustaria saber ocmo puedo modificar el largo de blogger lo que quiero decir es que cree un plantilla para blogger pero es para un blog medio largo la cual se deve de dezplazar con el mismo (esta es la URL de la plantilla: http://i.minus.com/ib1RM7Xx5s7Jf6.jpg ) Ya aprendi como hacer que el fondo se dezplace, como modificar le ancho del blog y de las columnas solo me falta como saber que el cuerpo del blog quede mas largo. Ayuda porfavor cual es el codigo o que tengo que hacer

    ResponderEliminar
    Respuestas
    1. Hola IsDa11, el alto siempre es automático, se ajusta al contenido. Si bien puedes establecer una altura mínima, el problema sería que si tus entradas fueran largas entonces no se mostrarían completas.
      En esos casos lo que se hace (por lo que creo intentas hacer) es poner dos imágenes, una como el fondo del blog, y otra (la de abajo de la imagen) ponerla al final del blog, en el footer propiamente dicho.
      Hay varias plantillas con ese formato, podrías usar una de ellas y personalizarla con tus imágenes, por ejemplo esta:
      http://btemplates.com/2008/blogger-template-1257/

      Eliminar
  26. Saludos Potro...

    Ya coloqué este menú en mi página y quedó cool. Pero necesito que me ayudes a que el menú esté un poco más pegado al logo (cabecera) ya que hay un ancho amplio entre el logo y el menú.

    De igual forma me gustaría reducir el ancho que hay entre el menú y la parte donde inicia el slider y las imagenes. ;)

    Mil gracias de antemano.

    Ej.
    --------- Cabecera
    reducir
    --------- menú
    reducir
    ---------

    ResponderEliminar
    Respuestas
    1. Debajo de #menuWrapper { puedes poner los márgenes para acercarlo o alejarlo más a esos elementos, por ejemplo:
      #menuWrapper {
      margin-top:-40px;
      margin-bottom:-30px;


      Saludos.

      Eliminar
  27. Sin ganas de presionarte, te pregunto cuando vas a publicar las banderas olímpicas. Tengo ganas de poner los cinco anillos en mi blog.

    ResponderEliminar
    Respuestas
    1. De hecho esa entrada es la que publicaría en lugar de esta, pero... ando mal inspirado con el diseño, sólo hice una bandera, así que hasta que haga al menos unas cinco la publico ;)

      Eliminar
  28. Gracias Potro, Voy a dar otra ojeada a ver si logro hacer que se asemeje a este que realmente me encantó, por su estética y por lo practico que es.
    Buen fin de semana amigo !


    TVboricua.USA juato antes del gadged (html) que pones la barra añade tantos
    como necesites separar la barra de la cabecera. (asi lo hice yo. Espero que te sirva, saludos.

    ResponderEliminar
    Respuestas
    1. (br /) pero con los signos de mayor y menor (que en anterior mensaje no salieron.

      Eliminar
    2. y el ancho se reduce donde dice:
      .menu {
      width: 100%;
      float: left;

      Cambia el 100% hasta que se ajuste a tu gusto y necesidad.

      Eliminar
  29. ¿Se puede cambiar ese buscador por el nuestro de Adsense?

    ResponderEliminar
    Respuestas
    1. Acabo de incorporar el menu pero el buscador me aparece justo debajo de ella, que debo hacer para que aparezca bien?

      GRACIAS como siempre ;)

      Eliminar
    2. Por si quieres echarle un vistazo:

      www.androidaccion.blogspot.com

      Eliminar
    3. Parece que lo di solucionado modificando el html/javascrypt pasando el texto "" para debajo del buscador. Luego lo alineé a la derecha y punto.

      Eliminar
    4. veo que no me lo puso, lo que modifiqué fue el texto (todo junto):

      < / u l >

      y lo puse debajo del buscador en el javascrypt.

      Luego cambie el buscador por el de Google Adsense, intenté ponerlo tan bonito como estaba el original pero no lo logré.

      Un saludo

      Eliminar
    5. Pues yo lo veo bastante bien, no sé si sea el de AdSense, pero ese te ha quedado bien ahí ;)

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

    ResponderEliminar
  31. pinta muy bien el menú, que buena aportación.

    ResponderEliminar
  32. potro recientemente le agregue una tabview ami blog y no se que pasa por que tengo la barra de wibiya y un elemento de ahi no me funciona se tratar de una aplicación que enlasa las fotos de los spot a diferentes redes sociales

    yo creo que es por la barra me puedes ayudar?
    esta es la tavbiew: http://ciudadblogger.com/2011/06/tabview-para-agrupar-varios-gadgets-en.html

    y este mi blog: http://rapyvida.blogspot.mx/

    ResponderEliminar
    Respuestas
    1. Hola sune destino, deja el comentario en esa entrada que es donde corresponde el tema. De igual forma deja ahí el nombre del gadget que no te funciona para saber con exactitud cuál es.
      Saludos.

      Eliminar
  33. Hola Potro te paso este dato:Blogger nos avisa que la interfaz anterior sera retirada el próximo mes...Un pantallaso de la advertencia....http://dl.dropbox.com/u/25983078/blogger.png

    ResponderEliminar
    Respuestas
    1. Nos dieron una prórroga porque antes el aviso decía que sería en Abril, aun así ya a muchos nos aparece la nueva interfaz por defecto.

      Eliminar
  34. hola ^^
    no me sale bien, me sale como desplegado y amontonado, me pasa con todas las las barras desplegables que pruebo, ¿a que puede deberse?

    muchas gracias por adelantado ^^

    ResponderEliminar
    Respuestas
    1. Habría que verlo puesto en el blog, pero es casi seguro que sea por problemas con los estilos, ya que veo que en tu plantilla en la parte del CSS tienes códigos HTML debajo de /* Header
      Nada de eso debe ir en esa área.
      Saludos.

      Eliminar
    2. gracias ^^ voy a ver que tal me sale, ya te digo algo

      Eliminar
  35. Potro, sigo con mi web hecha desde el bloc de notas y lo estoy haciendo poniendo porcentajes para que el fondo se adapte al tamaño del ordenador, pero no sé poner una imagen de fondo que ocupe el 100% con HTML. ¿Sabrías decirme cuál sería el código que debo usar?
    www.arwix.hostoi.com
    Gracias.

    ResponderEliminar
    Respuestas
    1. En el BODY no, pero me parece que ahí puedes usar algún script, me parece que hay uno con jQuery que hace que la imagen de fondo tome el 100% de la pantalla, sólo que no recuerdo el nombre del script :/

      Eliminar
  36. Hola de nuevo,potro, te comento que tuve problemas para editar la plantilla (me marcaba un error "BX" tanto en blog principal como en los de pruebas y parece que a muchos blogueros también, según Google) así duré horas, pero se solucionó cuando por curiosidad me regresé a la interfaz anterior. Estoy trabajando muy bien así, pero parece que el mes entrante ya se hará el cambio definitivo ¿no?

    Saludos

    ResponderEliminar
    Respuestas
    1. A mí la nueva interfaz siempre me da error, pero lo peor es que desde Chrome nunca puedo cerrar su mensaje de error, tengo que ingresar nuevamente a Blogger para poder salirme de ahí. Qué miedo...

      Eliminar
  37. Hola Potro te quería hacer dos preguntas off-topic pero es que no he encontrado nada parecido. He cambiado a comentarios incrustados y tengo dos dudas:

    - Relativa al formulario, como ves en las entradas individuales hay un pequeño espacio entre el formulario y el siguiente gadget, facebook comments, se podría reducir dicho espacio?

    - Relativa a las entradas individuales. En las entradas individuales, debajo del título junto a la fecha y el autor, no viene el enlace a comentarios. En la página principal sí. Que tendría que hacer para que apareciera? Y una vez hecho como hacer para cuando hagamos click en ella caer hacia la zona de comentarios de dicha entrada. No se si me explico.

    Un abrazo Potro. Muchas gracias. Mi blog es ....mohicano

    ResponderEliminar
    Respuestas
    1. Hola Emilio,

      Mira esta entrada sobre los comentarios de Facebook, ahí verás que se indica cómo aumentar o disminuir la distancia entre los comentarios de Blogger:
      http://ciudadblogger.com/2011/12/agregar-la-caja-de-comentarios-de.html

      El enlace de comentarios únicamente se muestra en la portada u otras páginas (como de etiquetas), pero no en las entradas individuales, aun así, podrías quitarle la condicional que tiene ese código para que se muestre en todas partes:
      http://ciudadblogger.com/2010/07/cambiar-de-lugar-datos-del-post-footer.html

      Saludos.

      Eliminar
    2. Muchas gracias Potro, lo primero solucionado. Lo segundo, he quitado el condicional del post-comment-link pero no funcionó algo he hecho mal. Vienen dos post-comment-link pero el primero viene prececido de un post back link y no lo he tocado.

      Un abrazo.

      Eliminar
    3. Y otra cosa que me he dado cuenta con respecto al primer punto. Pese a cambiarle la distancia entre el cajetin de blogger y el de fb comments dependiendo del navegador se ve más lejos o más cerca. En Firefox y Chrome apenas es apreciable pero en IE9 parece volver al tamaño de inicio.

      Pd: también me he fijado que en IE9 las entradas se ve con otra resolución, no se si el texto o que...Un abrazo. Muchísimas gracias por tu tiempo Potro, que haría yo sin tí.

      Eliminar
    4. IE siempre será un problema, en cualquiera de sus versiones, y más cuando se trata de márgenes y espacios, ya que tiene una forma extraña de interpretar estas propiedades.

      Lo del enlace de comentarios, si tienes dos prueba con uno, sino surge efecto entonces prueba con el otro.
      Saludos.

      Eliminar
    5. Ya lo he resuelto también, al final, el enlace de los comentarios tenía otra propiedad y venía con el condicional. Quitado este...sin problema. Muchas gracias Potro.

      Eliminar
  38. Hola potro, excelentes tus trucos y herramientas, una pregunta, se puede hacer un sub sub menú?.. Me explico, una pestaña 5.1.1? He tratado de hacerlo con los "ul y li" pero no he conseguido el como.. Muchas gracias de antemano!

    ResponderEliminar
    Respuestas
    1. Hola José Capelo, habría que modificar gran parte de los estilos del menú y su estructura, quizá después publique uno con esas características.

      Eliminar
    2. Ahh.. Vale vale, lo estaré esperando entonces si es posible realizar uno así :D .. Muchas gracias

      Eliminar
  39. Hola!!! no sabia donde hacerte una pregunta...así que aquí me he metido,a ver si me puedes ayudar por favor!!!
    yo quería poner las famosas étiquetas en mi blog,pero no me deja,no se, si será por culpa de la plantilla (se dice así)? serías tan amable de ayudarme??mil gracias.Bss apretaos!!!!

    ResponderEliminar
    Respuestas
    1. Hola cristall, en la sección de Diseño haz click sobre Entradas del blog, ahí puedes marcar la casilla para que aparezcan las etiquetas. Sino apareciera entonces tendrás que añadir el código de las etiquetas en tu plantilla:
      http://ciudadblogger.com/2010/07/cambiar-de-lugar-datos-del-post-footer.html

      Saludos :)

      Eliminar
  40. Muchas gracias Potro!!! lo sigo intentando,pero de momento como mucho he conseguido poner etiquetas (48) y de ahi no salgo,no se ve mas nada,el caso es que selecciono todas y despues me sale eso,bueno...seguiré intentándolo,Gracias y perdona las molestias.Bss apretaos!!!

    ResponderEliminar
    Respuestas
    1. Quizá entonces haga falta poner bien el código en tu plantilla, mira aquí, ahí está el código perteneciente a esa área:
      http://ciudadblogger.com/2010/07/cambiar-de-lugar-datos-del-post-footer.html

      Eliminar
  41. Hola, me gustaria colocar la barra estilo Wibiya en la parte inferior de la pagina y que los sub-menus se deslicen hacia arriba, como le cambio la posion y las demas opciones

    ResponderEliminar
    Respuestas
    1. Cambiarlo de posición sí puedes, pero que los menús se desplacen de esa forma no, es más complicado.
      Si te interesa tener una barra (aunque no tenga menú) puedes ver esta opción, tal vez te interese:
      http://ciudadblogger.com/2010/11/barra-de-herramientas-flotante-con.html

      Eliminar
  42. Muchisimas gracias Potro!!! me da vergÜenza decirlo,pero en realidad era más fácil de lo que parece,es que no las clasificaba,eso fué todo,por fin lo consegui.Muchas gracias,eres muy amable!!!
    Por cierto te sigo...aun que sea en silencio.Bss apretaos!!!

    ResponderEliminar
    Respuestas
    1. No hay por qué sentir vergüenza, todos aprendemos poco a poco ;)

      Eliminar
  43. Hola potro!
    De antemano te doy las gracias, pues casi todo lo que he puesto en el blog es gracias a ti.
    Ya coloque este menu y ya segui los pasos que mencionas antes(en la otra entrada), ya que mi plantilla es del diseñador de blogger Jason morrow, lo raro es que no me aparece el efecto redondeado en las esquinas del menu y tampoco la parte que rodea el buscador, esto me pasa en Chrome y en el IE, lo probe en el opera y si se ve bien! Que podrá ser...?
    mi blog: http://lacuartad.blogspot.com

    ResponderEliminar
    Respuestas
    1. Hola mkal, es por el comentario que has puesto justo arriba de los estilos, ese tipo de comentarios no se deben poner en la parte CSS. Mira aquí para que veas a qué me refiero:
      http://ciudadblogger.com/2011/07/errores-comunes-al-poner-los-codigos.html

      Eliminar
    2. Excelente Potro se corrigio el problema! solo habia leido html y bueno ya vi lo que puede hacerse en hojas de estilos, ahora me dieron ganas de saber mas sobre ello, gracias por la respuestas y por todo lo que nos ayudas a los que iniciamos en esto. ;D

      Eliminar
    3. Es un placer poder ayudarte. Saludos.

      Eliminar
  44. Hola, tengo un problema con este menu y es que no se ajusta comoyo quiero el buscador me sale sin el estilo del menu y no me alen redondeados. Dejo mi pagina para ver si me pudieses ayudar

    Saludos

    http://jgc-phoenix.blogspot.com.es/

    ResponderEliminar
    Respuestas
    1. Hola JGC-Phoenix, podría ser porque tienes esto en los estilos:
      -----aquí edité---

      Eliminar
    2. Muchas gracias ahora sí que me va bien. Sigo tu blogg y gracias por ayudar a los más torpes como yo.

      Eliminar
  45. Muy buenas Potro,

    Me gustaría ajustar el ancho del menú para que llegara al final del Blog (principamente falla por la parte izquierda).

    Y ya de paso si no te importa decirme como mover lo de "Edión Rápida" del post-footer a al lado de "Comentarios". Yo lo he intentado por mi cuenta, pero me da error una vez que hago la Vista previa. Me refiero al pincel que sale para editar de forma rápida sin ir al Panel de Administración.

    Mi blog es esté: http://www.guildwars2-hispano.com/

    ¡Muchas gracias de antemano!

    ResponderEliminar
    Respuestas
    1. Cámbiale el ancho al #menuWrapper, ponle un 103%, y debajo de eso pon un margen izquierdo:
      margin-left: -15px;
      Este es el código del lápiz de edición, para que lo pongas donde desees:
      <b:include data='post' name='postQuickEdit'/>

      Saludos.

      Eliminar
  46. Y ya de paso Potro, si me puedes ayudar a cambiar la fecha de los post a debajo del título de la Entrada, como tengo el resto de cosas, pues perfecto ^^.

    Gracias por tu trabajo!! ^.^"

    ResponderEliminar
    Respuestas
    1. Debajo del título no veo ninguna fecha, pero el formato de la misma se cambia desde la configuración del blog.

      Eliminar
  47. Potro, agradezco profundamente tu Blog y puedo decirte que el 100% de las cosas que he puesto en marcha en el mio, las he sacado de tu sitio... Sin embargo, tengo una duda, tengo el menú en pestañas clásico, pero en la ultima pestaña, me gustaría hacer subpestañas (Útiles Kinésicos)como puedo hacerlo sin estropear lo que ya esta hecho? Para que me entiendas un poco mejor, puedes visitar www.horalibre.cl o www.kinemet.blogspot.com Agradezco profundamente tu tiempo. Atte

    ResponderEliminar
  48. Potro, agradezco profundamente tu ayuda y puedo decirte que el 100% del montaje de mi blog lo realice gracias al tuyo, si embargo tengo una duda, tengo el menú de pestañas clásico, pero quisiera a la ultima pestaña, añadir subpestañas sin alterar todo lo que ya esta hecho... Como puedo hacerlo? Si quieres comprender un poco mas, puedes visitarme en www.horalibre.cl o www.kinemet.blogspot.com Muchísimas gracias por tu tiempo.

    ResponderEliminar
  49. Potro, no se si recibiste mi pregunta!

    ResponderEliminar
    Respuestas
    1. Recibido, es sólo que los comentarios se están moderando ;)
      A ese menú no será sencillo ponerle esa característica, será mejor que quites ese menú y pongas uno que ya tenga subpestañas, por ejemplo este, que es bastante sencillo:
      http://ciudadblogger.com/2010/07/menu-horizontal-drop-and-down-con-css.html

      Eliminar
  50. Me refiero a si me puedes ayudar a mover la Fecha a debajo de: "div class='post-header-line-1" y que tenga el mismo formato que lo demás ("Publicado por", "Comentarios" etc), desde el blog sólo me deja cambiar el color, no el tamaño ni la letra de la fecha. Y tampoco me deja moverla a debajo del título. Si me puedes ayudar perfect.

    Y aparte de los iconos que nos has enseñado para poner la fecha tipo Calendario, se podría hacer con otros iconos? o tendría que ser con esos.

    Muchas gracias!

    ResponderEliminar
    Respuestas
    1. El código de la fecha es este:
      <b:if cond='data:post.dateHeader'>
      <h2 class='date-header'><span><data:post.dateHeader/></span></h2>
      </b:if>

      Ese lo puedes mover donde quieras, quizá tengas dos así que si con uno no ves cambios hazlo con el otro.

      Los estilos para la fecha son así:
      h2.date-header {
      .....
      ....
      ....
      }

      Eliminar
  51. Por cierto potro, he hecho lo que me has dicho en el blog. El margen izquierdo se ha ajustado bien. Pero el derecho no. Ni poniendo 101%, 102%, ni 103% en lo del ancho del menu, unos se pasan y otros se quedan cortos, ahora por ejemplo tiene un 102% sino recuerdo mal: http://www.guildwars2-hispano.com/

    Y ya de paso comentarte. E conseguido mover lo del "quick edit pencil" (muchas gracias!!), pero ahora veo como un hueco un poco grande entre "Acerca del Autor" (Mis datos), y lo que es la línea final del post en concreto.

    Muchas gracias por todo, se agradece en serio. Perdona por ser tan pesado :(. Saludos!

    ResponderEliminar
    Respuestas
    1. Si en porcentaje no te gusta el resultado entonces establece el ancho en pixeles. Por ejemplo:
      1000px

      Por lo otro no te preocupes, que el lápiz sólo lo ves tú, nadie más.
      Saludos.

      Eliminar
    2. Mil gracias, Potro! He conseguido cambiar todo :D

      Nos vemos por aquí.

      Eliminar
  52. Bueno, ya que estamos una dudilla Potro, podría quitar los boones de debajo de la entrada (enviar correo, google plus, facebook) y sustituirlos por algún tipo de botones sociales más atractivos?

    ResponderEliminar
    Respuestas
    1. Entra en Diseño, click en Entradas del blog, ahí puedes desactivarlos, ya que los quieres puedes poner los que quieras.

      Eliminar
  53. bueno potro creo que me he equibocado en algo puesto que hice el primer post para menus con pestañas y me ha quedado de esta forma anyelogonzalez.blogspot.com :( algo abre echo mal y luego quiero hacer este menu con buscador incluido ojala me puedas echar una mano...

    ResponderEliminar
  54. en teoria ese esa es la barra con sub menus :( pero queda fea yo la quiero horizontal asi como se ve en tu blog de demo la barra de paginas la mobi para ver si funcionaba pero no :( pero nada si no me funciona me gustaria saber como podria volver a la barra de paginas normal... yo hice los pasos de la otra entrada para menus con subpestañas

    ResponderEliminar
    Respuestas
    1. Es porque en esta parte de tus estilos eliminaste una llave de cierre:
      #navbar { height:0px; visibility:hidden; display:none; }.post-title {
      text-shadow: #3374AB 10px -10px 2px;
      filter: Shadow(Color=#999999, Direction=135, Strength=5);
      height: 1%;
      .QOverlay {
      background-color: #000000; /* Color de la pantalla mientras carga */
      z-index: 9999;
      }

      Así que nada de lo pongas debajo se verá bien:
      http://ciudadblogger.com/2011/07/errores-comunes-al-poner-los-codigos.html

      Eliminar
  55. Estimado... Quiero agradecerte por la ayuda, me recomendaste otro menú, pero persevere con este y logre modificarlo para que quedara como yo quería... Un gran abrazo y muy agradecido por entregar tus conocimientos de manera gratuita y tan ordenado. Atte

    ResponderEliminar
  56. Potro, el del comentario "Buscado siembra" era yo mismo, te quería agradecer públicamente, me recomendaste instalar otro menú pero persevere con este y logre modificarlo como yo quería, agradezco profundamente tus ganas de compartir de manera desinteresada tus conocimientos. Un gran abrazo y considerarme tu seguidor.

    ResponderEliminar
  57. Hola Potro,

    Una duda, quiero añadir subpestañas a las subpestañas pero no se me ve...

    Se que debo editar el css pero no doy con ello

    Muy buenos tus consejos.

    Un saludo

    ResponderEliminar
    Respuestas
    1. Guíate de algún otro menú con esas características, por ejemplo este:
      http://ciudadblogger.com/2010/07/menu-horizontal-drop-and-down-con-css.html

      Eliminar
  58. potro entonces que puedo hacer para devolver los estilos normales tal cual como estaba antes...

    ResponderEliminar
  59. potro como puedo arreglarlo para que quede como estaba antes... es decir solo con el menu de paginas estaticas... ayuda :C

    ResponderEliminar
    Respuestas
    1. No sé a qué te refieres Anyelo. Si es en cuanto a este menú en el otro comentario más arriba te he puesto cuál es el código que tienes mal, y el enlace a una entrada donde entenderás más sobre el problema.

      Eliminar
  60. Desde que he llegado a esta pagina, no paro de llevarme material! Eres un Crack El Potro, cada día mi blog se va pareciendo a un blog! Gracias Genio!

    ResponderEliminar
  61. Potro, ¿Por qué en mi blog sale un simbolo < en mitad del menú? Mi blog es http://www.vvalcoi.com

    ResponderEliminar
  62. Hola!
    He instalado el menu pero cuando lo pongo debajo de la cabecera de ja de funcionar..... Desaparecen todas las pestañas.... ¿Como puedo hacer para que me aparezca correctamente porque si lo pongo sobre la entrada o en un lateral funciona?
    Mi Blog es http://ashaiawechsler.blogspot.com.es
    Muchas Gracias

    ResponderEliminar
    Respuestas
    1. Hola Ashaia, elimina todos los class='tabs' que tengas en tu plantilla.

      Eliminar
    2. Ah!!!!! Perfecto!!! Muchas gracias eres fantástico!

      Eliminar
  63. Hola Potro,
    Disculpa la molestia pero unos amigos y yo hemos empezado un nuevo proyecto en un blog (una plataforma) y nos gustaría saber como podríamos poner subsecciones a la subsecciones del menú. ¿podrías ayudarnos? Muchísimas Gracias, por cierto, tu blog es magnífico.
    Puedes ver el nuestro aquí si te sirve: http://n69blog.blogspot.com.es/

    ResponderEliminar
    Respuestas
    1. A este menú no Fluvio, pero si miras en la categoría de Menús encontrarás un menú que tí tiene esa característica.

      Eliminar
    2. Siento ser cargante, de veras pero ¿Podrías decirme exactamente que código debería añadir? el código que tengo (creo que CSS) para el menú es este:

      #navigation{
      width:980px;
      height:40px;
      display:block;
      padding:0;
      margin:0 0 22px 0;
      }

      #menu{
      float:left;
      width:740px;
      height:40px;
      display:block;
      padding:0;
      margin:0;
      }

      #menu ul{
      float:left;
      margin:0;
      padding:0;
      }

      #menu li{
      float:left;
      list-style:none;
      line-height:40px;
      margin:0;
      padding:0
      }

      #menu li a, #menu li a:link{
      color:#fff;
      display:block;
      margin:0;
      padding:0 10px;
      }

      #menu li a:hover, #menu li a:active, #menu .current_page_item a {
      color:#fff;
      padding:0 10px;
      }

      #menu li li a, #menu li li a:link, #menu li li a:visited{
      font-size: 12px;
      background: #1a1a1a;
      color: #fff;
      width: 150px;
      margin: 0;
      padding: 0px 10px;
      line-height:30px;
      position: relative;
      }

      #menu li li a:hover, #menu li li a:active {
      background: #333;
      color: #fff;
      }

      #menu li li li a, #menu li li li a:link, #menu li li li a:visited{
      font-size: 12px;
      background: #1a1a1a;
      color: #fff;
      width: 150px;
      margin: 0;
      padding: 0px 10px;
      line-height:30px;
      position: relative;
      }

      #menu li li li a:hover, #menu li li li a:active {
      background: #333;
      color: #fff;
      }

      #menu li ul{
      z-index:9999;
      position:absolute;
      left:-999em;
      height:auto;
      width:170px;
      margin:0px;
      padding:0px
      }

      #menu li:hover ul, #menu li li:hover ul, #menu li li li:hover ul, #menu li.sfhover ul, #topmenu li li.sfhover ul, #topmenu li li li.sfhover ul{
      left:auto
      }

      #menu li:hover, #menu li.sfhover{
      position:static
      }

      Pero solo me cubre una subsección ¿podrías decirme cual sería el código para que cubra la segunda? Disculpa las molestias, de veras.
      Por cierto, quisiéramos añadir un enlace a tu blog en nuestra página "Blogs amigos" ¿Tendrías algún inconveniente?
      Muchas gracias.

      Eliminar
    3. Lo siento Fluvio, pero si hago eso tendría que hacerle un menú específico a cada uno y no tengo el tiempo para ello, espero me comprendas.
      Saludos.

      Eliminar
  64. Hola Potro!
    Otra dudita.
    Si entras en mi blog (www.elsindromedewillyfog.com), veras que en este menu que he puesto tal y como explicas aqui, salen como unas rayitas blancas encima del menu, se pueden quitar poniendo algun borde?
    porque el fondo del blog es negro, y claro esas rayitas al ser blancuchas se ven.
    puedes ayudarme?
    gracias!

    ResponderEliminar
    Respuestas
    1. Hola, para eliminar esos bordes en el menú busca y elimina esta parte en tu plantilla:

      .widget ul li, .widget #ArchiveList ul.flat li {
      border-top: dashed 1px #ccc;
      border-top: dashed 1px rgba(128, 128, 128, .5);
      }

      Eliminar
    2. Muchisimas gracias!!
      Ahora si que se ve bien!

      Eliminar
  65. Hola potro, tengo una pequeña consulta...
    En mi blog tengo un slide debajo del header, y cuando abro las subsecciones del menú, éstas se ven debajo del slide =/
    ¿Cómo hago para que se superpongan?

    aquí un blog de pruebas: http://asconfessions.blogspot.com.ar/

    ResponderEliminar
  66. Potro, ya lo solucioné ^^ era cuestión de cambiarle el z-index del tabs-outer... yo lo intentaba en los estilos del menú por eso nunca se arreglaba xD

    ResponderEliminar
  67. Muy buenas Maestro.

    Apliqué tu menú en el blog que estoy haciendo para mis alumnos y me lleva de cabeza:

    http://tallerdemodelosuji.blogspot.com.es/


    Soy novato en esto de los blogs y llevo todo el día horas intentando ajustar la botonera y no tengo manera.
    No consigo nada.
    Me sale el desplegable hacia abajo de diferente tamaño al botón ppal del curso. Descuadrado totalmente.
    Aparte salen las casillas con un punto negro a la derecha del "curso 2011-2012", que tampoco tengo idea de porque aparecen.

    ¿En qué partes del código están los errores?

    Ya solo me falta esto para terminar el blog, pero necesito que los alumnos puedan usarlo ya esta semana y estoy desesperado...

    Mil gracias por tu ayuda.

    ResponderEliminar
    Respuestas
    1. Hola buen día, elimina todos los class='tabs' que encuentres en tu plantilla, con eso debería verse bien el menú.
      Saludos.

      Eliminar
  68. Muy buenas Potro,

    Ayer te hice una consulta sobre el menú.
    Me surge una duda respecto a si el menú va a funcionar como necesitamos.
    La idea es ir haciendo todos los años un nuevo curso dentro del blog donde los alumnos pondrán sus proyectos organizados dentro de su grupo de la asignatura.
    Ayer hice un post de prueba y puse la etiqueta correspondiente al menú, pero la entrada no quedó dentro del apartado del menú organizado.
    ¿Este menú permite esto o es error en la etiqueta?

    Gracias de nuevo Maestro.

    ResponderEliminar
    Respuestas
    1. En cualquier menú puedes poner la URL que necesites, así que no es cuestión del menú, sino saber qué URL poner y que sea la correcta.
      Te dejo un enlace para que veas cómo obtener la URL de una etiqueta:
      http://ciudadblogger.com/2010/06/menu-de-categorias.html

      Saludos.

      Eliminar
  69. Muy buenas,

    Ya he conseguido arreglar la botonera.

    Disculpa las molestias.

    ResponderEliminar
  70. Hola Potro, hace poco andaba buscando un menú de categorias que fuera práctico para mi blog y encontré esta página con 100 menús.

    Ojalá luego puedas hacer el #32 Está genial

    Enlace: http://www.noupe.com/css/100-great-css-menu-tutorials.html

    Un saludo

    ResponderEliminar
  71. hola Potro!!

    te escribo porque no me funciona el menu.
    la verdad me gusto mucho y queria ver como hacer para que funcione.

    ya hice lo que decias en la entrada de como usar cualquier menu.

    ResponderEliminar
    Respuestas
    1. ¿A qué te refieres con que no funciona? ¿en dónde lo has puesto?

      Eliminar
    2. está debajo de la cabecera.
      con que no funciona me refiero a que solo se ve la barra del menu y el buscador. no se ven ninguna de las pestañas.

      Eliminar
    3. Elimina todos los class='tabs' que tengas en tu plantilla.

      Eliminar
  72. hola potro me gustaria pedirte una ayuda con mi menu pues no me quedo bien instalado, no salen los nombres, ni se puede dar clic aqui te dejo mi blog http://cervecerianevada.blogspot.com/ gracias

    ResponderEliminar
    Respuestas
    1. Hola Ideas, supongo que llegué tarde porque veo bien el menú, lo único que no veo es que hayas puesto los nombres de las pestañas y sus enlaces, pero fuera de eso está todo bien.

      Eliminar
  73. Hola, potro, me gustaría saber si se puede hacer más pequeño el menú???

    ResponderEliminar
    Respuestas
    1. Hola The killermario, en las anotaciones en color verde dice dónde cambiar el ancho del menú. Saludos.

      Eliminar
  74. Aiiii lo siento pero tengo otro problema ahora... ¿Me han quedado como unos cuadros extraños en las pestañas y no me deja ajustarlo en concordancia con el fondo. ¿Que código debo usar para cambiarlo y poder ajustarlo??

    Muchas gracias

    ResponderEliminar
    Respuestas
    1. ¿Te refieres a los pequeños bordes que aparecen arriba? Si es así mira el comentario #67.1

      Eliminar
    2. No, me salen unos cuadrados de un color más oscuro en las pestañas... Te dejo la dirección de mi blog para que lo veas...

      ashaiawechsler.blogspot.com

      Muchas gracias por tu ayuda y por todos los buenos consejos que das.

      Eliminar
    3. Te dejo de nuevo mi blog porque no son las rayitas superiores sino que en las pestañas, hay un cuadro de color oscuro que no se como eliminar...http://ashaiawechsler.blogspot.com/
      Muchas gracias por tu ayuda! ;)

      Eliminar
    4. Siguiendo las indicaciones de ese comentario también se deberá solucionar ;)
      Saludos.

      Eliminar
    5. Gracias, de momento solo he conseguido alinearlos, pero sigue estando el fondo de dolor oscuro en la pestaña....

      Eliminar
    6. Es porque no le has modificado el color de fondo del menú en esta parte:
      background:#333333 url(http://lh4.googleusercontent.com/-iqgCHipLGx4/T5DqLrsVALI/AAAAAAAACaI/bcIY7SV8s5I/s35/separador.gif) bottom right no-repeat;

      Eliminar
  75. Gracias Potro!!! me sirvio MUCHO

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

    ResponderEliminar
  77. Bueno..te invito a mi blog para que por favor me ayudes un poco con mi problema :( te cuento que pude hacer la barrita, quede muy a gusto con el diseno...pero tengo un grave inconveniente y es que las pestanas no despliegan :( en realidad llene solo la segunda con 3 subpestanas...y le doy click en el encabezado principal pero solo me manda al inicio....me puedes ayudar please...GRACIAS

    ResponderEliminar

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