Menú horizontal con subpestañas hecho con CSS

8 de abril de 2011 412 comentarios ,
El siguiente menú es un menú horizontal con subpestañas llamado Professional dropdown y es creado por Stu nicholls. Está hecho a base de CSS y tiene un aire de elegancia y profesionalismo con la posibilidad de agregar subpestañas dentro de las subpestañas por lo que lo hace un menú de multiniveles bastante práctico.
Puedes verlo funcionando en el ejemplo de abajo.


Aunque agregarlo al blog pueda parecer complicado la verdad es que es bastante sencillo, así que empecemos y veamos cómo se hace.

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.

Primero entramos en Diseño | Edición de HTML y antes de ]]></b:skin> pega los estilos:
#nav {
padding:0;
margin:0;
list-style:none;
height:28px;
position:relative;
z-index:500;
font-family:arial, verdana, sans-serif;
}
#nav li.top {display:block; float:left;}
#nav li a.top_link {
display:block;
float:left;
height:28px;
line-height:27px;
color:#ccc;
text-decoration:none;
font-size:11px;
font-weight:bold;
padding:0 0 0 12px;
cursor:pointer;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXWL3TOSElsafN_-S7-IG3SamxQn_tarlW0lNXFLuhyGBV4M_rFPXtBamqzjzMTJuVKsm789CJbHkxOPt5ZeShNLjqVeB3iiOSaVmUUeJ8FdJVNRqDPtTRnfJlS-9eyF5AtIY1xvCaIIj4/);
}
#nav li a.top_link span {
float:left;
display:block;
padding:0 24px 0 12px;
height:28px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXWL3TOSElsafN_-S7-IG3SamxQn_tarlW0lNXFLuhyGBV4M_rFPXtBamqzjzMTJuVKsm789CJbHkxOPt5ZeShNLjqVeB3iiOSaVmUUeJ8FdJVNRqDPtTRnfJlS-9eyF5AtIY1xvCaIIj4/) right top;
}
#nav li a.top_link span.down {
float:left;
display:block;
padding:0 24px 0 12px;
height:28px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMw964_C1T978sNmFfWu_ayItdJWR65ZwTUemGRVGyuJoSrluM3veSEbeuocYduhHH49hCiIprRnFt37xAsNAXB-PjK3V5hNqzNA2NJuM0dMPYXEnra69Z30z55cpYiOBjckA1hcu1chpx/) no-repeat right top;
}
#nav li a.top_link:hover {color:#fff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTx9msYf1je8hpuN6woUA7cD4uiep04RwgdVgpCE9D6-mW6DT4EZ-tgKril260slctiurQDHuziMUBn_0OT87qZqrh1gHdVAFqX4dnwY4ul_dvJhoFpaCtY4g9_91Thg2bKpGFdby3mlL5/) no-repeat;}
#nav li a.top_link:hover span {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTx9msYf1je8hpuN6woUA7cD4uiep04RwgdVgpCE9D6-mW6DT4EZ-tgKril260slctiurQDHuziMUBn_0OT87qZqrh1gHdVAFqX4dnwY4ul_dvJhoFpaCtY4g9_91Thg2bKpGFdby3mlL5/) no-repeat right top;}
#nav li a.top_link:hover span.down {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRsHPwMzACOeonGgNDHD2GFCSOfQK2nRTg-qgQEZIjQuKEwX0LCKORmCyVctBFslYBDihS4zJEwh-LT4H14rx8B_ccWEMoaTz3VyajtdRnY1KJu9Q_MpZAHcinQ90o_njsXNwGhPad4q9k/) no-repeat right top;}

#nav li:hover > a.top_link {color:#fff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTx9msYf1je8hpuN6woUA7cD4uiep04RwgdVgpCE9D6-mW6DT4EZ-tgKril260slctiurQDHuziMUBn_0OT87qZqrh1gHdVAFqX4dnwY4ul_dvJhoFpaCtY4g9_91Thg2bKpGFdby3mlL5/) no-repeat;}
#nav li:hover > a.top_link span {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTx9msYf1je8hpuN6woUA7cD4uiep04RwgdVgpCE9D6-mW6DT4EZ-tgKril260slctiurQDHuziMUBn_0OT87qZqrh1gHdVAFqX4dnwY4ul_dvJhoFpaCtY4g9_91Thg2bKpGFdby3mlL5/) no-repeat right top;}
#nav li:hover > a.top_link span.down {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRsHPwMzACOeonGgNDHD2GFCSOfQK2nRTg-qgQEZIjQuKEwX0LCKORmCyVctBFslYBDihS4zJEwh-LT4H14rx8B_ccWEMoaTz3VyajtdRnY1KJu9Q_MpZAHcinQ90o_njsXNwGhPad4q9k/) no-repeat right top;}

#nav li:hover {position:relative; z-index:200;}
#nav ul,
#nav li:hover ul ul,
#nav li:hover ul li:hover ul ul,
#nav li:hover ul li:hover ul li:hover ul ul,
#nav li:hover ul li:hover ul li:hover ul li:hover ul ul
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}

#nav li:hover ul.sub{
left:0;
top:28px;
background: #fff;
padding:3px;
border:1px solid #3a93d2;
white-space:nowrap;
width:90px;
height:auto;
z-index:300;
}
#nav li:hover ul.sub li{
display:block;
height:20px;
position:relative;
float:left;
width:90px;
font-weight:normal;
}
#nav li:hover ul.sub li a{
display:block;
font-size:11px;
height:20px;
width:90px;
line-height:20px;
text-indent:5px;
color:#000;
text-decoration:none;
}
#nav li ul.sub li a.fly
{background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgemrLAarIIP56Yb1q5iICyqZVgwR38h7o2tCVcwrSq1gd-JSdGQLUDOJqp0pSrI2kE1X8NVTAkYzkDlp_PjgCSoz_WBr8xxoeX0654ldVnqnmtdeS9_M3x9rrofc2NX0fTWZsRAm5bKafp/) 80px 7px no-repeat;}
#nav li:hover ul.sub li a:hover
{background:#3a93d2; color:#fff;}
#nav li:hover ul.sub li a.fly:hover
{background:#3a93d2 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPGGNaAkmwOxBxDVGuTrcxl6pTHKO3VkKVEjPUC0Sn-G-Hwi4XcYtQb9kM-jZtxkCy98zjQG1JwwFtt4m8nX33gB3bTbYlW_JETJeNYRAXUgg0J2nBz_MIolewb-ff6sDKYuDQr23f6c9H/) 80px 7px no-repeat; color:#fff;}

#nav li:hover ul li:hover > a.fly {background:#3a93d2 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPGGNaAkmwOxBxDVGuTrcxl6pTHKO3VkKVEjPUC0Sn-G-Hwi4XcYtQb9kM-jZtxkCy98zjQG1JwwFtt4m8nX33gB3bTbYlW_JETJeNYRAXUgg0J2nBz_MIolewb-ff6sDKYuDQr23f6c9H/) 80px 7px no-repeat; color:#fff;}

#nav li:hover ul li:hover ul,
#nav li:hover ul li:hover ul li:hover ul,
#nav li:hover ul li:hover ul li:hover ul li:hover ul,
#nav li:hover ul li:hover ul li:hover ul li:hover ul li:hover ul
{left:90px; top:-4px; background: #fff; padding:3px; border:1px solid #3a93d2; white-space:nowrap; width:90px; z-index:400; height:auto;}
Ahora entra en Diseño | Elementos de la página | Añadir un gadget | HTML/Javascript y ahí pega lo siguiente:
<ul id="nav">
<li class="top"><a href="URL del enlace" class="top_link"><span>Pestaña 1</span></a></li>

<li class="top"><a href="#" class="top_link"><span class="down">Pestaña 2</span></a><ul class="sub"><li><a href="#" class="fly">Pestaña 2.1</a><ul>
<li><a href="URL del enlace">Pestaña 2.1.1</a></li>
<li><a href="URL del enlace">Pestaña 2.1.2</a></li>
<li><a href="URL del enlace">Pestaña 2.1.3</a></li>
</ul>
</li>
<li class="mid"><a href="#" class="fly">Pestaña 2.2</a>
<ul>
<li><a href="URL del enlace">Pestaña 2.2.1</a></li>
<li><a href="URL del enlace">Pestaña 2.2.2</a></li>
<li><a href="URL del enlace">Pestaña 2.2.3</a></li>
<li><a href="#" class="fly">Pestaña 2.2.4</a>
<ul>
<li><a href="URL del enlace">Pestaña 2.2.4.1</a></li>
<li><a href="URL del enlace">Pestaña 2.2.4.2</a></li>
<li><a href="URL del enlace">Pestaña 2.2.4.3</a></li>
</ul>
</li>
<li><a href="URL del enlace">Pestaña 2.2.5</a></li>
<li><a href="#" class="fly">Pestaña 2.2.6</a>
<ul>
<li><a href="URL del enlace">Pestaña 2.2.6.1</a></li>
<li><a href="URL del enlace">Pestaña 2.2.6.2</a></li>
</ul>
</li>
</ul>
</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>
<li><a href="URL del enlace">Pestaña 2.5</a></li>
</ul>
</li>

<li class="top"><a href="#" class="top_link"><span class="down">Pestaña 3</span></a>
<ul class="sub">
<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 class="top"><a href="#" class="top_link"><span class="down">Pestaña 4</span></a>
<ul class="sub">
<li><a href="URL del enlace">Pestaña 4.1</a></li>
<li><a href="#" class="fly">Pestaña 4.2</a>
<ul>
<li><a href="URL del enlace">Pestaña 4.2.1</a></li>
<li><a href="URL del enlace">Pestaña 4.2.2</a></li>
<li><a href="URL del enlace">Pestaña 4.2.3</a></li>
<li><a href="URL del enlace">Pestaña 4.2.4</a></li>
<li><a href="URL del enlace">Pestaña 4.2.5</a></li>
<li><a href="URL del enlace">Pestaña 4.2.6</a></li>
</ul>
</li>
<li><a href="URL del enlace">Pestaña 4.3</a></li>
<li><a href="URL del enlace">Pestaña 4.4</a></li>
<li><a href="URL del enlace">Pestaña 4.5</a></li>
<li><a href="URL del enlace">Pestaña 4.6</a></li>
</ul>
</li>

<li class="top"><a href="#" class="top_link"><span class="down">Pestaña 5</span></a>
<ul class="sub">
<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>
</ul>
</li>

<li class="top"><a href="URL del enlace" class="top_link"><span>Pestaña 6</span></a></li>

</ul>
Ya sólo agrega la URL de los enlaces y el nombre de las pestañas donde se indica.
Si quisieras agregar otra pestaña simple sólo añade antes del último </ul> una línea como esta:
<li class="top"><a href="URL del enlace" class="top_link"><span>Pestaña</span></a></li>
Si quisieras agregar una pestaña con subpestañas entonces agrega este código:
<li class="top"><a href="#" class="top_link"><span class="down">Pestaña</span></a>
<ul class="sub">
<li><a href="URL del enlace">Sub pestaña</a></li>
<li><a href="URL del enlace">Sub pestaña</a></li>
<li><a href="URL del enlace">Sub pestaña</a></li>
</ul>
</li>
Y si quisieras que una de las subpestañas tuviera otras subpestañas entonces elimina una línea como la que está en color verde y cámbiala por un código como este:
<li><a href="#" class="fly">Sub pestaña</a>
<ul>
<li><a href="URL del enlace">Otra Sub pestaña</a></li>
<li><a href="URL del enlace">Otra Sub pestaña</a></li>
<li><a href="URL del enlace">Otra Sub pestaña</a></li>
</ul>
</li>
Y eso es todo. Como dije antes, la instalación es sencilla pero puede parecer complicado cuando se quieren agregar las subpestañas pero una vez entendiendo la estructura del menú será pan comido.
¿Y el color de fondo? El color del menú así como de las subpestañas está hecho a base de imágenes así que quien quiera cambiarle de color tendrá que editar todas las URLs de las imágenes que se encuentran en el primer código.


412 comentarios en:

" Menú horizontal con subpestañas hecho con CSS "

  1. Ufff ase mucho tiempo venia buscado un meno para mi web mira www.lockerzlatinos.com no se no habren los submenus

    ResponderEliminar
  2. por cierto quiero evitar que los links me abran en otra pestaña que abra en la misma

    ResponderEliminar
  3. que bueno, a ver si me sirve para más adelante :)

    ResponderEliminar
  4. hola potro.
    hoy queria pedirte la ayuda de como puedo crear una tabla de contacto en una entrada asi como la que tu tienes gracias

    ResponderEliminar
  5. Genial como siempre Potro, muchas gracias por enseñarnos tanto ;-) un abrazo

    ResponderEliminar
  6. (Por cierto como va lo de la revista de informática donde salio Ciudad Blogger?)

    ResponderEliminar
  7. Me lo guardo para probarlo.
    Gracias!

    ResponderEliminar
  8. :) siempre sorprendiendonos POTRO, felicidades por tus 7000 seguidores de Facebook, al fin rezpondiste la duda de ¿como poner subpestañas en las subpestañas? muy Bien

    ResponderEliminar
  9. Dreko, es por los estilos de tu plantilla, podrías solucionarlo eliminando todos los estilos desde #navBar hasta antes de #container pero quizá se suba el menú.
    Si usas el atributo target blank para que todos los enlaces de abran en otra ventana entonces mira esta entrada, al final se explica cómo identificar cualquier enlace para que pongas el atributo que hará que se abra en la misma ventana.

    ResponderEliminar
  10. We Game / Emilio, si lo necesitas ahí está ;)

    Ero-k'rlox, mira esta entrada

    MaG@S RaDioMuSiC, parece que ya el lunes me las envían :)

    ResponderEliminar
  11. Laube, gracias a ti por tu visita!

    Kron, ya me estaba mareando con esa pregunta, jajaja, pero bueno, ahí está el cómo se hace al menos para este menú :)

    ResponderEliminar
  12. QUE BACANO WOW ESTAS EN TODAS BUENO EL POTRO UNA AYUDA PARA POR EJEMPLO INHABILITAR UN LINK CON UNA ALERTA COMO LA QUE TU PUSISTE HACE UN TIEMPO EN LA SECCION CONTACTO GRACIAS

    ResponderEliminar
  13. ey Potro geniall!! me alegro mucho ;-) ya me pasarás copia para tenerla, me gustaría guardarla también, un abrazo

    ResponderEliminar
  14. bueno al parecer me tocara eliminar el menu por que no puedo eliminar los estilos xD

    ResponderEliminar
  15. Exelente Potro estaba buscando esto hace tiempos voy aver como lo agrago a mi página, estaba biendo este <a href="http://www.allblogtools.com/tricks-and-hacks/add-beautiful-drop-down-menu-for-blogger/>Menu Drop</a>, que tambien esta muy bueno lo pondre en otro pyecto que tengo, mil gracias men por tu aportes

    ResponderEliminar
  16. Fantastico Potrito de mi corazón!! Queda precioso!! Bsito a toda la city!!

    ResponderEliminar
  17. Cooolerisisisimo Potro esta chevere este Menu....

    ResponderEliminar
  18. Potro le puedo agregar submenus al menu de mi blog? http://www.poker-maestro.blogspot.com/, Un saludo

    ResponderEliminar
  19. Muy bueno el menú, gracias :)

    pd: Potro, te venía a pedir ayuda con una plantilla. Lo que pasa es que en la plantilla actual que estoy usando al presionar las "entradas antiguas" salen los post juntos, nosé explicarlo mejor, prefiero que si lo puedes ver tu mismo:

    http://shikeianime.blogspot.com/

    Te pasaste, un saludo ;)

    ResponderEliminar
  20. wow potro muchas gracias por poner el menu que te avia pedido muchas gracias hermano mi web aora luce de maravilla de lo agradesco muchas garcias saludos hermano te la debo ;).

    ResponderEliminar
  21. Ba n lei la parte donde decia que tenia que nonerlo con un gadet , no alguna forma de integrarlo con la misma pagina, ???

    ResponderEliminar
  22. Jajaja si te comprendo, nisiquiera yo entendi lo que decia xD, a ver si algun dia se me ocurre ponerlo en el blog

    ResponderEliminar
  23. Exelente Potro, muy bueno no tiene problemas con internet explorer? porque ese navegador chafa arruina mucho los trucos para blogger, y lo malo que es el mas utilizado,almenos eso dicen las estadisticas en mi blog

    ResponderEliminar
  24. kevin steven molina, me parece que lo hice con esta entrada, digo que "me parece" porque no recuerdo si le hice unas modificaciones al que yo tenía, pero si lo pondrás dentro de un elemento HTML/Javascript entonces no deberás tener problemas para ponerlo ;)

    ResponderEliminar
  25. MaG@S RaDioMuSiC, pero claro que sí, de hecho ahí tengo la "versión online" que alguien me pasó, así que si la quieres nomás me avisas ;)

    bU, por supuesto, sólo es cuestión de que ubiques en qué parte de la plantilla deseas ponerlo y ahí agregar el código. En mi opinión es mejor en un gadget pues se puede manipular más fácil pero vamos, no debería haber problema con ponerlo directo en la plantilla a menos que el área donde lo pongas tenga conflicto con los estilos u otro elemento.

    ResponderEliminar
  26. Marysil, qué bueno que te ha gustado y gracias por los besitos!

    Sergio Molina, me encantó eso de 'Cooolerisisisimo' jaja :)

    PokerPRO, lo mejor es que uses un menú que ya tenga subpestañas (como este) y adaptes el diseño al que quieres o al que ya tienes.

    ResponderEliminar
  27. Mathias, es un problema que se trae Blogger desde hace unas semanas con esos links, y muchos scripts (como el del Leer más) dejan de funcionar en esas áreas. Ya ellos están enterados del problema y han dicho hace un par de días que lo solucionarán a la brevedad, así que a esperar.


    desmer_bennington, gracias a ti por pedirlo, ya ves que a más de uno le ha gustado ;)

    Kron, si un día te animas a ponerlo nos cuentas cómo te quedó ;)

    PeliculasTube, por suerte mis lectores no usan tanto IE (al menos eso dice Analytics) pero no te preocupes que antes de publicarlo lo he probado con IE8 y no tuvo problemas, pero al igual que todo nunca está de más probar ponerlo y mirarlo en todos los navegadores pues cada plantilla de comporta de manera distinta.

    ResponderEliminar
  28. Buenos días Potro, claro que quiero tenerla de recuerdo y aparte quiero leer el artículo, así que cuando puedas por favor me la mandas ;-)

    ResponderEliminar
  29. que direccion de url pongo si lo que quiero cargar en el menu esta en mi pc?

    ResponderEliminar
  30. gracias potro de nuevo eres eficaz y rapido

    ResponderEliminar
  31. MaG@S RaDioMuSiC, vale, ya la estoy subiendo a un servidor y en cuando esté lista te mando un correo con el enlace ;)

    ResponderEliminar
  32. andrea, cualquier elemento que quieras cargar en el menú debe estar primero en Internet y no sólo en tu PC para que pueda estar al alcance de todo mundo.
    Si se trata de una imagen, necesitas primero subirla a un hosting, hay varios de ellos y varias formas de subirlos, pero para que no te sea complicado te dejo en enlace que explica cómo se suben archivos y fotos a Google Sites:
    http://ciudadblogger.com/2011/01/como-subir-archivos-en-google-sites.html

    Ya que tengas la URL de la imagen entonces la colocas en la parte del menú que corresponde.

    Saludos.

    ResponderEliminar
  33. hola potro gracias por el menu esta bueno que digo bueno precioso. ayudame como eliminar leer mas de una plantilla ha y no es las creadas con el creador de blogger. es descaga mi blog es pavas famosas. no dejo la url por que es spam

    ResponderEliminar
  34. ¡Hola Potro! Espero que no recibas tres veces este mensaje, pero es que lo escribo lo envío y luego no lo encuentro, así que he comentado en la última entrada (antes lo hacía en una relacionada con las páginas estáticas).

    Aquí va: hace mucho tiempo de esta entrada, pero como he visto que el blog sigue muy activo y que sabes arreglar todos los problemas que surgen a los blogueros, de modo que me gustaría consultarte sobre un problema que tengo con mi nuevo blog, que es estático:

    Resulta que al entrar en la página (http://blogsintituloaun.blogspot.com) sale un mensaje de bienvenida. Esto no sería un problema si el mensaje saliese cuando entras y ya está, pero sale cada vez que, por ejemplo, haces click en una fecha del archivo o en una etiqueta, y hay que volver a hacer click en entradas. Esto me da miedo por que igual a los visitantes no se les ocurre hacer eso, y no saben qué pasa cuando "no pueden ver" las entradas con la etiqueta que estaban buscando.

    Y bueno, se me ocurren dos soluciones: quitar el mensaje del todo y que salga de primera las entradas, o bien, ponerlo solo para la dirección principal del blog.

    ¡Muchas gracias de antemano!
    Saludos.

    Posdata:
    La plantilla inicial era esta: http://www.blogskins.com/info/266046
    (Se descarga abajo en "Actions - Blogger main")

    ResponderEliminar
  35. ¡Hola Potro! Espero que no recibas tres veces este mensaje, pero es que lo escribo lo envío y luego no lo encuentro, así que he comentado en la última entrada (antes lo hacía en una relacionada con las páginas estáticas).

    Aquí va: hace mucho tiempo de esta entrada, pero como he visto que el blog sigue muy activo y que sabes arreglar todos los problemas que surgen a los blogueros, de modo que me gustaría consultarte sobre un problema que tengo con mi nuevo blog, que es estático:

    Resulta que al entrar en la página (http://blogsintituloaun.blogspot.com) sale un mensaje de bienvenida. Esto no sería un problema si el mensaje saliese cuando entras y ya está, pero sale cada vez que, por ejemplo, haces click en una fecha del archivo o en una etiqueta, y hay que volver a hacer click en entradas. Esto me da miedo por que igual a los visitantes no se les ocurre hacer eso, y no saben qué pasa cuando "no pueden ver" las entradas con la etiqueta que estaban buscando.

    Y bueno, se me ocurren dos soluciones: quitar el mensaje del todo y que salga de primera las entradas, o bien, ponerlo solo para la dirección principal del blog.

    ¡Muchas gracias de antemano!
    Saludos.

    Posdata:
    La plantilla inicial era esta: http://www.blogskins.com/info/266046
    (Se descarga abajo en "Actions - Blogger main")

    ResponderEliminar
  36. muchas gracias potro por tu respuesta intentare hacerlo espero que me salga bien cualquier cosa vuelvo a molestarte... tu blog esta buenisimo!!!

    ResponderEliminar
  37. Hola nueva concepcion,

    Desconozco qué método hayan usado en la plantilla que usas pues hay diferentes técnicas para agregar el leer más, pero si es el más común entonces mira esta entrada:
    http://ciudadblogger.com/2010/03/leer-mas-automatico-con-imagenes-en.html

    Mira si el script que se agrega lo tiene tu plantilla y elimínalo..
    Saludos.

    ResponderEliminar
  38. Hola Klara Bonilla,

    Por alguna razón tu comentario se fue a la bandeja de SPAM y por eso no aparecía. De cualquier forma mira la otra entrada donde habías dejado el primer comentario inicialmente pues ayer te respondí ahí.

    Saludos!

    ResponderEliminar
  39. claro, Potro cuando lo utilize aviso para presumir jajaja

    ResponderEliminar
  40. perdon pero sigo si entender bueno subi mis fotos a google sites ahora son como 20 fotos que url pongo las pongo todas? por favor si podrias explicarme paso a paso lo del menu te lo agradeceria hace 15 dias que busco info para hacerlo... otra cosa una vez que cree en el menu la pestaña imagenes luego no puedo agregar mas fotos dentro de esa pestaña?? mil disculpas por las molestias es que me estoy volviendo locajja

    ResponderEliminar
  41. Una pregunta, si yo quiero poner una pestaña para que se deslice una subpestaña, porque le tengo que poner un enlace?
    si yo no quiero enlasarlo a una direccion, solo quiero que baje la solapa con las subpestañas.
    Soy novato, ya hice todos los pasos pero las subpestañas no aparecen :S

    ResponderEliminar
  42. Andrea tienes que poner la ulr de cada foto, y puedes agregar más imagenes con este codigo <img src="Url de la imagen"/> cambias donde dice url de la imagen, por la direccion de la imagen.

    Espero que al potro no le moleste que te haya contestado

    ResponderEliminar
  43. Hola andrea,

    Si lo que quieres es que al hacer click en una pestaña puedas ver varias imágenes entonces crea una entrada como lo harías normalmente, en ella agrega las fotos que quieres, en el editor de entradas hay un icono para subir las fotos de tu computadora a la red, sólo tienes que seleccionarlas y se subirán, lo cual te ahorrará trabajo.
    Cuando agregues todas las fotos que quieras publica la entrada y entra a ella, arriba del navegador verás en la barra de direcciones una dirección Web (URL), copia esa URL y esa será la que pongas en el menú donde dice 'URL del enlace'.

    Cuando quieras agregar más imágenes a esa entrada sólo edita la entrada y agrega o elimina las fotos que quieras.

    P.d. como ya te he respondido aquí ya no lo haré en la otra entrada donde dejaste la misma pregunta ;)

    Saludos.

    ResponderEliminar
  44. Hola Casa MECCIA,

    Tienes toda la razón, fue un error mío. Ahí en lugar de poner la URL de algún enlace pon un signo de gato #

    Respecto a que no se despliegan es porque en los pasos de la otra entrada que tienes que seguir has cometido un pequeño error.
    Agregaste este código:
    /* ul {z-index: 200; padding:0 !important;}
    li:hover {position:relative;}
    #crosscol ul li {padding:0 !important;} */

    Y debe ser sólo así:
    ul {z-index: 200; padding:0 !important;}
    li:hover {position:relative;}
    #crosscol ul li {padding:0 !important;}

    Además de eso también has omitido un paso de esa entrada que es eliminar esta parte:
    class='tabs'

    ResponderEliminar
  45. Lo voy a intentar,,ya te contaré...saludos y gracias.

    ResponderEliminar
  46. ¡Mil gracias! Lo de class='tabs' lo había eliminado, pero volvio a aparecer no entiendo por que.

    y lo de:
    ul {z-index: 200; padding:0 !important;}
    li:hover {position:relative;}
    #crosscol ul li {padding:0 !important;}

    lo copie bien, me había fijado en la consulta de uno de los usuarios.

    Seria interesante que lo agregues a tu explicación de arriba

    Te lo vuelvo a agradecer, en serio me sirvio un monton.

    ResponderEliminar
  47. gracias potro y gracias kron voy a probar con las 2 opciones que me dieron potro gracias a tu blog pude armar el mio y sin saber nada de html es barbaro... te felicito eres un genio!!!!!!

    ResponderEliminar
  48. Gracias potro soy nueva concepcion gracias por tomarte el tiempo de responderno a todos gracias nuevamente

    ResponderEliminar
  49. Potro.. una pregunta. No tiene nada que ver con el post, pero queria preguntartelo lo mas pronto posible.

    Como hago para crear 2 Listas de Etiquetas mas?... osea , crear 2 barras mas de Categorias, porque como sabes bien vos... mi blog es de peliculas. Y tengo una sola barra de Etiquetas en donde estan los NOMBRES, AÑO y GENERO de las peliculas. Pero quisiera hacer barras diferentes en donde puedan separarse por cada una de ellas, osea.. Una barra de NOMBRES , otra de los AÑOS, y otra del GENERO. Como podria hacer eso?

    ResponderEliminar
  50. No he entendido bien, pero si te refieres al gadget de Etiquetas sólo inserta otro gadget de Etiquetas como lo harías normalmente, puedes insertar tantos gadgets de Etiquetas como desees.

    ResponderEliminar
  51. Hola! Me parece muy interesante esto de las subpestañas y quiero hacerte una pregunta para saber si serían aplicables a lo que quiero hacer. A mi me interesa dedicar una página fija del Bloc a los cursos y talleres que voy haciendo, para presentar un resumen. Como la página es fija imagino que me quedaran un taller encima de otro- no sé si puedo introducir un gadget entre curso y curso para separarlos- y la primera pregunta que te hacía, este menú horizontal con subpestañas, me serviría para linkar cada subpestaña a un curso de la misma página?

    Gracias por adelantado!
    Por si quieres mirar mi Bloc és:
    http://creixerment.blogspot.com

    ResponderEliminar
  52. Saludos Potro!

    Ante todo y para que no se me olvide, vuelvo a dejar la dirección: http://blogsintituloaun.blogspot.com

    En respuesta a tu respuesta de mi otro comentario: ¡es verdad! Qué alivio, solo me salía el mensaje todo el tiempo en Internet Explorer. Aun así me puse a tantear y a mover cosas y he acabado eliminándolo, lo que me deja más tranquila. ¡Muchas gracias!

    Peeeero, he de admitir que además de agradecer tu rápida respuesta venía con un par de dudas más. Y es que como estoy modificando todos los detallitos que no me gustaban del blog que tenía, no paran de surgirme problemitas, ahora estoy principalmente con dos:

    1. Los comentarios. Llevo unos días mirando plantillas para ver qué les pasaba, pero todo parece estar igual. En el cuerpo de la entrada puse este código, el básico: http://i.imgur.com/EEHwA.png
    (no podía poner el código, y he subido una imagen con el código.)
    Pero el enlace manda a la misma entrada. ¿Tengo que activar algo? Lo que pretendo es que el enlace me mande a una página como esta: (http://www.blogger.com/comment.g?blogID=4035875333648964649&postID=4610478854868296640), o cualquier tipo de página de comentarios.

    2. La diferencia de la visualización del blog entre Internet Explorer y Firefox. En el primero se ve bien, (supongo que por que es con el que he estado editando el blog). Pero en firefox no sale el pattern del fondo, la barra de los botones se ve finita finita, y cuando pulsas los botones de los lados (los que no cambian la dirección de la página) a veces no funcionan. Si esto no tiene solución escribiré arriba que abran Internet Explorer para ver el blog y listo.

    Bueno, ya está (creo que me he extendido demasiado, pero me da miedo no dar detalles que debería dar). Muchas gracias de antemano, y felicidades por tu web, que es buenísima, y por tus respuestas en general a los comentarios.

    ResponderEliminar
  53. Hola Joana Martínez Montabes,

    Un gadget como tal no, pero puedes agregar un separador a las entradas, sólo que este separador sería visible en todas las secciones para todas las entradas del blog:
    http://ciudadblogger.com/2010/02/poner-separadores-entre-las-entradas.html

    En cuanto a la pregunta del menú, sí, en el menú puedes enlazar cualquier página que quieras, incluso las entradas que contendrán los cursos que publicarás, sólo agrega en la URL del enlace la URL de dicha entrada y listo.

    Saludos!

    ResponderEliminar
  54. Hola Klara,

    Muchas gracias por los detalles, esos siempre ayudan y nunca estarán de más ;)

    El código con el que ejemplificas que estás añadiendo no es válido, ese tipo de códigos dejaron de existir en Blogger desde hace muchos años.
    Si el problema es que no aparece el formulario de los comentarios te recomiendo esta entrada de Oloblogger donde proporcionan los códigos a modificar para que ésta regrese a su lugar:
    http://oloblogger.blogspot.com/2009/01/problemas-con-el-formulario-de.html

    El problema con la imagen de fondo seguramente se debe a que no has cerrado correctamente el código, te ha faltado un punto y coma al final de cada línea, es decir, tienes esta parte así:

    background: url(http://i.imgur.com/4B15W.png)
    background-repeat: repeat

    Y debe ser así:
    background: url(http://i.imgur.com/4B15W.png);
    background-repeat: repeat;

    Con eso deberá verse en todos los navegadores. En cuanto a la barra de desplazamiento seguro no es compatible en todos los navegadores, al menos la barra personalizada, porque tanto en Firefox como en Chrome aparece la barra de desplazamiento normal y se puede bajar y subir perfectamente.

    Saludos.

    ResponderEliminar
  55. Hola Potro, antes de nada tengo que decirte que tienes un maravilloso blog, que hay cosas muy valiosas con las que he aprendido mucho html y mis blog ahora si que son fantásticos, además he llegado a probar tus códigos para webs.
    Pero llegando aquí, he tenido un problemilla, he hecho todo como has dicho. Lo primero puse el código ese para plantillas de bloger. Luego añadí encima de ]]> el código del que no he tocado nada. Luego edite poco a poco el 2º código. Cuando veo el blog, todo parece bien, se ve bien las pestañas, pero cuando paso por una que tiene submenus, no se despliegan, nose que puede pasar, he repetido todos los pasos y nada. Haber si me podrías ayudar.

    Otra cosita, que si inserto este código en edicion de html y tengo un código de un menu anterior, debería quitarlo para que este funcionara ¿no?

    Muchas gracias y un saludo.

    ResponderEliminar
  56. Hola Elrincóndecuartob,

    No es necesario que elimines el otro menú a menos que el otro ya no lo vayas a usar.
    Para solucionar lo de las pestañas que no se despliegan busca en tu plantilla esta línea y elimina lo que está en negrita:

    <div class='tabs' id='crosscol-overflow'>

    Saludos.

    ResponderEliminar
  57. hola el potro mi gusta un menu aver si puedes sacarlo porfa o darme el scrits que usa es en esta web
    http://fan-deanime.blogspot.com/
    donde esta #-A-D
    i E-H
    i-M mira cuando le das a uno el otro se cierra mi puedes ayuda con eso ? o como se hace

    ResponderEliminar
  58. Exactamente como ese no sé, pero este menú hace casi lo mismo, quizá sólo sea cuestión de adaptar los colores para que se vea igual.

    ResponderEliminar
  59. lo que yo kiero esque cuando das a ese el otro se cierra solo como tiene el mas o menos

    ResponderEliminar
  60. Hola. Gracias por el menú, está muy bien. Pero se queda corto, no cubre el ancho de mi página. ¿Se puede hacer que se ajuste automáticamente al ancho o algo así? Mi blog (en construcción) es:
    http://devisitaporelplaneta.blogspot.com/

    También me gustaría cambiarle el color. ¿Me puedes ayudar?

    Gracias!!

    ResponderEliminar
  61. ¡Hola otra vez!

    Muchas gracias, he solucionado lo del fondo, ya se ve bien en todos los navegadores (que tengo), y aunque los botones no funcionan más de una vez por actualización, he visto que se arregla así, actualizando, y he avisado de ello en un mensaje en el blog :).

    Y en cuanto a los comentarios, estuve mirando la entrada que de Oloblogger, y, aunque no tenía muy claro dónde ponerlo (ya que ahí dice sustituye, y no tengo a lo que sustituir, pues mi plantilla venía sin la opción de los comentarios) he probado a ponerlo donde tenía el intento de formulario (con los códigos antiguos) de antes. Pero, aun poniendo <a href (etcétera), no se convertía en un link. Estaba como letras normales. He pensado que esto podría deberse a una de estas cosas: que sea la única alusión a los comentarios que he hecho en toda la plantilla, pues tal vez las plantillas normales, en las que se sustituye de lo que hablaba la entrada, ya tienen algo en otra parte que haga que funcione este código; o bien, a que para poner la plantilla de mi blog haya tenido que poner el blog en su versión “antigua”, con una opción del panel de adminstrador (Con esto ¿Qué código de comentarios debería poner desde cero, el nuevo o el antiguo?).

    Gracias; gracias y saludos.

    ResponderEliminar
  62. XikaAnime, pues no conozco ese menú, veré si después encuentro uno igual pero no te prometo nada.


    Familia Velasco Moreno, el menú ocupa el 100% del ancho del contenedor donde se ponga, en este caso el problema con esa plantilla es que la plantilla sólo tiene destinado ese ancho para esa área, por eso se ve más reducido. En cuanto al color de fondo al final de la entrada se explica sobre ello. Saludos.


    Klara, sin duda es un problema de la plantilla mas que de la versión del blog, desgraciadamente ese es uno de los problemas con las plantillas muy personalizadas, que los diseñadores omiten muchos códigos fundamentales como en este caso que han omitido los comentarios para darle más aspecto de página Web que no interactúa con los lectores. Si no tienes el código que se menciona en Oloblogger entonces es porque sin lugar a duda han eliminado el sector de los comentarios del blog :/

    ResponderEliminar
  63. Omg, entonces ¿no lo puedo añadir yo?
    Voy a ver si lo soluciono comparando plantillas. ¡Gracias por todo!
    (Alomejor vengo con alguna dudilla más un día de estos D:)

    ResponderEliminar
  64. Pues quizá puedas añadirlo tú, depende mucho de la plantilla, algunas veces basta poner lo faltante pero otras veces eso no es suficiente pues modificar esas áreas desconfigura el diseño de la plantilla, pero si tienes un blog de pruebas quizá ahí puedas ver qué tanto se le puede hacer a la plantilla.

    Buen fin de semana!

    ResponderEliminar
  65. Que tal buen potro, de nuevo x aqui despues de unas vacaciones,, jeje. Mira, estoy implementando este menu en mi blog, pero deseo eliminar el margen q hay entre la cabecera y dicho menu (superior e izquierdo), es decir q queden pegaditos; Otra cosita: en internet explorer (8.0) los submenus quedan detras de las entradas y si quiero seleccionar uno q esta abajo se desactivan las subopciones. Aqui t dejo el enlace de una imagen q prepare xra q veas los problemas q t digo :
    http://dl.dropbox.com/u/19224571/ayuda_menu.JPG
    Mi blog es : http://jbpegasus.blogspot.com

    Gracias x tu valiosa ayuda.

    ResponderEliminar
  66. Pues de hecho debería quedar pegado a la cabecera, al menos en un blog de pruebas con la misma plantilla que usas y de inmediato se puso pegado a la cabecera ¿hiciste algún cambio en esa área?

    Para moverlo hacia la izquierda agrega en esta área lo que está en negrita:
    #nav {
    padding:0;
    margin:0;
    list-style:none;
    height:28px;
    position:relative;
    z-index:500;
    font-family:arial, verdana, sans-serif;
    margin-left:-40px;
    }

    Respecto a que se esconden quizá también es por una modificación de tu plantilla pues el menú lo he probado en IE8 y no se esconden, de hecho ya en los estilos está especificado que deben estar arriba de los demás elementos :/

    ResponderEliminar
  67. Lo olvidaba, para cambiar el ancho de los submenús busca todos los width:90px; que encuentres y cambia ese valor por otro más grande.

    ResponderEliminar
  68. Hola potro, sobre si hice algun cambio en la cabecera, bueno, puse el codigo para intercambiar cabeceras al azar, este es el link donde puse el codigo:
    http://dl.dropbox.com/u/19224571/cabeceras.txt

    Respecto a lo del margen izquierdo ya se pego a la izquierda, pero como haria para que el menu ocupe todo el ancho del blog, x q estoy probando con los botones y se bajan a la otra linea, ,,.
    Ojala me ayudes a solucionar lo del margen superior del menu y esto ultimo q t dije. Buen dia potraso...
    jbpegasus.blogspot.com

    ResponderEliminar
  69. Hola Pegasus,

    Lo del ancho parece que ya casi lo has solucionado por completo.
    Para lo del espacio superior prueba poniendo antes de ]]></b:skin> lo siguiente:

    #HTML3 h2 {margin-top:-30px;}

    ¡Buen día!

    ResponderEliminar
  70. Q tal Potro,mira siempre estoy probando mi blog con chrome e internet explorer 8(q es pesimo, y no se x q tanta la gente lo usa todavia);lo del margen superior se corrigio en chrome pero en int. explor. queda un espacio todavia;ahora, el ancho del menu no se acopla a todo el ancho del blog (queda un espacio en blanco del lado derecho), y si pongo + caracteres a una opcion del menu xra q se ensanche +, se descuadra. Como lo hago xra q encaje exacto , asi como el menu de tu blog.
    Disculpa la molestia , ,, saludos x alla.

    ResponderEliminar
  71. Pues la única opción viable para que se ocupe todo es que debajo de #nav { agregues un fondo:
    background: url(https://lh3.googleusercontent.com/_dsEG33PDaHw/TZ09RHaFbzI/AAAAAAAABTE/6p3R65Ner8s/blank.png);

    Para el margen superior entonces prueba así:
    #HTML3 h2 {margin-top:-30px; *margin-top:-50px; _margin-top:-50px;}

    ResponderEliminar
  72. potro como puedo cambiarle el color de fondo?
    gracias

    ResponderEliminar
  73. Hola Jonatan,
    Al final de la entrada se habla sobre ello.
    Saludos.

    ResponderEliminar
  74. potraso realmente muy valiosa tu ayuda,, t lo agradezco mucho. solo 2 cositas sobre el menu: el ancho del 2° submenu (web amigas) no logro adaptarlo al menu del cual se despliega. Cambie los width:90 x otros de + valor,, pero eso hace q el 1er submenu tb se ensanche a ese valor.como lo identifico en el codigo xra cambiarle solo a ese submenu.
    La otra cosita es q en Int. Explorer (8) solo puedo seleccionar hasta la segunda opcion del cualquier submenu, si bajo + se desactiva dicho submenu. a q crees q se deba.
    saludos y q tengas una buena semana santa. Se t agradece mucho.
    jbpegasus.blogspot.com

    ResponderEliminar
  75. Hola Potro no logro establecer el menu como deseo es simple. Quiero distintas pestañas generales y subpestañas de estas. Se me amontonan una sobre otra y no logro separarlas.

    Veo que las instrucciones que das son para pestañas generales, subpestañas y subpestañas de estas.
    http://franciscoadame.blogspot.com

    ResponderEliminar
  76. Hola Pegasus,

    No puedes cambiarle los valores y estilos a solo un submenú pues los submenús tienen estilos generalizados para todo el menú en sí.
    Si cambias el ancho de ese también se aplicará a todos los submenús.

    En cuanto a Internet Explorer parece que no hay arreglo pues al parecer sólo sucede con esas plantillas, yo he probado en otras plantillas y en ese navegador parecen andar bien :(

    ResponderEliminar
  77. Hola FRANCISCO,

    Recuerda que se debía eliminar todo el contenido dentro de la sección Tabs. Es decir, que debes borrar todo esto:

    .tabs-inner {
    margin: .5em 20px 0;
    padding: 0;
    }
    .tabs-inner .section {
    margin: 0;
    }
    .tabs-inner .widget ul {
    padding: 0;
    background: transparent none repeat scroll bottom;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    -goog-ms-border-radius: 0;
    border-radius: 0;
    }
    .tabs-inner .widget li {
    border: none;
    }
    .tabs-inner .widget li a {
    display: inline-block;
    padding: .5em 1em;
    margin-right: .25em;
    color: #ffffff;
    font: normal normal 15px Arial, Tahoma, Helvetica, FreeSans, sans-serif;
    -moz-border-radius: 10px 10px 0 0;
    -webkit-border-top-left-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -goog-ms-border-radius: 10px 10px 0 0;
    border-radius: 10px 10px 0 0;
    background: transparent url(http://www.blogblog.com/1kt/transparent/black50.png) repeat scroll top left;
    border-right: 1px solid transparent;
    }
    .tabs-inner .widget li:first-child a {
    padding-left: 1.25em;
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-bottomleft: 0;
    -webkit-border-top-left-radius: 10px;
    -webkit-border-bottom-left-radius: 0;
    -goog-ms-border-top-left-radius: 10px;
    -goog-ms-border-bottom-left-radius: 0;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 0;
    }
    .tabs-inner .widget li.selected a,
    .tabs-inner .widget li a:hover {
    position: relative;
    z-index: 1;
    background: transparent url(http://www.blogblog.com/1kt/transparent/white80.png) repeat scroll bottom;
    color: #336699;
    -moz-box-shadow: 0 0 3px rgba(0, 0, 0, .15);
    -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, .15);
    -goog-ms-box-shadow: 0 0 3px rgba(0, 0, 0, .15);
    box-shadow: 0 0 3px rgba(0, 0, 0, .15);
    }

    ResponderEliminar
  78. Muy bueno, los coloque en mi blog y quedo asi :
    http://fitness-actual.blogspot.com/

    Me surge una duda, como puedo ampliar el tamaño del recuadro del sub-menu ?

    Gracias

    ResponderEliminar
  79. Lo conseguí de otro modo potro mira mi blog me costo pero lo logre.
    Encontré este principio

    (El contenido de las pestañas que no van a incluir subpestañas, va incluido entre li y /li

    No me perimite mostrártelo todo

    http://franciscoadame.blogspot.com

    ResponderEliminar
  80. Taeda, para cambiar el ancho de los submenús busca todos los width:90px; que encuentres y cambia ese valor por otro más grande.


    FRANCISCO ADAME RODRIGUEZ, eso soluciona a medias el problema pues si te fijas el menú no tiene la forma del original y sólo se soluciona con las indicaciones que te mencionaba.

    ResponderEliminar
  81. Sos un grande Potro, ahora me quedo al pelo !

    Muchas gracias

    ResponderEliminar
  82. potro, estuve viendo otros blogs con este menu en int. explorer y tb tienen ese mismmo problemita d los submenus, ese explorador deja mucho q desear,,, dime y si quisiera reducir el alto de todo el menu , como seria?

    ResponderEliminar
  83. Hola de nuevo Potro:
    Oye bueno el problema que te habia comentado que pasaba con IE ya quedo solucionado convirtiendo el menú horizontal en vertical xD, pero..... no me gusta que los submenus se desplieguen hacia abajo ya que tapa los otros menús, me gustaría que fuese hacia la derecha al igual como lo hace los submenus de los submenus y que pudiera centrarse :/ osea se despliega y en lugar de que aparesca del menu para abajo a la izquiera xD sea del menú centrado a la izquierda xD y que la flechita que tienen los menús que está hacia abajo, ahora esté mirando hacia la derecha. Se que es cosa de margenes, pero ya le intenté mover a todo y no puedo =D.

    Entonces quería ver si me puedes hacer el gran favor de ayudarme =)

    Aso que me veo bien exigente :S,
    Ahí veme llevando la cuanto es para depositar lo a tu cuenta bancaria hahaha xD

    Gracias de antemano
    www.ministeriosmontegerizim.blogspot.com

    PD: Si compro un dominio .com que me lo ofrece blogspot todavía puedo seguir usando "el diseño prestablecido", "estadísticas", "creación de entradas" que .blogspot.com me ofrece??

    Saludos

    ResponderEliminar
  84. Hola de nuevo Potro:
    He cambiado todos los valores del color de la pestaña del color #3a93d2 por otro pero solo lo hace con las subpestañas y no con el general. Creo que este esta referenciado a otra url. No se lo que ocurre.
    http://franciscoadame.blogspot.com

    ResponderEliminar
  85. Pegasus, cambia todos los height:28px; por el valor que deseas, con eso se cambia la altura del menú.

    ResponderEliminar
  86. Hola Administrador,

    Prueba agregando en este fragmento lo que está en negrita:

    #nav ul,
    #nav li:hover ul ul,
    #nav li:hover ul li:hover ul ul,
    #nav li:hover ul li:hover ul li:hover ul ul,
    #nav li:hover ul li:hover ul li:hover ul li:hover ul ul
    {position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none; margin-left:135px; margin-top:-25px;}

    Sobre el dominio mira esta entrada:
    http://ciudadblogger.com/2009/10/todo-lo-que-hay-que-saber-antes-de.html

    ResponderEliminar
  87. Hola FRANCISCO,

    Las pestañas principales del menú son una imagen y tal como se menciona al final de la entrada se tienen que editar esas imágenes si se quieren cambiar de color.

    Saludos.

    ResponderEliminar
  88. ok potro, ya reduje la altura del menu a lo q yo queria, THANK YOU.
    Una pregunta: como hago xra poner un icono en la barra de direccion y en la pestaña del navegador asi como lo tienes en esta pagina.
    Saludos.

    ResponderEliminar
  89. Hola Potro:
    He editados las imágenes y solo cambian de color los textos.
    Gracias

    ResponderEliminar
  90. Pegasus, en esta entrada está la información.

    FRANCISCO, no veo que las hayas cambiado, sigo viendo las URLs originales en el código, recuerda que una vez que edites esas imágenes debes subirlas a un hosting y cambiar en el código las URLs antiguas por las nuevas que acabas de subir.

    ResponderEliminar
  91. HOLA POTRO:
    Perdona por mi torpeza.
    Logre lo que quería.
    Muchas Gracias por tu apoyo.

    http://franciscoadame.blogspot.com

    ResponderEliminar
  92. es lo q buscaba potro, t felicito x q la explicacion es muy clara,, tu pagina es la mejor q he encontrado sobre ayuda xra blogger.
    Otra pregunta: si quisiera cambiar el tipo de letra y color del texto del menu,en q parte del codigo se haria. LARGA VIDA XRA EL POTRO.

    ResponderEliminar
  93. Hola Potro:
    Por que solo son visibles los colores con el navegador Google Chrome y por otros.
    Saludos

    ResponderEliminar
  94. Pegasus, donde dice color:#ccc; se cambia el color y en font-family:arial, verdana, sans-serif; el tipo de letra.


    FRANCISCO, si subes las imágenes a Dropbox entonces recuerda que deben estar dentro de la carpeta Public:
    http://ciudadblogger.com/2010/04/como-usar-dropbox.html

    ResponderEliminar
  95. Hola potro este menu esta bueno

    Una pregunta como puedo copiar los menus de las plantillas descargadas para ponerlos en otra que no tenga menu.

    ResponderEliminar
  96. Hola Potro:

    Hice los cambios a la carpeta publica de Dropbox y cambie las nuevas URLs. El problema sigue igual. También cambie el Color 3a93d2 por el nuevo sin expandir y expandida la platilla.
    Un Saludo

    ResponderEliminar
  97. nueva concepcion, pues todo depende del menú que sea, puede ser muy complicado algunas veces porque esos menús están adaptados sólo para la estructura de esas plantillas :/


    FRANCISCO, no pues sin verlo puesto en el blog me sería imposible saber ahora dónde está el problema :(

    ResponderEliminar
  98. okk potro, voy a probrar cambiando color y fuente, sino lo dejo como sta, x q asi tambien esta chevere.

    ResponderEliminar
  99. Hola Potro:
    He vuelto a ponerlos.
    Un Saludo

    ResponderEliminar
  100. Supongo que lo estás haciendo desde la página de Drobox, si es así entonces debes elegir la opción Public link y no la opción Download file, o si lo tienes en español debes elegir la opción Copiar enlace público.

    ResponderEliminar
  101. Hola Potro:
    Una prueba de alojamiento adecuado es el mismo alojamiento. Uno de ello es
    https://dl-web.dropbox.com/get/Public/Botones%20para%20menu/%20h3%20boton%20para%20menus%20sin%20flecha.png?w=02a510bf. Este descargado de mi html del blog.
    Sin embargo he mirado el código fuente de mi blogs y estos enlaces no aparecen así sino los antiguos. No lo entiendo. Por eso no los ves el correcto.
    Un Saludo

    ResponderEliminar
  102. Pues no sé si haya habido un problema con Dropbox, yo acabo de entrar a su foro y no veo ni un tema parecido a lo que comentas.
    ¿Me puedes describir paso a paso cómo subes tus archivos y cómo obtienes su URL?

    ResponderEliminar
  103. Hola Potro:
    Muy simple entro en mi cuenta de Dropbox, y le doy opción subir archivos y selecciono cuantos deseo y le asigno la carpeta nueva que la voy a llamar. Una vez subidos pulso sobre el mismo archivo y me da su direccion en la url. Antes no sabia que tenían que estar en la carpeta de Publica. Estos me daban una url en el navegador en funcionamiento y creía que eran validos. Al decirme que tenían que ser públicos los cambie a esta carpeta por ello era el error que tenia. Ahora en las urls debe parecerer después de dropbox.com/Public/ esto significa que esta bien ubicado ademas debo estar conectado a Internet para conseguir tener acceso a ellos. Por parte del navegador Google Chrome se ven bien los cambios realizados sin embargo con los otros no. Quiere decir que están bien hechos. Esto es muy raro para mi también.
    Potro si lo deseas mandeme un correo en mi blog lo tienes.
    Un Saludo

    ResponderEliminar
  104. Ese es el problema, que para obtener su URL lo que estás haciendo es dar click sobre el elemento y copiar la URL que te da arriba en la barra de direcciones.

    La forma correcta es esta:
    Entra a tu cuenta de Dropbox, ingresa a la carpeta Public y busca el archivo que quieres sacar su URL.
    No des click sobre él, sólo pasa el cursor encima del archivo y verás que al hacerlo aparece una flecha azul en el extremo derecho.
    Da click sobre esa flechita y se abrirá un pequeño menú, ahí selecciona Copiar enlace público o Copy public link y listo, en ese momento tendrás copiada la URL que necesitas y que no te dará problemas.

    ResponderEliminar
  105. Hola Potro:
    Definitivamente todo arreglado. Eres una MAQUINA.
    MUCHAS GRACIAS POR DEDICARME TANTO TIEMPO.
    Gracias y Saludos

    ResponderEliminar
  106. Muchísimas gracias! Me ha sido muy util, y creo que ha quedado bonito además. Ahora tengo que darle el titulo a cada pestaña! Es un gusto que haya gente que comparta sus conocimientos con esta generosidad. Muchas gracias!
    Iratxe,

    ResponderEliminar
  107. El gusto es mío por tu visita y tu amable comentario :)

    ResponderEliminar
  108. Hola,
    Gracias a tus amables y generosas indicaciones he podido colocar las pestañas desplegables en un widget a la derecha del blog.
    Tengo espacio para colocar el widget (el de las pestañas) en horizontal arriba (debajo del titulo), ...y así me queda mas centradito y todo mejor. Pero tiene una pega, que las pestañas no se despliegan hacia abajo. Creo que puede ser porque queda por detras de las entradas del blog. ¿Sabes como podría solucionarlo,...y tener las pestañas en horizontal, de forma que se desplieguen perfectamente? Muchas gracias!

    ResponderEliminar
  109. Hola lurgozoa,

    Cuando se agrega un menú debajo de la cabecera en las plantillas hechas con el Diseñador de Plantillas de Blogger siempre se deben seguir primero los pasos del enlace que comento en la entrada, sin embargo, aun con eso esas plantillas tienen cierta incompatibilidad con Internet Explorer por lo que es usual que las pestañas muchas veces se muestren detrás de las entradas.

    ResponderEliminar
  110. ¿Crees entonces que no hay modo de solucionarlo verdad? (los pasos del inicio los seguí tal como indicabas),
    Bueno, muchas gracias de todas formas por todo. Hemos avanzado mucho gracias a esta guía que nos has ofrecido,
    Un abrazo,
    Iratxe

    ResponderEliminar
  111. Hola de nuevo Potro,....aunque había seguido tus instrucciones del inicio (las que están en la otra entrada) por si acaso las he revisado, y al parecer no había hecho el primer paso de borrar lo que está en b>section,...y ahora me funciona bien!!! Muchas gracias de verdad!

    Iratxe

    ResponderEliminar
  112. Qué gusto que así haya sido entonces, un pequeño error puede cambiar mucho el resultado final :)

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

    ResponderEliminar
  114. que tal Potro, he insertaado la barra de menus tal cual como se indica en esta pagina, solo que en el momento de desplegar los submenus, estos aparecen "detras" de los elementos que estab bajo la barra de menu y no me permite ejecutarlos, es como si este menu desplegable quedara debado, o los otros elementos quedaran superpuestos. He intentado muchas cosas, incluso puse la barra de menu sobre a cabecera del blog pero sigue ugual.
    Agradezco cualquier comentario o apunte Potro, mi blog es andresng.blogspot.com.
    Gracias

    ResponderEliminar
  115. Hola ANDREW,

    Las plantillas del Diseñador de Plantillas de Blogger tienen esa incompatibilidad con Internet Explorer.

    ResponderEliminar
  116. Esta Muy Bueno, voy a ver como lo edito ! ;)

    ResponderEliminar
  117. hola potro como puedo cambiar este menu en forma vertical?

    ResponderEliminar
  118. No es posible Sirius, en breve trataré de publicar algún menú que tenga subpestañas.

    ResponderEliminar
  119. Holaa! Muy bueno este menu!
    se lo he puesto al blog y todo funcionaba correctamente hasta que le he puesto subpestañas a la pestaña de "videos", y ésta ya no me despliega las subpestañas y por lo tanto no me redirije a la url que le he assignado a cada subpestaña. Se queda en la página de la pestaña anterior. como lo puedo arreglar???

    muchas gràcias!

    ResponderEliminar
  120. Recuerda que primero debes seguir los pasos de la entrada que se menciona.

    ResponderEliminar
  121. SALUDOS POTRO....

    Oye con respecto al menu que tienes aqui en esta entrada quisiera pidrte que me ayudes fijate que lo aplique a mi blog pero quiero que solo la pestaña 2 se despliege luego la pestaña 3, 4 y 5 sean iguales que la pestaña 1 y la pestaña 6 es decir que no se desplieguen, e tratado de modificar el codigo pero no me resulta me podrias decirme como hago para que quede de la manera que deseo.

    Espero tu respuesta Potro...

    ResponderEliminar
  122. Si te fijas el código de cada pestaña tiene una separación entre cada código para que identifiques a cuál pestaña corresponde cada código. Sólo elimina todo lo que hay debajo de esta línea:

    <li class="top"><a href="#" class="top_link"><span class="down">Pestaña 4</span></a>

    Hasta antes de </li>

    Te repito, en cada código verás una separación de salto de línea para que te sea fácil identificarlo.

    ResponderEliminar
  123. Gracias Potro por tu ayuda lo pondre en practica cuanto antes.

    Saludos....

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

    ResponderEliminar
  125. Hola potro.

    fijate que no puedo editar el codigo para que me quede asi como te conte que deseo y me aparesca, quisiera pedirte si me puedes ayudar a editarlo yo te lo boy a agradecer mucho, lo que deseo es que solo la pestaña 2 se despliege luego la pestaña 3, 4 y 5 sean iguales que la pestaña 1 y la pestaña 6 es decir que no se desplieguen, e tratado de modificar el codigo pero no me resulta como me mencionaste porfavor si me puedes ayudar en esto.
    de antemano muchas gracias potro

    ResponderEliminar
  126. Vale Potro, allá voy. Al final he cambiado el menú por este, pero sigo teniendo el problema de que no se como hacer que el borde derecho del menú coincida con el borde del blog.
    http://desesperatecats.blogspot.com

    ResponderEliminar
  127. Busca esta parte y debajo de ella agrega lo que está en negrita:

    #content-wrapper {
    margin-top:8px;

    ResponderEliminar
  128. potro me ayudas en poner este estilo de menu en el "Menú horizontal drop and down con CSS" unos de tus anteriores entadas y además acortar el espacio entre las cabecera y las pestañas

    ResponderEliminar
  129. Es mejor que uses este menú si es que este es el que te ha gustado. No tiene caso adaptar este estilo al otro si puedes usar cualquiera de los dos.
    En cuanto a lo de acortar el espacio necesitaría saber en cuál blog para darte las indicaciones adecuadas. ¡Saludos!

    ResponderEliminar
  130. SI LE HE USADO PERO NO LLEGAR A QUEDAR BIEN YA QUE NO NECESITO MUCHAS SUBPESTAÑAS Y MENOS PESTAÑAS DE LA SUBPESTAÑAS, SI SABES ME DIRAS CUAL ES EL PEDAZO DE HTML QUE NECESITO, PARA PONER EN EL MENU QUE TE DIJE ANTERIORMENTE.

    ResponderEliminar
  131. Cada subpestaña la puedes reconocer porque es una sola línea, si quieres menos subpestañas sólo elimina una línea por cada subpestaña que no quieras tener.

    ResponderEliminar
  132. como puedo cambiarle el color azul de fondo?? por ejemplo si le quiero meter un colo negro

    ResponderEliminar
  133. Gracias por tu esfuerzo Potro!

    Oye y para cambiar el color gris de la letra? Se debe a que es el color de la tipografía de mi blog?

    Hay forma de cambiarla?

    Saludos y muchas gracias!

    ResponderEliminar
  134. ◁--XXXDΣƧMΣЯ123XXX--▷(Ƨ77 ᄃӨMPΛПΥ ᄃЯΣЩ), al final de la entrada se explica eso.

    Antonio Saucedo, donde dice color:#ccc; puedes cambiar el color de la fuente. Gracias por tu visita!

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

    ResponderEliminar
  136. Buenas! Genial ayuda! Muchas gracias!!!!
    Ya lo incluimos en nuestro blog, y cuando termine con los ultimos detalles lo agregaremos a otro blog de viajes que tenemos.
    Modifique los colores, las URL del fondo por unas que hice yo, la fuente, el tamaño, etc, etc a mi gusto! Pero hay dos cositas que aun me tienen un poco mareado!!
    1)No logre mover la flechita del submenu (la que apunta hacia la derecha que habre otro submenu) Me quedo en medio de la palabra NUEVA ZELANDA y me gustaria saber como desplazarla hacia la derecha para que quede cerca del borde derecho y quede bien!
    Aca paso el blog www.thehugetravel2.blogspot.com y la flechita en cuestion es ITINERARIO ---> NUEVA ZELANDA. Ahi tengo otro submenu de ISLA SUR e ISLA NORTE!!

    2) En "elementos de la pagina" ingreso para editar las URL de los menus, pero hay algo que no logro hacer. Puse un link en ITINERARIO --> NUEVA ZELANDA ---> ISLA SUR y funciona perfectamente, pero por ejemplo en NUESTROS BLOGS ---> Espiritus Viajeros pongo el link de este otro, pero no encuentra la pagina ya que intenta buscar el link que he puesto "DENTRO" del blog en el cual estoy navegando! Es decir intenta buscar www.thehugetravel2.blogspot.com/www.espiritusviajeros.blogspot.com Se entiende? Resumiendo, se puede poner el enlace a una pagina externa???

    Espero no haberlos mareado mucho!!!!

    Espero me puedan ayudar!!

    Saludos

    Javier

    ResponderEliminar
  137. Hola Javier,

    Cambia esta parte:
    #nav li:hover ul.sub li a{
    display:block;
    font-size:11px;
    height:20px;
    width:auto;
    line-height:20px;
    text-indent:5px;
    color:#000;
    text-decoration:none;
    }
    #nav li ul.sub li a.fly
    {background:#CCFF66
    url(https://lh4.googleusercontent.com/_dsEG33PDaHw/TZ0rcqtIs9I/AAAAAAAABSo/DM1oojAqk5s/arrow.gif) 80px 7px no-repeat;}


    Por esta otra:
    #nav li:hover ul.sub li a{
    display:block;
    font-size:10px;
    height:20px;
    width:106px;
    line-height:20px;
    text-indent:5px;
    color:#000;
    text-decoration:none;
    }
    #nav li ul.sub li a.fly
    {background:#CCFF66
    url(https://lh4.googleusercontent.com/_dsEG33PDaHw/TZ0rcqtIs9I/AAAAAAAABSo/DM1oojAqk5s/arrow.gif) 100px 7px no-repeat;}

    Eso solucionará lo de la flecha.
    En cuanto a lo otro que mencionas, eso sucede cuando en la URL no antepones el http://
    Por lo tanto, la URL debes ponerla así:
    http://espiritusviajeros.blogspot.com

    ¡Saludos!

    ResponderEliminar
  138. Muchas gracias, Solucionado!!! Quedo buenisimo!!!

    ResponderEliminar
  139. Hola! , esta excelente tu blog y la manera en como ayudas.

    Yo hice todos los pasos, pero por alguna razón los sub-menus no despliegan y no sale el menu horizontal, sino vertical.

    Este en un blog de pruebas http://manuartesm.blogspot.com/
    alli se puede ver, espero me puedas ayudar.
    Saludos!

    ResponderEliminar
  140. Hola Manuel, entré a tu blog pero no veo que tengas puesto este menú.

    ResponderEliminar
  141. potro ahora si te escribo donde corresponde.
    Si miras el blog, vas a ver que no se despliegan las subpestañas, hasta el momento estoy tratando de ubicar bn al menu, pero las subpestañas no despliegan. Me habra falta algun codigo ?

    ResponderEliminar
  142. Gracias Torneo Morumbi. Parece que es porque has puesto el menú debajo del otro y esa ya es otra área. Prueba buscando esta línea SIN expandir artilugios y elimina lo que está en negrita:

    <b:section class='tabs' id='crosscol-overflow' showaddelement='no'/>

    ResponderEliminar
  143. perfecto potro !!!
    He visto con internet explorer este menu en algunos blog y funcionan bien.
    En mi caso el despliegue de pestañas se me va porr abajo del cuerpo de entradas, me falta retocar y agregar algo no ?
    con mozilla perfecto, con explorer el problemita que te acabo de comentar.

    ResponderEliminar
  144. Eso pasa no sólo con este menú, sino con todos los menús de subpestañas aplicados en las plantillas del Diseñador de Plantillas de Blogger. Tienen esa incompatibilidad con Internet Explorer :/

    ResponderEliminar
  145. claro, y con un poco de javasscript no se puede hacer lograr el efecto ?
    creo que asi es como funcionar en ciertas paginas, no estoy seguro. gracias potro

    ResponderEliminar
  146. No es cuestión de Javascript, sino la estructura y estilos con las que están diseñadas esas plantillas. De hecho ya ves que originalmente no están hechas para ponerles submenús y sólo con esos cambios se pueden hacer, pero aun así sigue habiendo esa incompatibilidad en IE :/

    ResponderEliminar
  147. Queda mucho mas claro, ojala algún se solucionen los problemas de incompatibilidades.
    Te agradesco la atencion. Saludos

    ResponderEliminar
  148. A ver si me podés ayudar...

    Yo no tengo tantas etiquetas, por lo que tanta subpestañas no las necesité. Me quedaron pocos 'Pestaña 1', 'Pestaña 2'... Por lo tanto separé algunas y las puse como único link, o sea sin pestañas que se despleguen. La primera vez me quedó bien, pero como el menú me quedó muy corto, es por eso que decidí en lugar de hacer un módulo con varias subpestañas, separarlas y hacer links únicos, para que me entiendas, como la Pestaña 1 del ejemplo que pususte arriba.

    El tema es que una me queda colgando y sin forma, por más que retoco el código HTML no logro que me quede como las otras. Además, algunos menús quedaron cortados, como por ejemplo el de música o 'De mi puño y letra'.

    Te pido si me podés ayudar a corregir estas imperfecciones, el blog en cuestión es http://sueniosypasteles.blogspot.com. Me doy cuenta que al aceptar me borra el último "< / u l >", por más que lo ponga y lo ponga...

    ResponderEliminar
  149. Hola Smart Girl,

    En los estilos CSS no hay mucho que hacer en cuanto a que ocupe todo el ancho pues eso depende básicamente de la cantidad de pestañas que agregues.
    Puedes ayudar a separarlo un poco para que ocupe un poco más de espacio pero no será suficiente, quizá haciendo la fuente un poco más grande también ayude.
    Cualquiera de esas dos cosas las puedes hacer en esta parte:

    #nav li a.top_link {
    display:block;
    float:left;
    height:28px;
    line-height:27px;
    color:#ccc;
    text-decoration:none;
    font-size:11px;
    font-weight:bold;
    padding:0 0 0 12px;

    El primero es el tamaño de la letra, y el 12px la separación izquierda, si la aumentas un poco, por ejemplo a 20px notarás que se hace más ancho el menú.

    Luego, los submenús puedes cambiarles el ancho para que no se vean cortos cambiando todos los width:90px; que veas.

    El último UL lo estás poniendo antes de la última que agregaste.
    Lo tienes acá:
    <li class="top"><a href=http://sueniosypasteles.blogspot.com/search/label/literatura%20inteligente class="top_link"><span>Literatura inteligente</span></a>
    </li></ul>


    <li class="top"><a href=http://sueniosypasteles.blogspot.com/search/label/notas%20especiales class="top_link"><span>Notas especiales</span></a>
    </li>

    Y debe ir acá:
    <li class="top"><a href=http://sueniosypasteles.blogspot.com/search/label/literatura%20inteligente class="top_link"><span>Literatura inteligente</span></a>
    </li>


    <li class="top"><a href=http://sueniosypasteles.blogspot.com/search/label/notas%20especiales class="top_link"><span>Notas especiales</span></a>
    </li>
    </ul>

    ResponderEliminar
  150. hola potro, que parte del codigo CSS tengo que modificar para que cuando paso el cursor por algunas de las subpestañas, no se me borre parte del titulo de las subpestañas
    se despliegan bien y se ven bien, el inconveniente es cuando pasas con el mouse por la subpestaña se borra parte del titulo
    gracias

    ResponderEliminar
  151. Hola torneosoccer,

    Veo que modificaste el ancho de la subpestaña pero sólo cambiaste una parte (width:120px;) y debe ser todos los width:90px; que encuentres.
    Pero antes, revisa y verás que tienes repetido el primer código varias veces, elimina todos los duplicados y quédate sólo con uno.

    Saludos.

    ResponderEliminar
  152. puedo poner varios de estos menus? es decir, uno de los azules y otro de otro color, se que tengo que editar las imagenes, pero se puede poner mas de un menu de estos?, si es asi que es lo que tengo que editar, supongo que lo dice nav cierto? o tengo que editar algo mas :O

    ResponderEliminar
  153. Pues de hecho a todo le tendrías que cambiar el nombre, los nav por nav2, los top por top2, los sub por sub2, etc.

    ResponderEliminar
  154. hola amigo ke tal primeramente dejame felcitarte por tu web esta muy buena, y pasando a lo del menu ya logre instalarlo en el blogger pero al pushar sobre las pestañas con submenus m bota un # y ahi se queda sabes a que se debe?? solodescargasw.blogspot.com

    ResponderEliminar
  155. jeje ya encontre la solucion en tu omentarios #143 thaks!!!

    ResponderEliminar
  156. solo que si me quedo con la siguiente duda: en IE9 al desplegarse el menu e intertar colocar el puntero en los ultimos submenus se encoge por completo todo el menu de tal forma que no me deja pulsarlos, ya intente con chroome y me anda muy bien supongo que es por incompatibilidad con el navegador sabrias algun truco para solucionarlo??

    ResponderEliminar
  157. Hola potro, primero deseo felicitarte porque tus consejos nos ayudan bastante, tu página es super, me ha ayudado bastante.
    Por otro lado deseaba hacerte una consulta. He agregado este menú desplegable, no tengo ningún problema con ello. Lo único que no se es como modificar las entradas, para que sean distintas en cada pestaña. Es decir cuando se le haga clic a la pestaña salgan entradas diferentes por cada una. Porque yo pongo entradas pero salen las mismas para todas las pestañas.

    Te agradezco de antemano por tu gran ayuda.
    Saludos

    ResponderEliminar
  158. solodescargasw, efectivamente todos los menús de subpestañas en las plantillas del Diseñador, aun cuando se les aplique ese truco siguen teniendo esa incompatibilidad con IE
    Sigo sin saber cómo solucionarlo pero en cuanto lo descubra se los comunico ;)


    CEFARB, gracias por tu comentario. Usando condicionales puedes modificar la forma como se ve el blog según donde se encuentre el usuario, incluso con ellas puedes ocultar elementos en distintas partes del blog.
    Es un poco confuso explicartelo ahora, pues todo depende de exactamente qué quieras cambiar, pero con esos dos enlaces te darás un idea más clara. Saludos.

    ResponderEliminar
  159. Hola potro pues mira cuando lo he añadido el menu no desliza como e posible.?

    te dejo el blog de prueba; http://plantilladepequemundossims.blogspot.com/

    ResponderEliminar
  160. Es por la plantilla y el lugar donde lo has puesto, ese espacio no acepta subpestañas o elementos muy altos. Si lo pones en otra parte (por ejemplo abajo) deberá funcionar.

    ResponderEliminar
  161. Potro, muchísmas gracias, ahora quedó de lujo!!!
    No fue necesario agrandar la fuente, porque al poner esa etiqueta en el lugar correspondiente, el menú quedó bien en el medio. Y las subpestañas las dupliqué a 180px y quedaron muy bien...

    Te invito a que pases y veas, sin tu ayuda no lo hubiese logrado, y de hecho no me animaba, no me gusta toquetear el HTML de la plantilla, pero valió la pena...

    http://sueniosypasteles.blogspot.com

    Gracias!!!

    ResponderEliminar
  162. Ay, no... Tengo otro problema...

    Hago click en los enlaces del menú, pero me dice que no hay entradas con esas etiquetas...

    Cuando armé el menú, copié cada enlace con el botón derecho del mouse para que no haya errores (Copiar dirección de enlace, uso Rockmelt, basado en el Chrorium).

    Qué es lo que hice mal ahora??? Por lo menos ya tengo que dejar de toquetear la plantilla, ahora es sólo el gadget HTML...

    ResponderEliminar
  163. Hola Smart Girl,

    Lo que sucede es que en las URLs no has respetado las mayúsculas, y por ese pequeño detalle puede mostrar que no hay entradas.
    Por ejemplo, en esta URL la has puesto así:
    http://sueniosypasteles.blogspot.com/search/label/thinkin%27%20U

    Y debe ser así:
    http://sueniosypasteles.blogspot.com/search/label/Thinkin%27%20U

    Como la etiqueta originalmente fue escrita con la mayúscula inicial entonces también la URL debe escribirse así.

    Saludos.

    ResponderEliminar
  164. Ahora sí... Quedó excelente...

    Me costó un poco porque al principio no tomaba los cambios porque las direcciones no estaban entre ", me tomaba de las dos primeras porque los tenían puestos, me rompí la cabeza hasta que me di cuenta que era por ese pequeño detalle...

    Ahora sí, mil gracias por tu paciencia!!!

    Un beso!!!

    ResponderEliminar
  165. Por nada, aunque haya costado trabajo lo importante es que has podido hacerlo funcionar y que se ve muy lindo en tu blog ;)

    Otro beso para ti.

    ResponderEliminar
  166. Hola desde hace tiempo! puse este menú, me podrías indicar como eliminar el espacio tan grande que hay entre el menú y la descripción del blog?. Gracias!!!

    ResponderEliminar
  167. Hola Elite Voley,

    No veo que el blog tenga una descripción disponible, supongo que te refieres al contenido del blog. Si es así agrega debajo de esta línea:
    .main-inner .columns {

    Esto:
    margin-top:-50px;

    Saludos.

    ResponderEliminar
  168. potro te hago una pregunta, yo tengo este menú. Pero me gustaria que al hacer click en un tema se me abra otra página y que en ella pueda también incorporar nube de etiqutas,u otro fondo. Me expliqué??gracias.

    ResponderEliminar
  169. Posiblemente sí te explicaste pero he sido yo el que no ha entendido. ¿Me podrías dar más detalles?

    ResponderEliminar
  170. A mi tampoco se me abren los submenus
    http://pirineoaldia.blogspot.com/
    gracias

    ResponderEliminar
  171. Veo que tienes otro menú y no este.

    ResponderEliminar
  172. Bueno, me hice un blog y me decidí por este menú.
    Me podrías explicar bien como personalizarlo?
    Al menos me gustaría arreglarle el ancho porque queda "desprolijo", mira:

    http://el-legado-eragon.blogspot.com/

    saludos!

    ResponderEliminar
  173. Eso ta lo solucione XD
    Si puedo quiero preguntarte de una todas mis dudas. Aca mi blog de nuevo

    http://el-legado-eragon.blogspot.com/

    1- ¿Como se hace para que la pestaña 1 quede a la misma altura qe las otras?

    2- ¿Como se cambia el fondo de las pestañas, sub-pestañas, y sub-sub-pestañas?

    3- ¿Como se arregla para que cuando abras subpestañas en una subpestaña quede a la misma altura? (Porque en el blog me quedan como 3 milímetros hacia arriba y queda desprolijo)

    4- Lo mismo, cuando las sub-pestañas se ramifican, como se hace para que salgan pegadas a la derecha de dodne salieron? ej este blog:
    http://theleyendoftekken.blogspot.com/

    5-¿Como se cambia el color de la letra?

    6-¿Se pueden cambiar esas líneas punteadas que separan al título de el menú y a las subpestañas entre si? Ej quedarían mejor de negro, no?

    Si me respondieras eso sería una persona felizz (Que exagerado XD)

    Muchas gracias de antemano

    ResponderEliminar
  174. PD: (perdó XD)


    Cambiar el color de la letra ya me salió, quería decirel tamaño.

    Saludos!

    ResponderEliminar
  175. Hola Sre-17,

    La primera pestaña se ve así por un borde que agrega tu plantilla a esa área. Para solucionarlo busca esta parte y añade lo que está en negrita:

    #nav li.top {display:block; float:left; border:0;}

    Los fondos son varias imágenes que están en el primer código, para cambiar el color debes editar esas imágenes y ponerles el color que quieras.
    Esos 3 mm igual debe ser por un estilo de tu plantilla, lo mismo con esos bordes punteados, no son del menú sino de tu plantilla.

    El ejemplo que pones de ese blog es de este menú:
    http://ciudadblogger.com/2009/09/menu-horizontal-con-efecto-deslizante.html

    Saludos.

    ResponderEliminar
  176. Hola! Muchas gracias por contestar. Voy a probar ese menu, si no me gusta como queda intento las cosas que me dijiste sobre este.

    Gracias de nuevo!

    ResponderEliminar
  177. Hola Potro, te he querido agradecer por el gran template que has hecho, me refiero a Nocturnus, realmente es muy elegante, muy bien pensado, gracias, y siempre estaré pendiente de tú página aunque con tanto mensaje no creo que te des abasto para leer tanto, nuevamente gracias, tal vez contigo pueda aprender a hacer mis propios templates, soy una persona que gusta de escribir, pero más el mantener mis blog elegantes y llamativos, gracias mil.

    ResponderEliminar
  178. Hola The Phantom of the opera,

    Leo todos y cada uno de los comentarios así que si un día te animas a comentar de nuevo seguramente te podré leer con mucho gusto :)
    Esa plantilla para mí es muy especial porque fue la primera que hice, así que me es grato saber que te ha gustado.
    Muchas gracias por tu amable comentario y por tomarte el tiempo para escribir.

    Saludos.

    ResponderEliminar
  179. Si no te importa te puedo hacer una pregunta que no tiene nada que ver con el menú?

    Hay alguna forma de que los videos de youtube se vean más grandes en las entradas?

    Gracias

    ResponderEliminar
  180. Hola Sre-17,

    Dentro del código del video hay dos variables, width, y height. El primero es el ancho y el segundo es el alto. Modificando esos valores puedes hacer más grande o pequeño el video.

    Saludos.

    ResponderEliminar
  181. Como se ve ese código?

    Yo pongo el signo de video, desde youtube, pongo y ya de ahí me pone "seleccionar", luego aparece la imágen, pero no veo que te en un código.

    Perdón por ser pesado XD

    ResponderEliminar
  182. Entra a YouTube y busca el video que quieras insertar, ya que estés en e video da click en el botón 'Compartir', te aparecerá un recuadro, da click en 'Insertar', ahí verás el código que debes copiar. Incluso abajo verás los tamaño del video, con sólo darle click a un tamaño se aplicará al código que copiarás.

    ResponderEliminar
  183. Ya me apareció! Tengo una cosa más: lo entendí todo hasta ahí y lo probé, lo que no se es como pasar ese código a la entrada, porque intente copiar y pegar y solo aparece el texto.

    Solo esto y te libras de mi, plis :3

    ResponderEliminar
  184. Cuando lo pegues en la entrada no verás el video en la entrada, si le das Vista Previa a la entrada entonces ahí lo verás ;)

    ResponderEliminar
  185. Es que solo me aparece el texto, mira:

    http://i.imgur.com/iWFp4.png

    ResponderEliminar
  186. Cuando pegues cualquier código en una entrada, no lo hagas en la pestaña Redactar, hazlo dentro de la pestaña Edición de HTML, de lo contrario el código podría no interpretarse, como parece ser tu caso.

    ResponderEliminar
  187. A, es que no había visto lo de edición de HTML XD
    Ya esta, muchas gracias! (Y ya de paso me enseñaste como poner videos directamente desde Youtube XD)

    Un saludo!

    ResponderEliminar
  188. Qué bueno que ya está todo bien :)
    Saludos.

    ResponderEliminar
  189. Hola Muy bueno el Post hace tiempo vengo leyendo este blog pero recien me animo a Comentar por cierto Potro podrias explicarme como hacer un menu como el de esta pagina.

    http://www.wwe-live.net/

    te lo agradeceria mucho salu2.

    ResponderEliminar
  190. Hola THe Codebreaker,

    Qué bueno que te has animado a comentar!
    No sé cómo se llame ese menú, podría ser posible que ya lo tuviera la plantilla, sería cuestión de que le preguntes al dueño del blog.
    O bien, hay uno parecido (pero no igual) que quizá te interese:

    http://ciudadblogger.com/2010/05/menu-horizontal-con-marquesina.html

    ResponderEliminar
  191. Hola Potro... Me encantó este menú y lo estoy tratando de implementar en mi blog, la cosa es que me pasa lo mismo que a los demás, tengo IE9 y al pinchar para acceder a los submenus, estos se esconden detrás de la fecha y solo deja bajar hasta la segunda opción y luego se cierra. Yo estaba mirando un blog y veo que no sucede esto, creo que es por z-index, pero yo no sé como ponerlo. El blog es
    http://mirincon-misaani.blogspot.com/
    yo no tengo idea por que traté de ver eso de codigo fuente y me quedé hasta ahí pero seguro que tu encuentras la solución... Ahhh, y gracias por el gran aporte.
    mi blog es www.marcosgratis.blogspot.com
    Saludos

    ResponderEliminar
  192. Hola Rigavimon,

    Eso sólo sucede con las plantillas hechas con el Diseñador de plantillas de Blogger, y el blog que refieres no usa ese tipo de plantillas, sino una plantilla antigua de Blogger.
    La que tú usas, tiene esa incompatibilidad con IE, y hasta la fecha sigo sin dar con una solución.

    Saludos.

    ResponderEliminar
  193. Gracias por tu pronta respuesta, me queda claro, y ahora voy a pensar si cambio la plantilla o no,es que creo que las que no vienen por defecto es más dificil personalizarlas, en fin. Te cuento que para poder comentar he tenido que crearme una id de google con correo y todo porque dice que la que ya tenia no es válida para comentar. Te dejo la inquitud. Saludos.

    ResponderEliminar
  194. Hola! hago una pregunta tonta...cual seria el URL del enlace? porque si es el del blog mismo siempre me lleva a la pagina principal, no puedo enlazar las pestañas con las entradas. Desde ya muchas gracias

    ResponderEliminar
  195. Eso sucede cuando no se pone el http:// en la dirección. Siempre que sea un enlace debe ser como:
    http://cualquierpagina.com

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

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

    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