Menú horizontal con efecto deslizante (actualizado)

25 de diciembre de 2011 702 comentarios ,
El menú horizontal con efecto deslizante, es un menú de subpestañas hecho con jQuery el cual despliega sus subpestañas con un deslizado suave, y aunque se publicó hace ya bastante tiempo, es uno de los menús de aquí que he visto que usan mucho, pues es un menú que se adapta a muchos estilos de plantilla.
Sin embargo, algunos batallan cuando quieren personalizarlo, y es que al estar alojados en un hosting tanto el script como los estilos CSS, hace que se complique para algunos poder hacerle cambios para darle ese toque personalizado.
Así que en esta entrada veremos el mismo menú, pero, esta vez no alojaremos ni el script ni los estilos en ningún servidor, todo estará dentro de la plantilla para que sea mucho más fácil hacerle cambios, además usaremos una versión más reciente de jQuery, y como pilón, ya tiene los cambios para que puedan usarlo junto con Scriptaculous y Prototype sin ningún problema.

El menú en cuestión es el siguiente:

Bien, empecemos a colocar este menú horizontal con subpestañas y efecto deslizante en el blog.

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 comenzar vamos a entrar a la Edición de HTML y agregamos antes de </head> los scripts:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[
// jQuery Multi Level CSS Menu #2- By Dynamic Drive: http://www.dynamicdrive.com/
jQuery.noConflict();
var arrowimages={down:['downarrowclass', 'http://lh4.googleusercontent.com/_dsEG33PDaHw/TaITwtLndVI/AAAAAAAABT0/mA-q3eyPYVk/Imagemenu-arrow-down.gif', 23], right:['rightarrowclass', 'http://lh3.googleusercontent.com/_dsEG33PDaHw/TaITws3Ww2I/AAAAAAAABT4/Q-8GXxpmSGs/Imagemenu-arrow-right.gif']}

var jqueryslidemenu={
animateduration: {over: 200, out: 100},
buildmenu:function(menuid, arrowsvar){
jQuery(document).ready(function(jQuery){
var jQuerymainmenu=jQuery("#"+menuid+">ul")
var jQueryheaders=jQuerymainmenu.find("ul").parent()
jQueryheaders.each(function(i){
var jQuerycurobj=jQuery(this)
var jQuerysubul=jQuery(this).find('ul:eq(0)')
this._dimensions={w:this.offsetWidth, h:this.offsetHeight, subulw:jQuerysubul.outerWidth(), subulh:jQuerysubul.outerHeight()}
this.istopheader=jQuerycurobj.parents("ul").length==1? true : false
jQuerysubul.css({top:this.istopheader? this._dimensions.h+"px" : 0})
jQuerycurobj.children("a:eq(0)").css(this.istopheader? {paddingRight: arrowsvar.down[2]} : {}).append(
'<img src="'+ (this.istopheader? arrowsvar.down[1] : arrowsvar.right[1])
+'" class="' + (this.istopheader? arrowsvar.down[0] : arrowsvar.right[0])
+ '" style="border:0;" />')
jQuerycurobj.hover(function(e){
var jQuerytargetul=jQuery(this).children("ul:eq(0)")
this._offsets={left:jQuery(this).offset().left, top:jQuery(this).offset().top}
var menuleft=this.istopheader? 0 : this._dimensions.w
menuleft=(this._offsets.left+menuleft+this._dimensions.subulw>jQuery(window).width())? (this.istopheader? -this._dimensions.subulw+this._dimensions.w : -this._dimensions.w) : menuleft
if (jQuerytargetul.queue().length<=1)
jQuerytargetul.css({left:menuleft+"px", width:this._dimensions.subulw+'px'}).slideDown(jqueryslidemenu.animateduration.over)},
function(e){
var
jQuerytargetul=jQuery(this).children("ul:eq(0)")
jQuerytargetul.slideUp(jqueryslidemenu.animateduration.out)})})
jQuerymainmenu.find("ul").css({display:'none', visibility:'visible'})})}}
jqueryslidemenu.buildmenu("myslidemenu", arrowimages)
//]]>
</script>
Luego, antes de ]]></b:skin> pega los estilos:
/* Menú horizontal deslizante
----------------------------------------------- */
.jqueryslidemenu{
background: #414141; /* Color de fondo del menú */
width: 100%;
font-weight: bold;
font-size: 12px; /* Tamaño de la letra */
font-family: Verdana; /* Tipo de letra */
}

.jqueryslidemenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}

.jqueryslidemenu ul li {
position: relative;
display: inline;
float: left;
}

.jqueryslidemenu ul li a {
display: block;
background: #414141; /* Color de las pestañas */
padding: 8px 10px;
border-right: 1px solid #778; /* Color del borde que separa las pestañas */
text-decoration: none;
}

* html .jqueryslidemenu ul li a {
display: inline-block;
}

.jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited {
color: #FFF; /* Color del texto */
}

.jqueryslidemenu ul li a:hover {
background: #000; /* Color de la pestaña al pasar el cursor */
color: #FFF; /* Color del texto al pasar el cursor */
}

.jqueryslidemenu ul li ul{
position: absolute;
left: 0;
display: block;
visibility: hidden;
}

.jqueryslidemenu ul li ul li {
display: list-item;
float: none;
}

.jqueryslidemenu ul li ul li ul {
top: 0;
}

.jqueryslidemenu ul li ul li a {
font: normal 13px Verdana;
width: 160px; /* Ancho de las subpestañas */
padding: 5px;
margin: 0;
border-top-width: 0;
border-bottom: 1px solid gray;
}

.downarrowclass{
position: absolute;
top: 12px;
right: 7px;
}

.rightarrowclass{
position: absolute;
top: 6px;
right: 5px;
}
Por último entra en Diseño | Elementos de la página | Añadir un gadget | HTML/Javascript, o si usas la nueva interfaz entra en Diseño | Añadir un gadget | HTML/Javascript. Ahí pega la estructura del menú:
<div class="jqueryslidemenu" id="myslidemenu">
<ul>
<li><a href="URL del enlace">Pestaña 1</a></li>
<li><a href="URL del enlace">Pestaña 2</a></li>
<li><a href="#">Pestaña 3</a>
<ul>
<li><a href="URL del enlace">Sub 3.1</a></li>
<li><a href="URL del enlace">Sub 3.2</a>
<ul>
<li><a href="URL del enlace">Sub 3.2.1</a></li>
<li><a href="URL del enlace">Sub 3.2.2</a></li>
<li><a href="URL del enlace">Sub 3.2.3</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="URL del enlace">Pestaña 4</a></li>
<li><a href="#">Pestaña 5</a>
<ul>
<li><a href="URL del enlace">Sub 5.1</a></li>
<li><a href="URL del enlace">Sub 5.2</a></li>
<li><a href="URL del enlace">Sub 5.3</a></li>
<li><a href="URL del enlace">Sub 5.4</a></li>
</ul>
</li>
<li><a href="URL del enlace">Pestaña 6</a></li>

</ul>

<br style='clear: left'/>
</div>
Añade las URLs de los enlaces y los nombres de las pestañas donde se indica y listo.
En color verde se señalan las áreas que pueden personalizarse, como el color de fondo, el color de los enlaces, etc.
Las flechas de las subpestañas son imágenes y pueden cambiarse en el primer código, reemplazando las URLs en color naranja.

Si quisieras añadir otra pestaña sólo agrega antes del último </ul> una línea como esta:
<li><a href="URL del enlace">Otra Pestaña</a></li>

Si quisieras agregar otra pestaña que contenga subpestañas entonces agrega igual antes de </ul> este código:
<li><a href="#">Otra pestaña</a>
<ul>
<li><a href="URL del enlace">Subpestaña 1</a></li>
<li><a href="URL del enlace">Subpestaña 2</a></li>
<li><a href="URL del enlace">Subpestaña 3</a></li>
</ul>
</li>
Y ahora sí, quienes usan este menú o quienes quieran usarlo ya no se complicarán para poder personalizar sus colores pues todo se podrá hacerse directo desde la plantilla sin necesidad de alojar nada en ninguna parte.

Este menú usa jQuery, así que si ya tienes jQuery en tu plantilla recuerda dejar sólo la versión más reciente y/o la que sea compatible con todas las aplicaciones que uses.


702 comentarios en:

" Menú horizontal con efecto deslizante (actualizado) "

  1. Muy bueno, gracias Potro por este post...! :) Saludos...! Nuevamente Feliz Navidad...! ;)

    ResponderEliminar
  2. buenisimo el menu con ese efecto deslizante

    ResponderEliminar
  3. MaGoS RaDioMuSiC, gracias a it por tu visita!

    Juvinao, qué bueno que te ha gustado :)

    MadPikachuKid, y yo el sexto :D

    ResponderEliminar
  4. Muy bueno Potro voooooy corriendo a probarlo al blog de Pruebaas!
    Saludos!

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

    ResponderEliminar
  6. ricardogot2010, gracias por pasar a comentar :)

    Eliseo Insfran, ¿verdad que sí? recuerdo que lo estuve usando hace ya bastante tiempo :)

    ResponderEliminar
  7. jaja potro si hubieras hecho esto hace unos meses que lo puse no hubiera tardado tanto configurándolo xd en fin muchas gracias ahora va a ser mas fácil xd

    ResponderEliminar
  8. Hola poyto el menu no se desliza!!

    Mi blog: www.pequemundossims.blogspot.com

    ResponderEliminar
  9. Antonio Gallego, son dos, uno es el color de fondo, y otro el color de las pestañas. Ahí en color verde dice cuáles partes son esas ;)
    En cuanto a que no se desliza, recuerda que se debe dejar sólo la última versión de jQuery para evitar esos problemas. Mira el final de la entrada.

    ResponderEliminar
  10. FINEM, si caray, pero si necesitas cambiarle los colores ya sabrás que hay un modo más fácil ;)

    SharkMen, a ti por tu visita!

    ResponderEliminar
  11. hola potro quería preguntar como hiciste lo de publicar un comentario.... Si tienes alguna.... me seria de gran ayuda

    ResponderEliminar
  12. hola potro:
    me gustaria saber como puedo poner una barra estatica en la parte superior del blog como en esta pagina goo.gl/Ujifq fijate que en la barra hay una imagen hay un buscador y luego opciones y en la ultima hay una opcion desplegable, en esta otra pagina podemos apreciar algo igual http://goo.gl/u0vT8 y ps yo e intentado de una u otra manera hacer algo igual pero es muy duro por eso recurro ati como ultimo recurso mira este es mi blog goo.gl/iCQma

    ResponderEliminar
  13. EL POTRO!!!! va a la delantera por 5 cabezas en la Blogoteca, felicidades!!!!

    ResponderEliminar
  14. Hola Pokelevel, busca esta línea:
    <h4 id='comment-post-message'><data:postCommentMsg/></h4>

    Debajo de ella agrega todo lo que quieras mostrar.
    Saludos.

    ResponderEliminar
  15. Hola Carlos Martinez,

    Hay una barra de herramientas que puedes personalizar a tu gusto. Aunque el post original es para que se muestre abajo tú puedes cambiarla arriba si lo prefieres y agregarle los elementos que quieras, incluso quitarle la opción de cerrar:
    http://ciudadblogger.com/2010/11/barra-de-herramientas-flotante-con.html

    ResponderEliminar
  16. María Elena, gracias :)
    Apenas van pocos días, esperemos que podamos mantenernos en la primera posición :)

    ResponderEliminar
  17. Si, Potro.... Creo que me volví adicto a Ciudad Blogger...! Es muy bueno..! Oh para mi es muy bueno, además porque me sirve de mucha utilidad...! Saludos!

    ResponderEliminar
  18. ps si potro esa es la ke tengo en mi blog solo que se ve mejor la otra no hay manera de crear una igual. tu eres experto en eso ayudita porfa :)

    ResponderEliminar
  19. hackloper, a ti por tu visita!

    ricardogot2010, espero que sea adicción moderada, o tendré que crear el grupo Ciudadanos Anónimos :D

    ResponderEliminar
  20. Carlos Martinez, en base a esa puedes hacer una similar, sólo es cuestión de que vayas experimentando con los estilos. Si te fijas en esa entrada verás que muchos usuarios hicieron muchas variaciones de la barra y la han dejado tal como ellos querían, pero hay que arriesgarse a probar con los estilos ;)

    ResponderEliminar
  21. Muy bueno el menu. Pero tengo un problema, es que las subpestañas del menu se ponen atras de un widget que tengo ahi, sabras de alguna forma para hacer que primero salga el menu? :S

    http://sdauun.blogspot.com/ Este es mi blog de pruebas donde he puesto el menu y el error.

    Y en que actualize el jquery dejo de funcionar mi slider en si era el que habias publicado.

    http://ciudadblogger.com/2010/10/orbit-slider-de-imagenes-con-jquery.html

    sera que luego se arregle o tengo que poner los dos llamados a los dos diferentes versiones?

    Gracias de antemano.

    ResponderEliminar
  22. Hola potro tengo la ultima version de jquerry...
    ¿que hago?

    ResponderEliminar
  23. BlackDawn, si el Orbit no te funciona con esta versión de jQuery entonces quita esta versión y pon la que tra el Orbit, con esa deberán funcionar ambos gadgets.

    Para que el menú no se oculte busca esta parte y agrega lo que está en negrita:

    .jqueryslidemenu {
    z-index: 99;
    position: relative;

    background: #414141;
    width: 885px;
    margin: 0 auto;
    font-weight: bold;
    font-size: 12px;
    font-family: Verdana;
    }

    ResponderEliminar
  24. Antonio Gallego, tienes no sólo la última, sino muchísimas versiones de jQuery y sólo debes tener una o cuando mucho dos. Lee el enlace que te decía al final de la entrada para que veas a qué me refiero.

    Saludos.

    ResponderEliminar
  25. Hola Potro, amigo estoy de reformas en el blog y he instalado este menu, ya que me gusta mas que el anterior que me puse, pero no se como hacer para dejar mas margen de espacio entre la cabezera de blog ( donde tengo el menu)y las entradas. Gracias de antemano.

    Saludos.

    ResponderEliminar
  26. Hola Potro de nuevo con mis preguntas, espero me puedas ayudar. tengo http://programandos.blogspot.com/ y quiero saber como cambiar el color de fondo alas subpestañas de video juegos y el color al pasar el cursor. Tambien queria pedirte el favor de que me hagas sugerencias o criticas constructivas para ir la mejorando Gracias

    ResponderEliminar
  27. Hola Potro, hace tiempo que sigo tu blog, y sinceramente me a sido de mucha ayuda. Mi consulta es la siguiente, las pestañas me funcionan de maravilla en Chrome y Firefox, pero por alguna razón se desconfigura en Explorer :/, no es como aparece en los otros 2 navegadores.

    Te dejo el link de mi blog: http://unpocoanime.blogspot.com/

    Un saludo y muchas gracias por todo :DDD!

    P.D. me olvidaba, hay alguna manera para evitar que los botones "salten" al momento de pasar el cursor de arriba hacia abajo

    ResponderEliminar
  28. Todo arreglado, muchísimas gracias potro quedo perfecto.

    ResponderEliminar
  29. Hola Julio Schizophrenic,

    No pude ver el blog porque ahora está en construcción, pero puedes probar poner debajo de:
    .jqueryslidemenu{

    Un margen, en este caso un margen inferior:
    margin-bottom:100px;

    Saludos.

    ResponderEliminar
  30. Hola Harold Solano,

    Esta es la parte que controla esa área:
    #secnav li ul li a:hover {
    background: #000;
    }

    Ese es el color de fondo que se lo puedes cambiar por otro, y ahí mismo le puedes añadir un color a los enlaces, por ejemplo:
    color:#FFF;

    ResponderEliminar
  31. Hola Yami,

    Debe ser por algún estilo de tu plantilla. Algo que he visto y que no he entendido porqué lo has puesto, es que dentro de los estilos CSS tienes códigos como estos:
    </MainOrArchivePage>
    <ItemPage>

    Nada de eso debe ponerse antes de ]]></b:skin> quizá por eso se ve de esa manera en IE.
    Aquí hay más información al respecto:
    http://ciudadblogger.com/2011/07/errores-comunes-al-poner-los-codigos.html

    Lo de que "saltan" es por ese tipo de plantillas, pues en el resto no sucede eso :/

    ResponderEliminar
  32. Hola de nuevo amigo, he instalado un nuevo template en el blog, me gustaria que me ayudara a quitarle la molesta publicidad y a confeccionarlo, echele un vistazo y ya me dice.

    http://catalogomusic80s90s.blogspot.com/

    ResponderEliminar
  33. Amigo Potro no logro quitar el dichoso cuadradito azul de publicidad que sale en la cabezera, con gogle chrome no aparece, con explorer y safari si que aparece, como podria quitarlo? necesito su ayuda, gracias de antemano.

    Un saludo.

    ResponderEliminar
  34. Muchas Gracias Potro, me fue de gran ayuda.

    ResponderEliminar
  35. Pues ya lo he logrado amigo, ahora ya solo me falta saber como quitar la publicidad que sale bajo de los post, el dichoso boton de tweet y el de a friend, facebook, etc..

    ResponderEliminar
  36. Hola Potro :D!!

    Si otra vez por estos lares, luego de leer tu respuesta, leer el otro post y analizando un poco, hice el mismo intento pero sin expandir artilugios (en otro blog), lo he probado en IE y a salido bien, pero las pestañas que se deslizan aparecen "atrás de" no se si es por la plantilla (ya que lo único que me quedaría seria recomendar los otros 2 navegadores). Y tengo otra consulta, estoy pensando realizar la variación en este blog de prueba, para luego pasar la plantilla al blog original, mi pregunta es ¿es posible hacer eso?

    Muchísimas gracias por tomarte un tiempo en responder. Y gracias por tu ayuda.

    P.D. http://pruebita-yami.blogspot.com/ --> blog de prueba

    ResponderEliminar
  37. Julio Schizophrenic, busca arriba de esta línea con los artilugios expandidos:
    <div class='post-footer meta'>

    Ahí están los códigos de esos botones.
    Saludos!

    ResponderEliminar
  38. Gracias Potro estaba esperando esto :)

    ResponderEliminar
  39. Hola Yami,

    Lamentablemente cualquier menú de subpestañas no es del todo compatible con Internet Explorer cuando se usan las plantillas hechas con el Diseñador de plantillas de Blogger, es por eso que en ese navegador aparecen detrás del contenido.

    Lo de la variación no me queda claro, pero si lo que quieres es pasar la plantilla del blog de pruebas al blog que usas sí se puede, sólo haz un respaldo de la plantilla del blog de pruebas, y luego sube ese respaldo al blog que usas, de esa forma tomará todos los códigos y estilos que hayas puesto en el blog de pruebas.

    Saludos :)

    ResponderEliminar
  40. Jimmy Cerron Lazaro, espero no haberte hecho esperar mucho :)

    ResponderEliminar
  41. Muchisimas gracias my friend, que hariamos sin su ayuda, oh my god!!.

    ResponderEliminar
  42. Hola Potro :D!

    Solo pasaba para agradecerte por tu ayuda :D!!! En serio muchas gracias. Al final termine dejando un mensaje que lo mas recomendable es verlo con Moxilla o Chrome ;3.

    Un saludo.

    ResponderEliminar
  43. No hay de qué Yami, gracias a ti por tu visita :)

    ResponderEliminar
  44. hola potro
    mira como coloco ese menu en la parte derecha de arriba osea en el lugar que tu tienes tu menu de tu blog

    ResponderEliminar
  45. en este como vez en este blog que tu tienes alli tienes un menu del lado derecho Inicio Redes sociales + Conversor Colores Mapa del sitio Contacto
    como coloco de ese lado de mi blog ya dividi la cabecera yo quiero es colocar un menu alli como tu lo tienes

    ResponderEliminar
  46. Pero cuál es la dirección de tu blog, es que no todas las plantillas son iguales, por lo tanto necesito saber cuál es el blog donde lo quieres hacer para poder decirte dónde podrías colocarlo.

    ResponderEliminar
  47. es en este que lo estoy haciendo voy comenzando
    http://satelitemusica.blogspot.com/ y otra cosa vez alli lo que dice bienvenido verdad esee es el efecto de bienvenida del blog pero lo mas probable es que como dividi la cabecera por eso sale asi incompleto

    ResponderEliminar
  48. Hola Potro, mi consulta es como puedo dejar del tamaño adecuado la barra ya que me queda una parte en blanco en el sitio mira www.tldshows.com

    ResponderEliminar
  49. Potro, Cómo estás?

    Mi problema con este menú se da cuando quiero hacer click en en la segunda ("mezclador") y tercera ("desraizador") subpestaña. Sólo puedo entrar en la primera subpestaña ("comedero") de Herramientas y no en las otras dos.

    Me podrías ayudar. Quizás hice algo mal y no puedo darme cuenta de ello.

    Saludos y Gracias!

    ResponderEliminar
  50. la dirección (en relación al comentario 56) del sitio es http://www.metalurgicaariz.com.ar/p/productos-y-servicios.html

    Gracias

    ResponderEliminar
  51. Jesus Alex, pon el menú en cualquier parte, ya que lo tengas puesto sigue los pasos de esta entrada, específicamente del segundo método, sólo que tú en lugar de ponerlo debajo de la línea donde se indica lo pondrías arriba de ella:
    http://ciudadblogger.com/2009/12/anadir-gadgets-abajo-de-la-cabecera-del.html

    ResponderEliminar
  52. Hola Meridional,

    Debajo de .jqueryslidemenu { agrega esto:
    margin-left: -30px;

    Y ahí mismo cambia el width: 100%; por
    width: 106.7%;

    ResponderEliminar
  53. -, no veo que tengas este menú en el blog, sino otro hecho a base de CSS.
    Si dejarás ese mueve el gadget para que esté no debajo de la cabecera sino dentro del área del crossol, así podré ver mejor porqué no funciona bien, pues esos menús muchos lo usan en la misma plantilla y trabaja sin problemas.

    Saludos.

    P.D. Si e gadget de páginas tampoco lo usarás elimínalo o pásalo a la sidebar.

    ResponderEliminar
  54. Quedo perfecto Potro!!, eres un maestro muchas gracias!!

    ResponderEliminar
  55. Hola Potro, me encantan tus explicaciones y tu blog!! consigues que alguien tan torpe como yo pueda poner su sitio bonito... Muchisimas gracias!!!

    He hecho todo lo que dices en la entrada y me ha quedado precioso, pero, me pasa como a Meridional, no soy capaz de ajustar el menú desplegable a la longitud del blog... he hecho lo que le dices a ella, pero no lo consigo (ya te digo que soy torpe de narices) podrías ayudarme???

    Mi sitio es este: http://www.noeliaamarillo.com/

    Muchisimas gracias!

    ResponderEliminar
  56. Hola potro yo quisiera cambiarle los colores al menú pero no se que codigos se usan para los colores y si se deben de poner los codigos justamente en las letras de color verde?

    ResponderEliminar
  57. Hola Noelia,

    Muchas gracias por tu amable comentario, da gusto saber que estas entradas sirven de algo a los demás :)
    En el caso de ese blog no es que el menú no se ajuste, lo que sucede es que el ancho ya se ha excedido por el número de pestañas que tiene. Lo que convendría sería que las pestañas que tienes con texto en mayúscula los pongas en minúscula, de esa manera se reducirá el espacio y podrá caber el menú a lo ancho, ya si después de hacer eso le falta o le sobra espacio me dices y vemos qué le podemos hacer ;)

    Buenas noches!

    ResponderEliminar
  58. Hola 23vlap,

    El código del color son la serie de números y/o letras que están después de cada signo de gato, por ejemplo:
    #414141

    Eso es lo que hay que cambiar; en este enlace puedes obtener el código del color que desees:
    http://ciudadblogger.com/p/codigos-de-colores-rgb-y-hexadecimales.html

    ResponderEliminar
  59. Hola portro una pregunta yo pongo bien todos los codigos pero en el blog salen .Pestaña 1
    .pestaña 2

    todo asi y no lo puedo arreglar


    mira esta es mi pagina www.planetariverp.com

    ResponderEliminar
  60. Hola Marcos,

    Lo que pasa es que cuando has puesto el código del gadget de Páginas has eliminado una llave de cierre y eso ha hecho que nada de lo que pongas abajo funcione:

    .mobile .tabs-inner .PageList .widget-content .pagelist-arrow {
    border-left: 1px solid #ffffff;
    /* Menú de páginas
    ----------------------------------------------- */
    #PageList1 {
    width: 100%;
    border: 1px solid #625e00; /*000000*/
    background-color: #E0ECF8; /*7a0303*/
    }

    Ese es el código que tienes, si te fijas ahí hace falta una llave de cierre }
    Aquí hay más información sobre ese problema:
    http://ciudadblogger.com/2011/07/errores-comunes-al-poner-los-codigos.html

    ResponderEliminar
  61. asi lo tengo el codigo estan todos cerrados

    ResponderEliminar
  62. No, debajo de border-left: 1px solid #ffffff; falta el cierre.

    ResponderEliminar
  63. Hola Potro! hice lo que me dijiste, (quitar algunas mayúsculas) y ahora ha quedado ESTUPENDO!! Ainsss, eres un genio!!!! (y yo muy torpe, jus, ya te lo avisé jaja)

    Muchas gracias por tu paciencia y tu amabilidad, eres un sol!!

    ResponderEliminar
  64. No eres nada torpe, te lo aseguro ;)

    ResponderEliminar
  65. Hola Potro
    Estuve buscando la entrada donde ponias como anexar una etiqueta a una pestaña. Lo que pasa es que en este nuevo blog que estoy haciendo no me resulta!!!, sabes que puede ser????

    lemulawen.blogspot.com

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

    ResponderEliminar
  67. Hola Potro, muy buenos tus post, me han ayudado muchisimo. He abierto mi primer blog hace solo unos días, lo quiero bien sencillo y despojado. Pero hay algo que no he logrado hacer, tengo dos menus, uno arriba y otro debajo de la cabecera, como puedo hacer que uno este centrado y el otro alineado a la izquierda?
    Desde ya muchisimas gracias...

    ResponderEliminar
  68. LemuLawen, mira esta entrada, ahí dice cómo poner la URL de la etiqueta, si no te resulta deja un comentario en esa entrada mencionando cuál es la URL que has puesto y para cuál etiqueta:
    http://ciudadblogger.com/2010/06/menu-de-categorias.html

    ResponderEliminar
  69. guardaqueguarda, enhorabuena por tu primer blog, ojalá te llene de éxitos y satisfacciones :)
    ¿Cuál menú quieres centrar, el de arriba o el de abajo?

    ResponderEliminar
  70. Hola, el menu de abajo es el que quiero centrar...

    ResponderEliminar
  71. Agrega antes de ]]></b:skin> esto:

    #menu100 {margin-left:200px;}

    Eso hará que se recorra hacia la derecha, con un valor más bajo se regresará a la izquierda.
    Saludos.

    ResponderEliminar
  72. Muchas gracias. Hice lo que me dijiste y el menu de abajo se centró, pero el de arriba también se corrió. Puede ser que desde el principio yo haya configurado mal los menus?

    ResponderEliminar
  73. No, lo que sucede es que ambos menús tienen el mismo ID, pero hagamos esto, del código que te di cambia #menu100 por #HTML1
    Con eso se deberá recorrer sólo el de abajo.

    ResponderEliminar
  74. Ahora si! se centró sólo el de abajo...otra vez muchas gracias...da gusto encontrarse con gente como vos dipuesta a ayudar...

    ResponderEliminar
  75. Qué bueno que ya está todo resuelto, espero que nos visites seguido ;)
    Saludos.

    ResponderEliminar
  76. Gracias Potro, ahora me resulto. Tuve problema de mayúsculas, lo cambié y resultó.

    Otra consulta, me acuerdo que tenías una entrada que explicabas como mejorar nuestra posición del blog den google. POr ejemplo al momento de poner nuestro nombre en google, que salga de los primeros.
    Me puedes dar la URL?
    Gracias!!

    ResponderEliminar
  77. Pues no LemuLawen, no tengo una entrada como esas, y es que el tema del posicionamiento no es algo que se haga con un truco o algo así, es cuestión de mucho trabajo, esfuerzo y paciencia, sólo así se llega a los primeros lugares de Google.

    Saludos!

    ResponderEliminar
  78. Hola de nuevo...otra consulta sobre menúes. Para correr el menú superior más hacia la izquierda qué debería hacer? Gracias.

    ResponderEliminar
  79. Hola Potro, tengo una problema, para poder poner el menu ensima de el cuadro de las entradas y del gadget de followers, oseaa ke aparesca en una linea completa, pero no me deja, te dejo una foto pa ke veas el problema: http://i41.tinypic.com/2mo7f49.jpg , espero tu pronta respuesta, gracia

    ResponderEliminar
  80. guardaqueguarda, como lo estabas haciendo, sólo que el valor del margen deberá ser negativo, por ejemplo:
    #HTML2{margin-left:-30px;}

    ResponderEliminar
  81. Ahora si...estaba probando así, pero poniendo 0px, no sabía que se podían poner valores negativos, disculpá la ignorancia...que paciencia tenés.
    Gracias...

    ResponderEliminar
  82. Administrador, pues es que la plantilla no tiene un área para colocar gadgets ahí, por más que lo arrastres no encontrará donde ubicarse. Así es como fue diseñada la plantilla, supongo que todo ese espacio es parte de la cabecera y por eso no se puede colocar ahí.

    ResponderEliminar
  83. guardaqueguarda, descuida, tampoco tenías que saberlo, pero lo interesante es que poco a poco podamos ir aprendiendo algo nuevo ;)

    Administrador, depende de la plantilla, quizá si añades los códigos del crosscol debajo de la cabecera:
    http://ciudadblogger.com/2011/05/dividir-el-crosscoll-del-blog.html

    ResponderEliminar
  84. Oye potro ya en caso que hiciera el menú ..y poner los repectivos links .. quier crear subpáginas para un blog y poner stream pero que los gadgets aparescan para una pestaña y para otra no ? como le hago ..

    Quiero hacer un stream .. pero creo que se requiere varias subpaginas ... aver aca te deo un link ->
    http://www.kpopstreams.blogspot.com/p/stream-1.html

    ha hecho facilmente stream de varios canales

    También como saber el link de una etiqueta ? .. no me refiero a una publicacion sino a todo el conjunto en sí.

    ResponderEliminar
    Respuestas
    1. Mira esta entrada para que veas cómo sacar el link de as etiquetas:
      http://ciudadblogger.com/2010/06/menu-de-categorias.html

      No sé a qué te refieras con subpáginas, pero en una página sólo puedes crear una y nada más.
      Los gadgets puedes condicionarlos para que queden ocultos en otras partes que no quieras que se muestren:
      http://ciudadblogger.com/2011/01/ocultar-gadgets-y-elementos-en.html

      Eliminar
  85. Hola potro, sabes quisiera centrar el menú pero no puedo y alinsertar este codigo #menu100 {margin-left:200px;} no pasa nada, el menú sigue estando a la derecha, que puedo hacer? Gracias :)

    ResponderEliminar
    Respuestas
    1. Hola Valeria,
      Esa instrucción era para otro menú. Para este agrega debajo de .jqueryslidemenu{ esto:
      margin-left:200px;

      Saludos.

      Eliminar
    2. oh! jajaja! okis! Gracias :D me funcionó perfecto

      Eliminar
  86. Saludos potro , quisiera saber como agregar un Motor de Búsqueda Personalizada de Google en la parte derecha de este menú.Gracias de antemano :)

    ResponderEliminar
  87. Y tmb tengo otra duda, que creo no pertenece al post, quisiera saber como poner mi imagen de cabecera pegada al filo superior de la web y alineada al blog , alli te dejo un ejemplo:http://mangatopia.net/main/ ; y te dejo como está en mi blog: http://www.legacymanga.blogspot.com/

    ResponderEliminar
  88. Dentro del menú no se puede, ya que el menú es una lista ordenada.
    Para lo otro, parece que ese espacio es la navbar, prueba agregar estos estilos:
    body .navbar {
    height: 0px !important;
    padding: 0;
    margin: 0;
    }

    Saludos.

    ResponderEliminar
  89. Muchas gracias lo probaré.
    Tengo una última duda, aunque nc si podrías responderla.
    Es algo que necesito urgentemente en mi blog, para que esté decente XD.
    Es sobre las entradas con una imagen y una descripción encima, creo que se hace con thumbnail , y creo que es un script de wordpress. La verdad nc mucho de webs, estoy haciendo mi blog a ciegas XD
    La web es esta:http://mangatopia.net/main/

    Quisiera ver si pudieras ver que script usa, porque en los códigos (Ctrl+U) veo un div class llamado "postbox", y a continuación salen las descripciones el titulo y la imagen de la entradas.

    Quiero saber si es posible usarlo en un blog, y como reemplazar mis entradas de esta forma o si tengo que hacerlo de manera manual.
    Creo que vale la pena verlo, tal vez puedas postearlo aquí en ciudadblogger en "entradas".
    Gracias por leer mi comentario, y espero puedas resolverme esta duda que me mata XD

    ResponderEliminar
    Respuestas
    1. Si es de WordPress entonces así debe ser su plantilla. En Blogger quizá se pueda, pero debe ser un tanto complejo, sobre todo porque el sistema quizás no aplique para todas las plantillas.
      A ver si después con un poco de tiempo veo si es posible hacerlo de una forma que no sea complicada.
      Por lo tanto, si te interesa puedes ver estos métodos para mostrar las entradas en forma resumida:
      http://ciudadblogger.com/2011/01/leer-mas-con-imagenes-en-miniatura.html
      http://ciudadblogger.com/2010/08/entradas-resumidas-estilo-magazine-1.html
      http://ciudadblogger.com/2010/08/entradas-resumidas-estilo-magazine-3.html

      Saludos :)

      Eliminar
    2. Muchas gracias potro, espero que puedas hacer un método para mostrar de esa forma las entradas de una manera no muy complicada

      Eliminar
  90. gracias potro por todo.
    Tengo una duda mas.
    En mi blog lemulawen.blogspot.com ocupe una plantilla de wordpress.
    En en el sidebar hay un elemento de pagina que sale welcome.
    He estado tratando de buscar en el plantilla donde esta el link a esa imagen para poder editarla. Que salga bienvenido en vez de welcome, sabes como se puede hacer?
    Lo otro que pensaba es que dado que tengo las medidas poder subir una parecida, se podra?
    Algo de ayuda por fa
    Gracias!

    ResponderEliminar
  91. perdona potro me equivoque de blog en el commentario anterior es el permasalud.blogspot.com

    ResponderEliminar
    Respuestas
    1. Hola Jaime,
      La frase "Welcome" se encuentra dentro de una imagen mucho más grande de lo que imaginas, es parte de todo el contenedor de arriba.
      Busca esta URL en tu plantilla, esa es la URL de dicha imagen:
      http://4.bp.blogspot.com/-qugwIsJzboY/TaaICRc4tZI/AAAAAAAABQ0/LWpVC7_D6YY/s1600/top_frame.jpg

      Eliminar
  92. Gracias Potro, como la encontraste? A mi me cuesta mucho, aunque ocupe ctrl+f.
    Trataré de cambiarlo.

    Mi otras preguntas son:
    Si se fija al abrir el blog, las entradas salen resumidas con la opción de "sigamos leyendo". Lo que me pasa es que sale en letras muy pequeñas y debaje de los sharebuttoms, como puedo cambiar su ubicación para que quede arriba y cambiarles la fuente, tamaño y color de letra.
    Y como cambio justo arriba de eso donde sale la cantidad de comentarios por entradas, pero esta en ingles y quiero escribirlo en español!!

    Mi segunda pregunta es al abrir una entrada el color de la parte de los comentarios es poco visible, como lo cambio?

    Como siempre potro agradecido por todo, mucha paz

    ResponderEliminar
    Respuestas
    1. Mira esta entrada, ahí verás cómo cambiarle el formato a ese enlace:
      http://ciudadblogger.com/2009/11/personalizar-enlace-de-leer-mas.html

      Lo de la ubicación no sé qué tan factible sea, lo mejor es que el gadget de los bookmarks lo pongas dentro del post-footer, así quedarán debajo del enlace de Leer más.

      El link de los comentarios no lo he visto puesto :(
      Tampoco he podido ver el color de los comentarios, ¿me muestras una entrada que tenga comentarios?

      Saludos.

      Eliminar
    2. Hola Potro
      Cambie el formato del leer mas y sucedio algo. En cuanto al formato todo bien, pero al resto de la pagina se me desconfiguraron varias cosas: el titulo, la fecha, la bienvenida. permasalud.blogspot.com Lo unico que hice distinto es cambias los colores, sacarle el marco al leer mas que ofrecias y le agrande la letra: puse un font-size.
      Otra cosa que paso es que el sharebuttoms se me puso debaje del sigamos leyendo, el read comments desaparecio y al abrir la entrada no sale ni los botones de fb, twitter etc, ni la opcion de poner comentario!!!
      Que paso?

      Eliminar
    3. Hola Jaime,
      No parece que tenga que ver con el Leer más, al menos no cuando has puesto el CSS. ¿Has hecho otros cambios además de ese? ¿cuáles han sido?

      Eliminar
  93. No, solo hice eso. Aunque no descarto el error humano pues!
    Sabes si se puede ver donde pudo haber sido el error o si se cambio algo sin querer?

    ResponderEliminar
    Respuestas
    1. A simple vista no veo ningún error, al menos no en los estilos CSS de la plantilla, por eso he descartado que haya sido por el Leer más.
      Si puedes reinstala la plantilla, así se corregirá cualquier error que haya, aunque claro, se perderán los cambios que hayas hecho en ella :(

      Eliminar
    2. Listo, subi la plantilla se me corrigieron algunas y se me borraron otras. Pero bueno, efectos del descuido.
      Gracias por todo!!!

      Eliminar
  94. Hola Potro!!!!!
    Oiga quisiera saber algo.
    Puede ver mi blog lemulawen.blogspot.com
    Tengo pestañas puestas. COmo hago para que al ingresar a una pestaña (por ejemplo voluntariado) salga una entrada inicial que no cambie o un texto explicativo inicial que no cambie?
    Gracias!!1

    ResponderEliminar
    Respuestas
    1. Hola LemuLawen,

      Mira esta entrada, me parece que es justo lo que estás buscando ;)
      http://ciudadblogger.com/2011/06/agregar-una-descripcion-las-etiquetas.html

      Eliminar
    2. gracias potro, es lo que necesitaba!!!!

      Eliminar
  95. Saludos Potro, lo pude arreglar !!! Haciendolo todo de nuevo, por suerte no tenía mucho.
    permasalud.blogspot.com

    Mire, te acuerdas la duda sobre poner el leer mas justo debajo del texto y no debajo se los sharebuttoms. Trate de ver como hacerlo y no pude. Los sharbuttoms vienen en la plantilla, entonces no sé específicamente donde moverlo!!! para que me quede sobre estos y sobre los el link a los comentarios.

    Mi otra pregunta es: cuando ingresas a una entrada, en la parte de más abajo salen laopción de escribir un comentario en letra color gris. Como puedo cambiar el formato y color de esas letras?

    Gracias potro!!!!

    ResponderEliminar
  96. Potro no te preocupes por el comentario anterior, lo logre!!!
    Gracias por todo

    ResponderEliminar
  97. Sólo me queda la duda de cambiar los colores a al formultario de comentarios.
    Gracias

    ResponderEliminar
    Respuestas
    1. ¡Bien! Me alegra que ya lo hayas resuelto :)
      Debajo de #comments h4 { encontrarás los estilos de ese texto del formulario.
      color es el color del texto, font-size el tamaño de la fuente.
      Saludos.

      Eliminar
  98. Hola, realicé los cambios a la barra horizontal de menú que tenía anteriormente y después de varios errores que salían entre un menú y otro, logré dejar lo que necesitaba. Ahora el único inconveniente es en el programa de internet explorer el deslizamiento del menú "tu curso" se realiza muy rápido y no me permite alcanzar a pinchar en los últimas dos subpestañas. Situación distinta si uso mozillaF.

    Si puedes aconsejarme algo, estaría agradecida. De todas maneras haces un excelente aporte, te felicito!!! Saludos. Mi blog para verificar mis dudas: conectameconeduc.blogspot.com

    ResponderEliminar
    Respuestas
    1. Hola Sandra,
      Es bastante extraño, te cuento. Entré a tu blog desde IE8 y me fijé que sucede lo que mencionas, pero además el menú se ve un poco más ancho.
      Así que en un blog de pruebas puse la misma plantilla, coloqué el menú, miré y en el mío se veía bien.
      Como se veía bien entonces copié la estructura de tu menú así como los estilos que habías puesto (por si hubieras modificado algo), y en el mío se seguía viendo bien.
      Copié todos los estilos de tu plantilla, todos. Los puse en el blog de pruebas y en el mío se seguía viendo bien.
      Así que no veo qué pueda ser lo que causa que en tu blog el menú se vea de esa manera :(
      Al menos en cuanto a estilos de la plantilla no veo la falla pues como te digo, en el blog de pruebas que monté no aparece ese problema.

      Eliminar
    2. Hola, de qué forma te puedo hacer llegar el código html que aparece en el gadget creado para los menús, porque quise copiarlo aqui y me indica "su html no es aceptable: etiqueta no permitida: DIV". Saludos.

      Eliminar
    3. Me falto agregar que en firefox el menú "tu curso" se despliega hacia la derecha en forma horizontal y asi se puede hacer un click en cada sub menú. En cambio en IE sigo con el problema y aunque trato de avanzar lentamente sólo puedo hacer click hasta el segundo sub menú de los 4. Leyendo otras entradas veo que el problema se repite. He revisado el código del gadget y está igual al entregado por tí, no sé que más hacer. Saludos.

      Eliminar
  99. Hola, me gustaría saber cómo puedo encontrar otro icono en google de arrow down, porque esta no queda bien con la web que estoy diseñando (www.anna-casino.blogspot.com) y he intentado copiar y pegar la url de dónde agarra el icono, desfragmentando la dirección, pero siempre me salía por error, y he pensado que quizás google tenga un almacén de iconos o algo... :S he probado de poner imágenes que he buscado por google pero o bien no carga, o bien tarda mucho, o bien pueden eliminar el web y la flecha ya no valdrá. Gracias!

    ResponderEliminar
    Respuestas
    1. Hola Anna Casino, por la red hay varios íconos, pero muchas veces las imágenes no funcionan porque no las subimos a nuestro propio servidor, así que sea la imagen que sea debes subirla a tu servidor, en este caso a Picasaweb, ya estando ahí no deberá darte problemas para ponerla donde quieras, y la velocidad no será problema.
      Saludos.

      Eliminar
  100. Gracias por toda la ayuda, me ha ido re bien.
    Sabes que empecé a agregarle cosas al perfil y cambiaron en la pagina principal. Se salio del encuadro del sidebar y sale con una letra no tan atractiva, como puedo cambiar eso?

    Gracias potro

    ResponderEliminar
    Respuestas
    1. Hola Jaime,
      Por lo que he visto la fuente de todo el blog es así, en las entradas no lo notas porque le has puesto una fuente distinta. Pero la fuente de todo el blog es esta:

      font: normal normal 20px Permanent Marker;

      Eliminar
    2. Y sabes si se puede cambiar? o agregar mas fuentes???
      Y como ajustar el perfil al sidebar? ya que se sale

      Eliminar
    3. Busca esa línea que te menciono, ahí puedes cambiar la fuente, por ejemplo, en ese caso la fuente que usas se llama Permanent Marker, si quisieras usar la Arial entonces esa línea quedaría así:
      font: normal normal 20px Arial;

      Ese 20px es el tamaño de la fuente, y también lo puedes modificar por otro valor.

      Eliminar
    4. Sabes que he buscado con crtl f con y sin expandir artigulugios y no lo he encontrado. Donde busco ud?

      Eliminar
    5. Entonces tal vez no esté exactamente igual. Busca Permanent Marker, o Permanent. Si el código estuviera en una variable ahí encontrarás lo que te digo. Sino, busca dentro de body {

      Eliminar
    6. Gracias Potro, estaba en un body, pero de forma distina, en ninguna parte estaba permanent marker. Estaba como font-family: verdana genova sans serif;

      Lo modifico y claro cambia todo, pero cuando trato de agrandarle la letra se me desconfigura todo, asi que lo dejo asi mejor.

      Otra pregunta: cuando pongo mi perfil, sale toda la descripcion y ademas se me descuadra mas alla del sidebar, como logro que no se descuadra y que solo se muestre una parte de la descripcion?

      Eliminar
    7. En el perfil sale todo, no se puede modificar para que salga solo una parte. Quizá te sería más conveniente crear un gadget HTML/Javascript y ahí poner una foto junto con los datos que quieres mostrar.
      Saludos.

      Eliminar
    8. Gracias por su paciencia.
      Me ha servido mucho su ayuda.
      Mucha paz

      Eliminar
  101. ¡Gracias! Ya está hecho, además lo creé yo :)

    Otra cosa que quería preguntarte es como puedo modificar el tamaño, porque si entras en el blog que estoy haciendo (no soy Anna, es para ella, eso si) verás que sobra espacio en la izquierda y derecha del menú, pero yo quiero que sea una línia que separe totalmente el título del contenido... he intentado hacerlo des del witdh:100% aumentando el tamaño, pero sólo aumenta en la parte derecha... supongo que porque está dentro de un gadget, pero entonces no sé cómo hacerlo. ¡Gracias otra vez!

    ResponderEliminar
    Respuestas
    1. Cambia esta parte:
      .jqueryslidemenu{
      background: #eedbe; /* Color de fondo del menú */
      width: 100%;
      font-weight: none;
      font-size: 14px; /* Tamaño de la letra */
      font-family: philosopher, verdana; /* Tipo de letra */
      }

      Por esta:
      .jqueryslidemenu {
      background: #873427;
      width: 691px;
      font-weight: none;
      font-size: 14px;
      font-family: philosopher, verdana;
      margin-left: -70px;
      }

      Saludos.

      Eliminar
    2. Yeah! Ya le he pillado el truqui de hechar el gadget para la izquierda y alargarlo para la derecha... ¡lógico! pero no se me había ocurrido... Muchas graciassss :)

      Eliminar
    3. Por nada, qué bueno que ya lo has aprendido :)

      Eliminar
  102. Potro, como podría quitar esto: http://dl.dropbox.com/u/49164033/4747474747747.png y poner para que cuando yo me encuentre en la pagina de inicio, o en cualquier otra, se vea así: http://dl.dropbox.com/u/49164033/999999999999.png es decir, que este la letra (INICIO) en color y se vea debajo a x distancia la barra gruesa.
    Mi web es: http://trucosvariospc.blogspot.com/

    ResponderEliminar
    Respuestas
    1. Supongo que te conviene más usar un menú parecido, por ahora no tengo nada a la mano, pero seguro en la red encontrarás algunas opciones para poner un menú así.

      Eliminar
  103. Ayuuuudaaaaa Urgente!!!

    Hola Potro,espero me ayudes tengo varios dias con este problema y eres el unicoo que me podria ayudar, en mi blog anterior usaba un menu de 2 niveles pero siguiendo la estructura HTML lo he convertido a 3 niveles pero tengo dos problemas:
    1.- Las URL de las etiquetas ahora ya no me funcionan a enlazar con el nombre de la Etiqueta y me percate que era porque a pesar de que copio y pego las URL de las etiquetas que estan escritas primera letra con mayúscula tal como las escribo en la etiquetas, cuando hago click en el menú no me aparecen porque resulta que se cambariaron a minúsculas, (en el listado de Eiquetas no tengo problemas porque ahi si las encuentra facilmente.( he probado con varios menus de 3 niveles y en todos tengo el mismo problema)., Que puedo hacer???

    2.- He mantenido el codigo CSS de mi menu anterior, pero al hacerlo de 3 niveles ( antes era de 2) los link del 3er. nivel me quedaron un poco separados con relacion a los 2dos., Como podria hacer para que este juntos ??? Me podrías ayudar con esto porfis??

    MI blog es :http://manualidadesdesivy.blogspot.com


    Por cierto utilizo Scriptaculous y Prototype.

    Muchas gracias adelantadas.

    Saludos

    ResponderEliminar
    Respuestas
    1. Hola Silvia,

      Eso que comentas de que te cambia de mayúsculas a minúsculas es un problema de Blogger, pero se soluciona cambiando las comillas simples por comillas dobles:
      http://ciudadblogger.com/2010/12/las-mayusculas-y-las-minusculas-en-las.html

      En cuanto al menú, no vi que tuvieras alguno con esas características que mencionas :/
      Saludos.

      Eliminar
  104. Hola Potro, puse el menú en mi blog y me funcionó bien hasta que lo centré creo (Puede ser que haya sido antes) y me empezó a subir, a recogerse antes de tiempo, es decir, se recoge tan rápido que sólo me permite clicar en la primera subcategoría. Cuando intento llegar a la segunda con el cursor este se recoge antes de que pueda clicar. No sé a qué se debe, espero que me pueda ayudar. Le dejo el blog, está aún en construcción. http://loadtotal.blogspot.com/

    Muchas gracias.

    ResponderEliminar
    Respuestas
    1. Quizá es por la ubicación en ese tipo de plantillas. ¿Antes de centrarlo, funcionaba bien aun estando ahí arriba? ¿Tenías ese número de subpestañas cuando funcionaba bien?

      Eliminar
    2. Sí, estaba exactamente igual, únicamente me limité a centrarlo. No entiendo qué ha podido pasar, voy a probar a copiar el código de nuevo a ver si así se arregla.

      Eliminar
    3. Vale, ponlo de nuevo por si por alguna otra modificación algo haya salido afectado. Así estaremos seguros si fue por haberlo centrado, o por alguna otra modificación.

      Eliminar
    4. Pues sigue sin funcionar, no sé qué puede ser la verdad. ¿Qué me recomiendas que haga? ¿Alguna vez ha sucedido esto?

      Eliminar
    5. Potro, he borrado todo, lo he escrito todo de nuevo, he borrado la plantilla y le he puesto una nueva. Pero me he dado cuenta que tengo un bug en el blog ya que hay un gadget que no es nada y no me permite borrarlo. ¿Habría alguna manera de poner una plantilla nueva al 100%, es decir, sin gadgets y sin nada, Sólo lo que es la plantilla?

      Eliminar
    6. Hola Pedro,

      ¿Cuál es ese gadget que no se deja eliminar?
      En cuanto al menú, entré y vi puesto el segundo código, pero el de los estilos no lo veo puesto.

      Saludos.

      Eliminar
    7. He andado probando cosas a ver si lo arreglaba y ya sé cual es el culpable de todo (Aunque aún no sé por qué). Un amigo me pasó una modificación para poder subir el menú por encima de la cabecera. La sustitución fue sustituir este código "" por este otro "" y la verdad es que funcionó pero hizo que el menú funcionara mal. No sé por qué.

      Muchas gracias por leerme, Saludos.

      Eliminar
    8. Sigo sin ver puestos todos los códigos del menú Pedro, si los pones me avisas para que entre de nuevo a revisar qué puede estar pasando.

      Saludos.

      Eliminar
  105. Gracias por contestar, te cuento que antes de consultarte si probé cambiando las comillas, pero no me resulto....asi que buscando en tus publicaciones me encontré con esta entrada: menú horizontal con subpestañas hecho en CSS, y decidi cambiarlo seguramente por eso ya no lo viste...pero ahora con este nuevo menú tengo otros problemas.....

    1.- Los titulos de las Pestañas del 2 y 3 nivel no estan alineadas a la izquierda.
    2.- Los link del 3 nivel salen montados a los del 2 nivel.
    3.- Las flechitas para abrir los link del 3 nivel no aparecen o estan montadas en las letras del titulo del 2 nivel.
    4.- Los titulos del 3 nivel se salen del ancho del cuadro que los contiene.
    5.- Quice cambiar el color del fondo de pestañas del 2 y del 3 nivel pero no encontré la linea para hacerlo.

    Por favor me podrias ayudar con esto??

    Seria bueno que le des un vistazo a mi menu para que me entiendas mejor. http://manualidadesdesivy.blogspot.com
    Uso el navegador chrome.

    Saludos

    ResponderEliminar
    Respuestas
    1. Debajo de #nav li:hover ul.sub li { agrega:
      text-align: left;

      Te mencionaba en la otra entrada, que te falta un signo de gato, aún no lo has cambiado. Es importante que lo hagas para así determinar qué tantos problemas pueden ser causados por ese error.
      También cambia:
      #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:100px; top:-4px; background: #fff; padding:10px; border:1px solid #3a93d2; white-space:nowrap; width:100px;

      Ese left:100px; por left:145px;
      Y ese width:100px; por un valor más alto para que se hagan más anchos los otros contenedores.

      Lo demás, deja la pregunta en la entrada de ese menú, porque se me complica no ver los códigos originales del menú, y que están justo en esa entrada.

      Saludos.

      Eliminar
  106. Hola Potro, he estado leyendo tu blog, y quiero agradecerte lo mucho que nos ayudas a gente, como yo, que no tenemos mucha idea de programacion.

    He creado un blog de viajes, y he introducido un menu horizontal con efecto deslizante, pero me encuentro con el problema que cuando quiero agregar mas de 7 pestanyas desplegables, la octava no se desplega.
    Tambien he probado con insertar otro menu horizontal debajo, pero tampoco se abren los desplegables.
    He estado probando muchas cosas pero no doy en el clavo.
    Si me pudieras aconsejar te lo agradaceria muchisimo!

    El blog es de blogger: www.noamon.com

    Gracias!

    ResponderEliminar
    Respuestas
    1. Hola Noamón,

      Todas las pestañas del primer menú se despliegan sin problema, incluyendo las del final. Al menos desde aquí se ve todo bien. Pero sí será necesario que quites el menú que pusiste abajo de este, para evitar conflictos de cualquier tipo.

      Saludos y gracias por tu comentario!

      Eliminar
  107. Hola Potro, nuevamente por aquí.
    Una consulta: puse un linkwithin en el blog. Y me sale al abrir en la entrada como al inicio. Como puedo hacer para que NO me salga en el inicio y solamente al abrir entrada?

    ResponderEliminar
    Respuestas
    1. Hola LemuLawen, si el gadget lo pusiste directo en la plantilla enciérralo en una condicional:
      http://ciudadblogger.com/2010/03/condicionales-de-blogger.html

      Y si lo pusiste a través de un gadget entonces usa también condicionales para ocultarlo ahí:
      http://ciudadblogger.com/2011/01/ocultar-gadgets-y-elementos-en.html

      Eliminar
    2. Hola Potro
      Al principio me resulto, pero despues de unas cuantas actuailizaciones, volvio a aparecer en la portada. Que puede ser?

      Eliminar
    3. Revisa que el gadget siga encerrado en la condicional, y que la condicional sea esta:

      <b:if cond='data:blog.pageType == &quot;item&quot;'>
      ...Aquí va el código del elemento...
      </b:if>

      Eliminar
    4. Si, sigue encerrado, puse esto:


      #NOMBRE {
      display: none;
      }
      (debiese ir style pero no me deja enviar el comentario)

      es la condicional para que no salga en portada. O en definitiva lo cambio por el que me puso en su respuesta?

      Eliminar
    5. Quizá el nombre del ID es el que no está bien, revisa que el ID siga siendo el mismo, o bien, pon el código de LinkWithin directo en la plantilla, así podrás encerrar ese código como te he dicho en el comentario #115.3

      Eliminar
  108. Muchas gracias Potro, y disculpa las molestias, ya te escribo en la otra entrada.

    ResponderEliminar
  109. Hola Potro, primera vez que comento, por cierto me han servido de mucho tus post, gracias por ello.
    la razón por la que escribo ahora es porque kiero que me ayudes con la personalización de este menú.
    entra a http://radiocluster.blogspot.com/
    quisiera borrar esa linea punteada q aparece alrededor, además, en Mozilla Firefox no tiene la fuente Verdana sino una parecida a Times New Roman; quisiera que aparesca como en IE, pero el otro problema en IE es que las subpestañas seben 'detras de', kiesiera que me digas como corregir los errores.
    de antemano Gracias.

    ResponderEliminar
    Respuestas
    1. Hola Web Master JrLc Jordan Raji,

      Para quitar ese borde puntuado que aparece arriba busca esta parte y eliminala:

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


      En cuanto a lo de IE, ese es un problema de compatibilidad de esas plantillas cuando se les ponen menús de subpestañas, de hecho, esas plantillas no están diseñadas para que tengan submenús, sólo que nosotros nos las arreglamos para ponérselas, pero aun así presentan esos problemas con ese navegador.

      Saludos.

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

    ResponderEliminar
  111. Potro tengo el mismo problema que Web Master JrLc Jordan Raji y recientemente me diste la misma respuesta por e-mail, pero ahora te escribo para preguntarte si definitivamente no hay solución para esto ya que realmente necesito un menú desplegable que se pueda visualizar en IE ya que temo generarle incomodidades a los que visiten mi web y no puedan visualizar la página de forma correcta.

    Lástima que IE tenga tantos problemas.

    De antemano, gracias por tu respuesta.

    pd: mi blog es www.arteentorno.com

    ResponderEliminar
  112. Potro perdóname por el doble post pero acabo de notar que al abrir mi menú desplegable en IE ya se había solucionado el problema, pero al añadir mas submenús el problema volvió. Te lo hago saber por si eso nos da alguna esperanza a los que necesitamos solucionar este problema.
    Gracias Potro.

    ResponderEliminar
    Respuestas
    1. Pues la forma más segura es que cambies de plantilla. En sí no es que los menús desplegables no funcionen en IE, más bien, los menús desplegables en las plantillas del Diseñador de plantillas de Blogger son los que no funcionan en IE, pero si usas una plantilla diferente no deberá haber problema.
      Sin embargo, si has visto que con este menú sí funciona, excepto al añadir más submenús quizá lo mejor es dejarlo como está, yo sé que no es la mejor solución, pero al menos mientras aparece alguna mejor solución podrás tener funcionando el menú sin necesidad de cambiar de plantilla.

      Saludos.

      Eliminar
    2. Gracias Potro por tu respuesta. Ojalá encuentres una solución diferente a tener que cambiar la plantilla estaré muy al pendiente.

      Eliminar
  113. ¡Hola, El Potro! ¿Todo bien? ^_^
    Me encantó este menú y me di de cabezasos con los códigos de las subpestañas XD
    Mi único drama es que cuando paso el cursor sobre la pestaña y las subpestañas se despliegan, éstas vuelven a plegarse tan rápido que no permite hacer click sobre ellas :( ¿A qué se deberá? Espero que tenga solución porque me enamoré de este truquito XD
    Traté de buscar la solución en los comentarios anteriores al mío, pero sólo llegué hasta el 121 porque mis ojos ya no dan más... snif...

    ResponderEliminar
  114. Je, los comentarios LLEGABAN hasta el 121... Despistada como siempre XD

    ResponderEliminar
  115. ¡Ay! ¡Una cosa más! ¿Cómo puedo darle un toquesito redondeado a las esquinas de las pestañas? ^^

    ResponderEliminar
    Respuestas
    1. Hola Gabriella Yu,
      ¿Lo usarás en una plantilla del Diseñador de Plantillas? Sí es así la mala noticia es que suele ocurrir eso de que se regresan muy rápido. La buena noticia es que si pasas el cursor más despacio entonces las pestañas se mantienen visibles.

      Se le puede aplicar un borde redondeado, pero se vería mal, porque el borde se aplicaría a cada una de las subpestañas, no sólo a la última, así que al desplegarlas aparecerían cada pestaña redondeada :/

      Eliminar
    2. ¡Hola de nuevo! Al final tuve que decantarme por otro código de menú que encontré en el blog de Quiero Crear un Blog; será menos personalizable pero es más sencillo y creo que va bien con la plantilla de mi blog (siempre me da dolores de cabeza su viejo diseño html que parece tener conflictos con algunos códigos, pero igual la adoro XD)
      De todas formas, de tu mano aprendí que puedo poner ciertas estructuras en un gadget html en vez de colocárselo directamente en la planilla. Sólo así pude acomodar el menú a mi gusto en la estructura de mi blog ^_^

      Eliminar
    3. Vale, lo importante es que te quedes con el menú que mejor se adapte a tu plantilla, y que estés contenta es lo más importante :)

      Eliminar
  116. Hola Potro.
    He estado mirando las pestanyas y siguen sin abrirse las ultimas, a partir de la 7. No se con que navegador lo has mirado, pero con Crhome y desde mi Ipad, no ouedo abrirlos.
    No se si oudieras volver a mirartelo. He borrado la barra horizontal de abajo.
    Muchas gracias.

    www.noamon.com

    ResponderEliminar
    Respuestas
    1. Hola Noamón, lo he visto en Chrome, y sigo abriendo todas las pestañas sin problema:
      http://i44.tinypic.com/2pq5r3a.png

      Eliminar
  117. Perdona Potro, pero sigo sin poder abrir las pestañas de Laos y Vietnam.

    ResponderEliminar
    Respuestas
    1. Pues desde aquí, también en Chrome, se siguen viendo sin problema también esas pestañas:
      http://i43.tinypic.com/dcan81.png
      http://i44.tinypic.com/2qu835y.png

      Eliminar
  118. Muchas gracias por tu tutorial, pude poner un menú para aligerar más la página de contenido ^^
    Lo único que tengo problemas con la personalización. Si voy a diseño de página de blogger, me deja cambiar el tamaño de letra de las pestañas, colores y todo eso, pero no me cambia nada si lo hago desde el html. He revisado el código por si había borrado algo, lo he borrado y vuelto a pegar directamente del tuyo y nada... se queda como estaba y no le afecta ningún cambio. Ni idea de que podría ser ^^'

    ResponderEliminar
    Respuestas
    1. Gracias por tu comentario Cat.
      La personalización de este menú se hace en la Edición de HTML, sólo tienes que ver las anotaciones en color verde para que sepas a qué corresponde cada área, ahí verás dónde se cambian los tamaños de las letras, colores y demás.

      Saludos.

      Eliminar
  119. No lo entiendo, he probado con otro ordenador y ahora si que funciona, pero en varios no me habia funcionado.
    Muchas gracias Potro por tu web y por tu ayuda!

    ResponderEliminar
    Respuestas
    1. Pues no sabría decirte porqué sucede eso Noamón, en sí este mismo menú en la plantilla que usas le ha funcionado a todos, excepto en Internet Explorer que siempre es una lata.

      Eliminar
  120. Hola, mi pregunta es si se podría hacer eso mismo pero que la direccion del submenu sea hacia arriba y no hacia abajo, pasate por http://nuevametal.blogspot.com/ Saludos :D

    ResponderEliminar
  121. Hola, muchísimas gracias de antemano por su respuesta, mi problema es que no se deslizan las sub pestañas del menú, es más, ni si quiera salen las flechistas para bajar. ¿Qué crees que estaría pasando? Mi Blog es: tipicohumano.blogspot.com

    Gracias de verdad, te lo agradecería por siempre.

    ResponderEliminar
    Respuestas
    1. Pues yo si las veo José, ¿has probado verlo desde otro navegador?

      Eliminar
  122. hola amigo potro mira si vez mi menu en www.variedadespalencia.com es desplegable pero sin separadores lo que quiero saber es como juntar mas las palabras del menu? Y lo otro es como poner separadores entre cada palabra gracias amigo y disculpa tanta pregunta

    ANTONIO PALENCIA

    ResponderEliminar
    Respuestas
    1. Hola Antonio, nuevamente necesito que quites el script que deshabilita el botón derecho. Saludos.

      Eliminar
    2. Listo potro ya habilite el boton derecho del raton ya puedes entrar nuevamente a www.variedadespalencia.com


      ANTONIO PALENCIA

      Eliminar
    3. Gracias. Busca esta parte:

      #menudesplegable li {
      float: left;
      margin: 0px 0px 0px 30px;
      padding: 0;
      border-left: 1px solid #000;
      }


      Cambia ese 30px por un valor más bajo para que se acerquen más las pestañas.
      Y añade lo que está en negrita para que tengan un borde que las separe.

      Eliminar
  123. Listo potro me sirvio pero al pegar mas las letras del menu ya no queda centrado sino hacia la izquierda y si le coloco float: center entonces se alinean una en el centro y las demas le siguen hacia abajo

    ANTONIO PALENCIA
    WWW.VARIEDADESPALENCIA.COM

    ResponderEliminar
    Respuestas
    1. Pues sí, es lo malo. Aunque a decir verdad así como está ahora yo lo veo bien :)

      Eliminar
  124. Hola POTRO, estube mirando el post ya que poner un menu horizontal deslizante en mi blog es mi deuda pendiente en 3 años en blogger :)
    HICE TODO LO QUE DICE EN EL POST, DE HECHO BORRE LOS jQuery Y DEJE SOLO LA QUE ESTÁ EN LA ENTRADA. TODO PERFECTO, PERO NO SE DESLIZAN LAS SUBPESTAÑAS... PORQUE ME SUCEDE??? aqui puedes verlo http://corazonpanza.blogspot.com/

    ResponderEliminar
    Respuestas
    1. Hola DE CORAZON PANZA. Veo que tienes el gadget de Páginas pero no el código que se menciona en la entrada (el tercer código).

      Eliminar
  125. Lo que pasa es que eh hecho todo, y como no tuve los resultados esperados volvi a poner todo como estaba. El gadget de Paginas es necesario eliminarlo Potro??? porque no se deslizaria??

    ResponderEliminar
    Respuestas
    1. Sí es necesario eliminarlo y poner el código que se indica en la entrada. Sino se siguen los pasos al pie de la letra no funcionará.

      Eliminar

Si tu blog contiene material protegido por derechos de autor habilita tu perfil y deja únicamente el nombre de tu blog, no dejes la dirección del mismo, de lo contrario el comentario será eliminado.

 
Ir Arriba Ir Abajo
I Ciudad Blogger