Menú horizontal con efecto deslizante

18 de septiembre de 2009 637 comentarios ,
AVISO
Hay una versión actualizada de este menú, la cual permite personalizar el menú de una forma más sencilla, utiliza una versión más reciente de jQuery, y está habilitada para usarse junto con Scriptaculous y Prototype.



menu-slide-horizontal
Este es un menú horizontal desplegable para el blog con efecto deslizante. El autor es Dynamicdrive y está basado en librería jQuery. Es un menú muy elegante al que le puedes agregar sub menús y estos aparecen con un efecto deslizante hacia abajo. Puedes verlo funcionando en este blog de pruebas.

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


Para poner este menú horizontal en Blogger sólo hay que seguir estos sencillos pasos:

Entra a Plantilla | Edición de HTML y pega antes de </head> lo siguiente:
<link href='http://dl.dropbox.com/u/647003/CiudadBlogger/Scripts/jqueryslidemenu.css' rel='stylesheet' type='text/css'/>
<!--[if lte IE 7]>
<style type="text/css">
html .jqueryslidemenu{height: 1%;}
</style>
<![endif]-->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script src='http://dl.dropbox.com/u/647003/CiudadBlogger/Scripts/jqueryslidemenu.js' type='text/javascript'/>

Ahora entra en Diseño | Añadir un gadget | HTML/Javascript y pega ahí esto:
<div id="myslidemenu" class="jqueryslidemenu">
<ul>
<li><a href="#">Pestaña 1</a></li>
<li><a href="#">Pestaña 2</a></li>
<li><a href="#">Pestaña 3</a>
<ul>
<li><a href="#">Sub 3.1</a></li>
<li><a href="#">Sub 3.2</a>
<ul>
<li><a href="#">Sub 3.2.1</a></li>
<li><a href="#">Sub 3.2.2</a></li>
<li><a href="#">Sub 3.2.3</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Pestaña 4</a></li>
<li><a href="#">Pestaña 5</a>
<ul>
<li><a href="#">Sub 5.1</a></li>
<li><a href="#">Sub 5.2</a></li>
<li><a href="#">Sub 5.3</a></li>
<li><a href="#">Sub 5.4</a></li>
</ul>
</li>
<li><a href="#">Pestaña 6</a></li>
</ul>


<br style="clear: left"/>
</div>

Ahora cambia los sígnos de número ( # ) por la URL del enlace del botón y arrastra ese elemento abajo de la cabecera.
Si quieres poner otra pestaña sólo debes agregar una línea como esta:

<li><a href="#">Otra pestaña</a></li>

Y si quieres agregar una pestaña con sub menú entonces agrega esto:
<li><a href="#">Otra pestaña</a>
<ul>
<li><a href="#">Sub menu 1</a></li>
<li><a href="#">Sub menu 2</a></li>
</ul>
</li>

Si quieres cambiar los colores del menú tendrás que editar el archivo .css y luego subirlo a tu propio servidor.
Aquí les dejo el script y el archivo CSS por si lo quieren editar o por si lo quieren subir a su propio hosting. Sólo recuerda que si lo subes a tu propio hosting deberás cambiar las URL que se encuentran en el código que pegaste antes de </head>

Descargar script y hoja de estilos


637 comentarios en:

" Menú horizontal con efecto deslizante "

  1. Hola Potro, muchisimas gracias por esta informacion. Este blog tuyo vale millones.

    ResponderEliminar
  2. Hola Walter,

    Valen mucho más sus comentarios.
    Gracias por tu visita.
    Saludos!

    ResponderEliminar
  3. Que estás "modesto" potro!.
    Jajaja.
    Saludos.
    Jpz.-

    ResponderEliminar
  4. I have a question =P jajaj como siempre hinchandote, me copo mucho el menu, lo personalize todo, le elimine la barra negra del costado tambien (A), pero me quedo una cosa colgada, no lo pude centrar, ya que el float en el codigo css toma el right y el left, pero el center no, si tenes alguna solucion que no te saque mucho tiempo buenisimo, sino no hay problema

    desde ya como siempre agradecido por tus posteos, ezequiel :)

    ResponderEliminar
  5. ya lo solucione jajaj, si queres borra los comentarios asi no te ocupan lugar :), un abrazo grande

    PD: un dia te trato de vos, y un dia te trato de usted jaja, disculpa, y gracias de nuevo

    ResponderEliminar
  6. "I have a question" jajajajaja. Ya vi tu menú y te ha quedado bastante bueno.
    P.D. Nooo, de usted no me trates =P

    Saludos.

    ResponderEliminar
  7. jaja :P cual de los dos viste? xq un menu todavia no lo modifique =P jajaj

    un abrazo grande :)

    ResponderEliminar
  8. Evidentemente el que ya estaba modificado =)

    Un abrazo!

    ResponderEliminar
  9. wow.. GRACIAS!!!!

    hace tiempo buscaba hacer algo asi y ahora ya lo tengo listo... ‡D

    un abrazo grande .. muy buena pagina..

    ResponderEliminar
  10. Hola ++Animus_Codex++

    Me alegro que te haya sido útil, ya lo vi en tu blog... perfecto!

    Un abrazo!

    ResponderEliminar
  11. Muchas gracias estimado por este sabio consejo. Sin duda una gran ayuda para aquellos que estamos iniciándonos en esto del diseño web. Muy agradecido.

    ResponderEliminar
  12. Hola El Dennys,

    Me alegra que te haya servido, cualquier cosa que necesites estoy a tus órdenes.
    Saludos.

    ResponderEliminar
  13. hola como va, agregando el menú no tuve problema, el problema es que creo que mi plantilla no deja que se despliegue. me ayudas ? no entiendo mucho de html.
    saludos y gracias. te dejo la direccion para que veas como esta la barra

    downloadkingsite.blogspot.com/

    ResponderEliminar
  14. Hola Mackie,

    No veo que hayas agregado los códigos del primer paso, esos son los archivos que le dan el efecto deslizante.

    ResponderEliminar
  15. Buen blog potro, has sido de mucha ayuda. Saludos

    ResponderEliminar
  16. Hola Janhio, qué bueno que te ha servido. Saludos.

    ResponderEliminar
  17. Buena entrada, muy completa también.

    ResponderEliminar
  18. Un favor.

    Yo tengo mis "etiquetas" en forma de menu horizontal. ¿Cómo puedo tener mis etiquetas ahora con este diseño de menu horizontal?

    ResponderEliminar
  19. Hola El Autor,

    Sólo agrega en este menú el enlace a cada etiqueta, por ejemplo:
    http://nobledesproposito.blogspot.com/search/label/Costumbres

    Saludos.

    ResponderEliminar
  20. Hola , la verdad es que esta fenomenal pero por alguna razon con otro navegador distinto a Internet explorer el menu no se despliega correctamente ,podeis echar un vistazo http://escueladegolflaenvia.blogspot.com alguna sugerencia ... Saludos

    ResponderEliminar
  21. Hola Jose Manuel Ruiz,

    Para no complicarte la vida podrías hacer más ancho la cabecera para que se ajusten bien las letras.
    Entra a Diseño > Edición de HTML y busca esto:
    #header-wrapper {
    Abajo de esa línea pon esto:
    width:800px;

    Con eso se debe arreglar.
    Saludos.

    ResponderEliminar
  22. Amigo, por favor, indícame cómo puedo eliminar las pestañas horizontales de mi plantilla que aparecen por defecto.

    ResponderEliminar
  23. Hola Alberto,

    Recién te acabo de contestar por correo cómo eliminarlo. Disculpa que tardara en contestar pero tuve un fin de semana ocupado.
    Saludos.

    ResponderEliminar
  24. http://eduardo-950.blogspot.com/ beanlo esta chido

    ResponderEliminar
  25. dejen comentarios porfaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

    ResponderEliminar
  26. Por favor acabo de publicar mi blogspot hace unos dias y no se porque hoy me aparece el menu deslizante con un error y no se porque. ayudaaaaaa por favor , gracias.
    http://flowonthefloor.blogspot.com/

    ResponderEliminar
  27. Hola flow on the floor,

    En tu blog sólo veo el menú con el borde superior.
    Tampoco especificas qué error te aparecía por lo que me es imposible adivinar.

    Saludos.

    ResponderEliminar
  28. Hola perdon que no espesifique bien, ademas luego de escribirte cambie el menu. Mi problema es este, mira tu blog de pruba y fijate como aperese el menú http://ciudadbloggerpruebas2.blogspot.com/
    Flow on the floor

    ResponderEliminar
  29. Hola flow on the floor,

    Discúlpame tú a mí, no me había fijado que en Internet Explorer tenía una falla. Ya lo arreglé, copia de nuevo el primer código y deberá mostrarse bien.

    Saludos.

    ResponderEliminar
  30. Potro yo deseo colocar en mi blog un menu como este pero quiero que este en la plantilla, no como gadget, como hago?, dime si se puede modificar este.

    ResponderEliminar
  31. Entonces entra en Diseño > Edición de HTML y pega el segundo código debajo de esta línea:
    <!-- header-container -->

    Saludos.

    ResponderEliminar
  32. Tienes que descargar el archivo que puse abajo del post, ahí hacer las modificaciones y luego subirlo a un hosting.

    Saludos.

    ResponderEliminar
  33. HOLA AMIGO MUY BUEN CONSEJO Y MUY BUENA LA PAGINA YO TENGO UNA CONSULTA COMO HAGO PARA PONER EL CONTENIDO DEL MENU POR EJEMPLO CUANDO YO PONGA PRESUPUESTOS AL HACER CLICK SE DESPLIEGUEN LOS PRESUPUESTOS DETALLADOS ME GUSTARIA QUE ME EXPLIQUES TE DEJO MI MAIL ASI ME AGREGAS Y SI PUEDES HACERME EL FAVOR
    MUY BUENAA LA PAGINA Y MUYY UTILL

    ResponderEliminar
  34. MI CORREO ES NOCHEDECLASICOS@LIVE.COM TE ESPERO POR FAVOR EN EL MSN ASI ME AYUDAS GRCIAS POR EXISTIR CON TU PAGINA

    ResponderEliminar
  35. Hola LA PAZ INFORMA,

    No he entendido bien tu pregunta.
    Puedes poner en una entrada el contenido que quieres, publica la entrada, luego en el menú pones la URL de la entrada donde está ese contenido, en este caso los presupuestos que mencionas y listo, al hacer click sobre la pestaña del menú se abrirá el artículo que quieres.

    Saludos y muchas gracias por tus comentarios.

    ResponderEliminar
  36. Gracias por el menu!! lo agregamos a nuestro blog. Nos faltaria cambiar el color... pero no importa, asi igual esta bien.
    De nuevo gracias!!!

    ResponderEliminar
  37. Hola soy diego y soy muy nuevo en todo esto de las paginas web, estoy usando tu menu q esta excelente. Ahora mi pregunta es como puedo hacer para posicionarlo donde yo quiera!???
    Muchas gracias desde ya!!

    ResponderEliminar
  38. Hola Diego,

    El elemento HTML/Javascript donde pegaste el código lo puedes arrastrar en donde quieras hasta que quede en el lugar deseado.
    Saludos!

    ResponderEliminar
  39. Disculpa mi ignorancia pero cual seria la parte HTML/Javascritp el q coloco entre las etiquetas head>?
    saludos

    ResponderEliminar
  40. Lo que colocas antes de </head> es el primer código.

    ResponderEliminar
  41. Buenas de nuevo soy diego!aca otra pregunta ahi consegui moverlo pero se mueve la parte que dice ver/ocultar menu!!
    pero la parte del menu sigue saliendo desde la izquierda como puede hacer para mantener el mismo efecto pero que salga desde abajo de ver/ocultar menu!????
    desde y muchas gracias!!

    ResponderEliminar
  42. Hola Diego, ¿cuál parte de ver/ocultar menú?

    ResponderEliminar
  43. Y como modifico esos archivos ???? para cambiar el color.

    ResponderEliminar
  44. Hola Erick,

    Descarga el paquete y abre el archivo menu-slide-style.CSS, ahí busca los backgrounds y cambia el código del color, guarda los cambios y sube el archivo a un servidor. Luego busca esta parte del código:

    <link href='http://dl.dropbox.com/u/647003/CiudadBlogger/Scripts/jqueryslidemenu.css' rel='stylesheet' type='text/css'/>

    Y cambia la URL por la URL del archivo que subiste.
    Saludos.

    ResponderEliminar
  45. hola he venido siguiendo tu pagina y te quiero dar las gracias

    la verdad esta execelente muy entendible!!

    grax por ayudarnos a todos!!


    saludoz amigo!!

    ResponderEliminar
  46. Gracias a ti Mega por tus comentarios y por tu preferencia.

    Saludos!

    ResponderEliminar
  47. estoy usando este menu en mi blog, agradezco mucho por esto y por todo lo que nos brundan!!

    ResponderEliminar
  48. Qué fantástico que te haya sido útil.
    Saludos!

    ResponderEliminar
  49. oye potro otra vez molestando XD

    lo que pasa es que cuando despliego el menu me sale atras de la entrada y no se ve lo tapa

    como le hago para q el menu se vea enfrente?

    ResponderEliminar
  50. Hola Mega,

    No es ninguna molestia. Eso es porque tienes el video arriba. Con los videos siempre se tiene esos inconvenientes, los elementos se cortan cuando hay un video de por medio, sucede con la lista de seguidores, menús hechos con JQery, etc.
    Verás que cuando escribas otra entrada y no tenga video, o el video esté hasta abajo ya no habrá problema.

    Saludos.

    ResponderEliminar
  51. orale potro si es cierto muchas grax bro!

    te lo agradesco mucho!!

    y tu blog esta genial!!

    saludoz!

    ResponderEliminar
  52. hola potro, gracias por brindarnos estas herramientas para nuestros blogs, te comento que agregamos este menu deslizante a nuestro blog pero si te fijas el menú no da la oportunidad de poder hacer click con calma a la opcin que quisieramos entrar a través del mouse, espero que puedas ayudarnos.
    el blog es
    www.amoroporlosanimalesbolivia.blogspot.com
    APLAB

    ResponderEliminar
  53. Hola APLAB,

    Es que no tiene suficiente espacio, te recomiendo que coloques el menú debajo de la cabecera para que tenga más espacio:
    http://ciudadblogger.com/2009/12/anadir-gadgets-abajo-de-la-cabecera-del.html

    Saludos.

    ResponderEliminar
  54. Hola amigo.
    Quise despejar el lateral derecho y añadí este menú horizontal, pero si ves mi blog http://mundoporlibre.com , han surgidos dos problemas: Los títulos no están centrados en la cabecera y aparece un puntito de color delante de cada título ¿ Cómo puedo solucionarlos ?
    Gracias por tu magnífica ayuda.
    Un abrazo

    ResponderEliminar
  55. Hola Ricardo,

    Qué gusto verte de nuevo por acá.
    Los títulos están muy grandes por estar en mayúsculas, es por eso que ocupan más espacio además de que el texto de cada pestaña es largo. Podrías intentar ponerlo en minúscula para que ocupe menos espacio y se centre.

    Los puntitos son por los estilos de tu plantilla, para eliminarlos (sólo del menú) pega antes de ]]></b:skin> lo siguiente:

    #myslidemenu ul li {
    padding-left: 0px;
    background: #414141;
    }

    Saludos!

    ResponderEliminar
  56. Gracias El Potro.¡Quedó muy bien!
    Un abrazo

    ResponderEliminar
  57. Hola!!
    Antes q nada, está buenisima ésta página, muy buenos aportes, ya utilicé algunos y me han servido muchisimo!!
    Este me encanta y cumple con lo que estoy necesitando, el problema es que el color no combina nadita nadita con mi blog jajaja
    Descargué el archivo que adjuntaste e intente cambiar los colores pero no mas no se pudo, cabe mencionar que no soy experta en lenguaje HTML o cosas relacionadas con el Diseño web, soy completamente amateur, así que se me complica un poco...
    Ojalá pudieras explicarme más detalladamente como cambiarle los colores o ayudarme a hacerlo!! xfa xfa!!!
    jejejeje

    te dejo la dirección de mi blog para q lo chekes... xq además, me aparece orillado y no centrado :´(

    Entre más pronto me brindes te ayuda te lo agradecería enormemente!!!

    Saludos!!!

    http://cesar-esquivelch.blogspot.com/

    pd. Los consejos al respecto serán enormemente importantes yd e antemano agradecidos!!

    ResponderEliminar
  58. Hola LiLiS,

    Muchas gracias por tus comentarios ;)
    No es que esté orillado sino que está centrado respecto al espacio de tus entradas. Necesitas ponerlo justo debajo de la cabecera para que quede centrado respecto a todo el ancho del blog.
    El archivo que debes editar para cambiar los colores es el que se llama jqueryslidemenu.css
    El colo de fondo lo cambias donde dice:
    .jqueryslidemenu{
    font: bold 12px Verdana;
    background: #414141;

    Igual debes cambiar el color de las pestañas que es esta parte:
    background: #414141; /*background of tabs (default state)*/

    En ambos casos deberás cambiar lo que está en negrita por el código del color que quieras.
    Una vez que lo edites debes guardarlo y subirlo a un hosting. Por último cambia en el primer código esta parte:
    http://dl.dropbox.com/u/647003/CiudadBlogger/Scripts/jqueryslidemenu.css
    Y sustitúyela por la URL del archivo que acabas de subir al hosting.

    Cualquier duda me comentas.

    Saludos!

    ResponderEliminar
  59. Hola!! muchas gracias por tu respuesta tan pronta!!

    Ps verás, esto se me ha convertido casi en una obsesión!!
    jajajajajaja

    ps volvi a descargar el archivo y no aprece el q tu me dices... así q mejor lo buske por medio del link y lo copie en un block de notas... ya lo subi, pero no me aparece como "jqueryslidemenu.css"

    cheka mi descarga y avisame q anda mal, XFA!!!

    http://www.scribd.com/full/25959036?access_key=key-1dily1084ir3zg1gcml9

    ahh!! y me entró una nueva locura jajaja de tanto andarle ahi moviendo lo puse como plantilla, pero una pestaña no se guardó, quiza por q tiene muchos links o no se...

    bueno, pero primero lo kiero cambiar de color y ya luego cheko lo demás... ojalá me puedas ayudar!!

    Graciasss!!

    ResponderEliminar
  60. Pues veo que ya tienes el cambio del color, sólo tienes que guardarlo.
    Cometí un error, el archivo de llama menu-slide-style.css ahí haz los cambios que hiciste en el block de notas y luego le cambias el nombre a jqueryslidemenu.css
    Lo subes y cambias la URL del primer código.

    Saludos.

    ResponderEliminar
  61. Hola Potro!!
    Ps ya, después de tanto romperme el coco jajaja logré terminarlo... muchisimas grax x tu ayuda... te repito, es muy buena tu página, me ayudó bastantisimooo!!!

    Saludos y ya te seguiré dando lata con mis dudas después jejeje

    ResponderEliminar
  62. Ya lo veo funcionando y combina mucho más que el color original ;)
    Si te animas también puedes cambiar el color de las pestañas al pasar el mouse, actualmente está en color negro.

    Para hacerlo es el mismo procedimiento, sólo hay que modificar esta parte:

    .jqueryslidemenu ul li a:hover{
    background: black; /*color de las pestañas al pasar el mouse*/

    Y cambiar donde dice black por el código del color que quieras, por ejemplo blanco sería #FFFFFF

    Saludos!

    ResponderEliminar
  63. HOLA SOY NUEVA EN ESTO Y ME HA ENCANTADO TU EXPLICACION. MI PREGUNTA AHORA ES COMO HAGO PARA PONER LAS POST EN CADA PESTAÑA O SUB PESTAÑA PARA QUE CUANDO LA TOQUE AHI ME SALGA LAS POST
    VISITAME
    http://ksliteraturanicaragua.blogspot.com/

    GRACIAS OTRA VEZ

    ResponderEliminar
  64. Hola carol,

    En el último código donde está el signo de gato (#) es donde debes poner el enlace de la página o del post.
    Por ejemplo, si vas a poner el enlace de un post entra a tu página y haz click derecho sobre el título del post y selecciona Copiar la ruta del enlace, luego sustituye el signo de gato por lo que acabas de copiar.
    Lo mismo si quisieras poner como enlace una etiqueta, sigue el mismo procedimiento.

    Saludos.

    ResponderEliminar
  65. MUCHISIMAS GRACIAS. DE TODO CORAZON
    TU INFO ME HA SIDO DE GRAN AYUDA!!
    TENGO OTRA PREGUNTA
    'COMO LE HAGO PARA QUE LAS PESTAÑAS NO SALGAN COMO GADGET SINO JUSTO ARRIBA, Y CUBRA LAS TRES COLUMNAS.
    ES QUE AL ABRIRSE LAS PESTAÑAS DESPLEGABLES LAS COLUMNAS PRINCIPALES TAPAN LAS LETRAS
    http://ksliteraturanicaragua.blogspot.com/
    GRACIAS DE NUEVO

    ResponderEliminar
  66. Y CON LO ANTERIOR LA PREGUNTA QUE YA RESPONDISTE, COMO HAGO PARA COLOGAR VARIOS ENLACES A UNA PESTAÑA, ES DECIR VARIAS ENTRADAS. SOLO LAS SEPARO POR COMAS O LAS PONGO TODAS EN UNA PLANTILLA??
    GRACIAS
    SALUDOS

    ResponderEliminar
  67. Hola Potro!!

    Sip ya hice lo ke me recomendaste y me gustó jejeje... ya voy entendiendo un poco más...

    Oye, crees q puedas asesorarme para poner vinculos para descargar "adobe acrobat"?

    Porque no tengo ni idea de como hacerle jejeje...

    Saludos!!

    ResponderEliminar
  68. Hola carol,

    El último código pegalo entonces no en un elemento HTML/Javascript, sino que entra en Diseño > Edición de HTML y pega el código justo después de:

    <div id='content-wrapper'>

    Los demás enlaces los pegarías en las partes donde dice Sub 3.1, Sub 3.2, etc.

    Saludos.

    ResponderEliminar
  69. Hola LiLiS,

    No he entendido muy bien, ¿exactamente que quieres hacer con los enlaces?

    ResponderEliminar
  70. ok, lo q pasa es q el fin de la pagina es q se suban presentaciones pdf, y no todos tienen pdf y kiero poner un icono para descargar acrobat... como cuando ponene en las paginas iconos para descargar mozilla o exlorer, no se si me explico...

    ResponderEliminar
  71. Muchas gracias! ta muy bueno!!!

    ResponderEliminar
  72. Hola LiLiS,

    Puedes usar este código para que lo descarguen:

    <p>Descarga la última versión de Acrobat Reader</p>
    <a href="http://get.adobe.com/es/reader/"><img src="http://i49.tinypic.com/24dhcn7.jpg"/></a>

    Si lo deseas puedes cambiar la imagen por la que gustes.
    Saludos.

    ResponderEliminar
  73. Cómo hago para que en vez de un menú deslizante horizontal sea vertical? muchas gracias de antemano

    ResponderEliminar
  74. Con este no se puede. Visita la sección de menús, ahí hay un menú vertical que igual te puede servir.

    ResponderEliminar
  75. Hola Potro!!...

    Gracias!! si, es lo q andaba buscando pero no sabía como hacerlo jejeje... una vez más me salvaste...

    Nos seguimos viendo por aki vale!!

    Saludos!!

    ResponderEliminar
  76. buenisimo ya lo pude muchas gracias pero a mi solo me deja poner 9 menus despues ya no se ven lo que pongo tiene una cantidad maxima?? gracias

    ResponderEliminar
  77. Hola Sofi,

    No tiene un límite, pero el menú se adapta al ancho de donde lo hayas puesto, si se agregan varias llegará un punto que sobrepasarás el ancho y ya no se mostrarán todas.

    Saludos.

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

    ResponderEliminar
  79. Hola rogikato,

    Siempre que tengas un elemento como los que tienes debajo de un menú deslizante tendrás el mismo problema, lo mejor es reubicar el menú o los otros elementos.

    Saludos.

    ResponderEliminar
  80. Hola amigo,
    Felicitaciones y muchas gracias por la ayuda brindada...
    Siguiendo los pasos, he cambiado el color pero al colocarlo en mi blog de pruebas no me queda...
    la duda que tengo es que a mi hosting subí el archivo modificado solamente (quizás debí subir el ZIP COMPLETO con el archivo modificado)
    Échale un vistazo al blog de pruebas y verás que el menú quedó vertical y sin el efecto.. :(
    http://pruebaaguasabiertas.blogspot.com/#

    Espero tu pronta respuesta
    MUCHAS GRACIAS!

    ResponderEliminar
  81. Hola Lucky,

    El problema es que la URL que pusiste está mal, tienes esta:
    http://200.58.112.30/Varios/jqueryslidemenu.css

    Al ponerla en la barra de direcciones del navegador dice que la dirección está rota o no existe.

    Verifica que la URL de donde lo subiste sea la correcta, o intenta subirlo a otro hosting.

    Saludos.

    ResponderEliminar
  82. ESPECTACULARR!!!, ahi me quedó bien, Muchas gracias!!!

    Ahora tengo otro problemita...
    Cuando se despega el menú es como que queda "debajo" del cuerpo del blog... quizás sea porque tengo deshabilitada la funcion "copiar", pero tengo miedo que sea la plantilla..
    te dejo el blog de prueba para que lo veas
    http://pruebaaguasabiertas.blogspot.com/

    gracias por la rapida respuesta!, un fenomeno!

    ResponderEliminar
  83. Uhh sí que está raro. Prueba hacerlo en otro blog de pruebas que no tenga esa plantilla, así sabremos si es asunto de la plantilla o si moviste por accidente algo en los estilos.

    Saludos!

    ResponderEliminar
  84. http://pruebaaguasabiertas.blogspot.com/#

    Ahora se ve pero transparente.... es muy raro, no?
    En otra plantilla funciona bien..
    Alguna pista de lo que pueda ser?
    MUCHAS GRACIAS por la paciencia!!

    ResponderEliminar
  85. Supongo que pueden ser dos cosas; es es la plantilla que tiene conflictos de estilos, o tus pestañas son demasiadas, intenta quitar algunas a lo largo.

    Saludos.

    ResponderEliminar
  86. hola muchas gracias por tu ayuda. me has dado mis buenas salvadas. y si no es molestia deseo preguntarte, tu me explicASte como colocar las entradas para que las vea cuando toco cada pestaña, ahora mi problema es, si hago varias entadas como hago para que me salgan todas al tocar una sola pestaña es decir, como le asigno varias entadas a una pestaña??

    ResponderEliminar
  87. Hola carol,

    En ese caso todas las entradas que quieres agrupar deben tener una misma etiqueta. Para poner etiquetas verás que cuando redactas un post hasta abajo hay un espacio que dice Etiquetas de esta entrada:, ahí deberas escribir la etiqueta que quieres asignarle, por ejemplo animales.

    Luego entra en Diseño > Elementos de la página > Añadir gadget > Etiquetas. Aparecerá un nuevo gadget de etiquetas en tu blog; con el botón derecho sobre el enlace a una etiqueta selecciona Copiar dirección de enlace (o algo parecido).
    Esa URL es la que deberás poner en tu menú, así cada que alguien haga click en esa pestaña aparecerán todas las entradas que contienen esa etiqueta.

    Puedes hacerlo con todas las entradas que quieras, y el gadget de etiquetas puedes eliminarlo después de que hayas obtenido la URL de cada una de ellas.

    Saludos.

    ResponderEliminar
  88. graxias potro me sirvio demasiado ha y con respecto al menu estilo dock lo puse en otro blog y no tuve ningun problema graxias excelente y como dijo Walter Conejo Carballo tu blog vale millones

    ResponderEliminar
  89. Gracias a ti por tu visita y por tus comentarios.
    Me alegro que todo te haya resultado bien.
    Saludos!

    ResponderEliminar
  90. Hola Potro, nuevamente yo..

    Cambié la plantilla y podrás ver que el menu funciona pero no es tan preciso... cuando quiero seleccionar algun submenu se me sale, probalo y decime que error estoy cometiendo porque no logro hacerla funcionar correctamente..
    http://pruebaaguasabiertas.blogspot.com/

    Muchisimas gracias

    ResponderEliminar
  91. Hola Lucky,

    Fíjate que ese conflicto sólo sucede en Internet Explorer, en los demás navegadores tu menú funciona a la perfección.
    Sucede que cuando se abre el submenú y quieres seleccionar, el navegador no reconoce que haya un enlace dentro así que prefiere hacerle caso al enlace del título de la entrada.

    Creo que para que te funcione sin problemas también en Internet Explorer es que pongas el menú hasta arriba de la cabecera, así no encontrará otro enlace con el cual haga conflicto.
    Por cierto que esa plantilla me gusta más que la anterior ;)

    Saludos.

    ResponderEliminar
  92. Hola Potro...

    Y como hago para poner el menú por encima de la cabecera??


    (a mi tambien me gustó mas la nueva plantilla!!, je)

    Muchas gracias por tu atención!

    ResponderEliminar
  93. El segundo código en vez de pegarlo en un elemento HTML/Javascript, pégalo directo en la plantilla, justo antes de la etiqueta <div id='header-wrapper'>

    Con eso tendrás el menú arriba de la cabecera.
    Saludos.

    ResponderEliminar
  94. hola potro!!

    en este caso, el menu pasa por debajo de la "cabecera"...
    hay posibilidad de eliminar esa "cabecera"?.. el logo lo tengo insertado en la plantilla, por lo tanto ésa "cabecera" yo no la uso...
    http://pruebaaguasabiertas.blogspot.com/

    (como se complico el menu, no??)

    ResponderEliminar
  95. hola que tal Potro, espero que me puedas ayudar sucede que hice los cambios al .css y lo subí al dropbox y pense que ya estaba pero solo sirve hasta que elimino las cokies por que si no en otra compu no se ve del color que elegí y ni se ve bien, aquí esta la direccion del archivo que subi https://dl-web.dropbox.com/get/jqueryslidemenu.css?w=75aed1f0,
    tambien probe subirlo a Adrive pero es lo mismo saludos y muchas gracias

    ResponderEliminar
  96. perdón por molestarte ya lo pude solucionar lo subí a http://www6.speedyshare.com/files/21107871/download/jqueryslidemenu.css y parece que ya, bueno en fin aprovecho para darte muchas gracias, la verdad que blogs como este es difícil encontrar es destacable lo que tu haces, lo he aprovechado mucho

    ResponderEliminar
  97. Me ganaste, ya te iba a responder que la URL que tenías de Dropbox estaba mal.
    Gracias por tus comentarios, me da gusto que el contenido te ha sido útil.

    Saludos.

    ResponderEliminar
  98. hola Potro!
    queria preguntarte como es la forma de poner un pie de pagina en el cual pueda incluir varios gagdgets, tipo sitemeter, contador, licencia creative commons, estadisticas, reviewxreview, etc..
    tal como vos los tenes aqui debajo en tu pie de pagina
    muchas gracias!!!
    saludos amigo

    ResponderEliminar
  99. Hola Pedro,

    Necesitaría ver tu blog para saber si tu plantilla sólo hace falta habilitar esa área o sino decirte cómo ponerlo.

    Saludos.

    ResponderEliminar
  100. bien aca te dejo mi blog:
    http://alcobavisual.blogspot.com
    fijate que los gagdgets que estan en la siderbar (contador, hora, license commons,etc) quisiera ponerlos debajo en un pie de pagina todos juntos
    muchas gracias potro!

    saludos-

    ResponderEliminar
  101. Justo ahí donde tienes el gadget de las frases aleatorias agrega otro gadget HTML/Javascript, ahí pega los códigos de las imágenes que quieres.
    Para que queden todas horizontalmente pega un código seguido del otro sin dejar espacio entre ellos.

    Saludos.

    ResponderEliminar
  102. Una vez mas 1.000.000 de gracias!
    fenomeno!

    saludotes!

    ResponderEliminar
  103. hola! gracias me gusto el menu lo e colocado en mi sitio, pero segui los pasos que escribiste los submenus se desplazan por detras de la plantilla y me borro el banner en flash para que me entiendas mejor te dejo el link del blog http://crepusculo-latina.blogspot.com/ ojala me puedas ayudar.

    saludos!

    ResponderEliminar
  104. mm me falto decirte que el banner en flash es en la parte donde dice destacamos

    ResponderEliminar
  105. ups disculpame el que coloque fue este
    http://ciudadblogger.com/2010/01/sexy-drop-down-menu-con-jquery-y-css.html

    ResponderEliminar
  106. Hola samantha,

    Para que el menú funcione apropiadamente no debe haber detrás de él ningún objeto flash ni otros enlaces, de lo contrario no funcionará.

    Saludos.

    ResponderEliminar
  107. Hola de nuevo potro muchas gracias por tu ayuda , no pude utilizarlo por ese inconveniente, pero a cambio coloque otro codigo tuyo el de modificar una entrada para que resalte y permanezca siempre arriba del sitio , te invito para que mires como quedo =). gracias de nuevo tu pagina me a ayudado muchisimo

    saludos.

    ResponderEliminar
  108. Sí me fijé y se ve bastante bien ;)
    Saludos!

    ResponderEliminar
  109. Hola Potro: Me ocurre lo de que se esconden los submenús. Mira mi blog de pruebas http://lapprentidemagicien.blogspot.com/
    Si lo coloco arriba del header se esconden trás él. Lo probé en una plantilla de blogger y al quedar en dos líneas los submenús se escondían debajo de la segunda.Hay solución posible. Gracias anticipadas.

    ResponderEliminar
  110. ¿No será que algún otro script está interfiriendo?
    Prueba eliminar los scripts que usas para verificar que no sea eso.

    Saludos.

    ResponderEliminar
  111. Hola! Ya puse este menú y me parece súper funcional! Gracias.
    Quería saber si en este caso también es posible alojar directamente en la plantilla los códigos que ejecutan este menú; sin tener que alojarlos necesariamente en otro servidor (como nos enseñaste en http://ciudadblogger.com/2010/02/como-alojar-scripts-en-la-plantilla.html).
    En caso de que sí se pueda, tengo una confusión, ya que veo que hay dos src= y además hay otra url más. ¿Cómo debo hacer con esos tres links? Es que por más que le he dado vueltas al asunto, no lo capto.
    Por eso quisiera pedirte (abusando de tu amabilidad), si pudieras anotarme cómo debería quedar exactamente el primer bloque de códigos de este post, si es que alojo los scripts directo en la plantilla.
    (Ups! Es que ya me tildié...ja, ja...).
    Gracias un millón!

    ResponderEliminar
  112. Se debería poder incorporar también directo en la plantilla, sería cuestión de que lo intentes.
    El script aparece dos veces porque uno es el script normal y otro es una condicional para Internet Explorer. No estoy seguro que pueda funcionar directo en la plantilla pero con intentar no se pierde nada ;)

    Saludos!

    ResponderEliminar
  113. Hola, Potro! Después de un millón de intentos fallidos (y 14 intentos más - ja,ja), por fin creo que logré alojar todos los scripts en la plantilla y creo que está funcionando bastante bien. Aunque ahora me parece que la página tarda más en cargar; pero no sé si será por otra cosa. Supongo que todo se está ejecutando en la propia plantilla, porque quité las 3 urls del código de arriba.
    También le modifiqué ciertos aspectos y colores. Pero porfa, hay dos cositas que quisiera que me indicaras en qué parte debería modificarlas, pues no sé cómo hacerlo:
    1. La alineación de los sub menús es centrada y quisiera que esa fuera a la izquierda.
    2. Mis botones de menú no caben en una línea y se autoajustan en dos. Eso no es problema. El problemita es que cuando se despliega el sub-menú de los botones superiores, estos sub-menús quedan semiocultos por detrás de los botones de la fila de abajo, y entonces no se ven, porque quedan medio tapados. Quisiera que cuando se despliegue cualquier lista de sub-menús, siempre ésta quede en primer plano, mientras está desplegada. ¿Se podrá hacer esto?
    Tú perdona que pregunte tanto, pero es que ya traté de varias formas y no sé cómo solucionarlo. Muchas gracias por toda tu ayuda y muchos saludos!

    ResponderEliminar
  114. Hola Vicky,

    No sé qué navegador uses pero la mayoría muestran abajo una barra donde indica los elementos que se van cargando cuando se abre una página. Podrías entrar a tu blog y fijarte en esa barra, cuando veas que se detiene por mucho tiempo en un elemento ese elemento será el que esté causando que se alente la página, aunque se tiene que hacer la prueba unas tres veces para estar seguros.
    Respecto a alinear el texto de los submenús busca en la hoja de estilos CSS del menú esta parte:
    .jqueryslidemenu ul li ul li a{
    Justo debajo pega esto:
    text-align:left;

    Por lo otro no se puede, lo que puedes hacer es hacer más ancho el menú para que todas las celdas quepan a lo largo y se acomoden en una sola línea, para hacerlo igual en la hoja de estilos css busca al inicio esta parte:
    width: 100%;
    Cambiala por el ancho en pixeles que quieres, aunque se agrandará hacia la derecha y quizá eso no lo haga muy estético.

    Saludos.

    ResponderEliminar
  115. Saludos de nuevo, Potro. Ya cambié la alineación como me indicaste y me resultó perfectamente. Gracias. En cuanto a lo de la demora del blog en cargar, voy a examinar eso que me dijiste, para ver en qué elemento está la demora. Aunque parece que ahora sí está cargando más rápido, así que creo que ya no es problema. También gracias por el dato, porque no se me había ocurrido.
    Y lo del inconveniente de los sub-menús, solo me queda una duda: ¿por qué no se puede controlar el comportamiento de esos botones? ¿Es algo del propio menú que está hecho así o es que en ese tipo de lenguaje no se puede? Lo pregunto porque si es por el propio menú en sí, podría ponerme a buscar algún otro menú que no presente ese problema. Te agradecería si me ilustraras al respecto.
    Bueno, como ya yo tenía la barra de menús en el máximo ancho posible del blog, tuve que sacrificar uno que otro botón para que se acomodaran en una sola línea.
    Gracias por toda tu ayuda como siempre.
    Realmente no podemos pagarte toda la ayuda que nos das en Ciudad Blogger. Gracias.

    ResponderEliminar
  116. En su mayoría de los menús que requieren de un script para tener un efecto siempre surge ese problema respecto a la posición de los botones, aunque igual podrías buscar uno y con suerte encuentras uno adecuado.

    Con tus visitas me doy por cobrado ;)
    Saludos.

    ResponderEliminar
  117. olaa tengo un problema he puesto una nueva plantilla pero mi menu ya no se ve bien ya no funciona como hagoo ayuda porfaa!!

    ResponderEliminar
  118. Hola Sofi_winchester,

    De funcionar funciona, pero tienes muchas pestañas, eso hace que algunas se acomoden abajo e interfiera con las de arriba.
    La solución, reducir el número de pestañas.

    Saludos.

    ResponderEliminar
  119. mmm pero con la plantilla anterior funciona perfectamente por mas pestañas q tenga. . . si saco mas sera q va a funcionar con el nuevo? muchas gracias

    ResponderEliminar
  120. Quizá la plantilla anterior era más ancha y cabían más pestañas. Reduce las pestañas y verás que funciona.

    Saludos.

    ResponderEliminar
  121. saque mas de la mitad y me sigue sin funcionar :S

    ResponderEliminar
  122. Pues ahora veo otra plantilla distinta a la que vi hace un momento y no veo el menú ahí.
    Ten en cuenta que en plantillas que no son de Blogger es común que muchas cosas no funcionen.

    Saludos.

    ResponderEliminar
  123. potro sos grande, si sabés de algun gadget o alguna cosita de cambiar el cursor por una flecha azul o llamas o algo te agradezco, gracias de antemano.

    ResponderEliminar
  124. Ahora no puedo acceder a mis entradas pero usa el buscador y pon 'cambiar cursor del blog' ahí verás una entrada que explica cómo hacerlo.

    Saludos.

    ResponderEliminar
  125. Buenos dias, he visitado tu blog y esta muy bueno. De echo quisiera ponerle al mio este menu deslizante, el tema es que soy muy nueva en esto y hay cosas que no entiendo. No se de que parte de mi blog tengo que sacar la URL para poner en el menu por ejemplo inicio, contacto, mi perfil, etc. Bueno desde ya agradezco tu atención.
    Saludos
    Cintia
    http://comisiondeninezyadolescencia07.blogspot.com/

    ResponderEliminar
  126. Hola, en el segundo código donde dice Pestaña 1, Pestaña 2, Pestaña 3, etc. lo deberás cambiar por los títulos de tus pestañas, por ejemplo Inicio, Contacto, Perfil, etc.
    Luego verás ahí al lado un signo de gato (#) ahí debes poner la URL del enlace.

    Saludos.

    ResponderEliminar
  127. Hola, gracias por tu respuesta. Lo que me falta saber es como y de que parte de mi blog tengo que sacar la URL de las cosas que quiero poner para crear asi el enlace. Desde ya agradezco tu respuesta.
    Saludos.

    ResponderEliminar
  128. Para que te sea más fácil hazlo de esta forma:
    Abre la página que quieres enlazar, por ejemplo, abre la página de "contacto" que quieres agregar.
    Cuando abra, copia la dirección (URL) que aparece en la barra de direcciones de tu navegador y pégala en el menú donde te indique.
    Haz lo mismo para todas las URL que quieras sacar.

    Saludos.

    ResponderEliminar
  129. Gracias Maestro...estaba usando hasta ahora unmenu horizontal que había sacado justamente de tu blog, pero no me acordaba cual era, luego encontre el link...antes estuve 3 dias con los ojos rojos renegando con algunos que no explican bien o improvisan..lo tuyo es muy claro.
    Mil gracias. un gusto estar por aca!
    Abrazo..Felicitaciones por el blog!

    ResponderEliminar
  130. El gusto es mío por tu visita.
    Me alegra que te haya funcionado este menú y que hayas podido aplicarlo en tu blog.

    Un abrazo!

    ResponderEliminar
  131. Solo tengo una dificultad..ahora, disculpá, todo empezo barbaro cree los 2 primeros y el tercero con sub menu, cuando creo el cuarto que es fijo y el quinto que tiene submenu, se empiezan a ver de esos nuevos mas abajo los sub menu, y los menues chiquitos y arriba. SE TE OCURRE QUE PUDE haber echo mal?
    Gracias. Abrazo!

    ResponderEliminar
  132. Disculpá lo olvide por las dudas para que lo veas al error este es mi blog de pruebas http://fernando-fernandoprueba.blogspot.com/ Gracias.

    ResponderEliminar
  133. Pues he entrado y veo el menú sin ningún problema, veo 7 pestañas, dos de ellas con submenús los cuales funcionan sin ningún inconveniente.
    No sé si ya lo habrás solucionado o se trate de la versión de tu navegador.

    Saludos.

    ResponderEliminar
  134. Si perdón Potro, lo había solucionado y mandé un comentario que parece no salio, donde te agradecía y te preguntaba como hacer para eliminar las lineas blancas y si se puede cambiar a un color tipo gris grafito, no se cual es el código. Disculpá las molestias.

    Gracias.

    ResponderEliminar
  135. Últimamente Blogger está dando problemas con los comentarios, regularmente se publican pero puede tardar algunas horas para que aparezcan en el blog.

    Para hacer cambios en el diseño del menú tienes que editar la hoja de estilos, es decir, escribe esta URL en la barra de direcciones de tu navegador:
    http://dl.dropbox.com/u/647003/CiudadBlogger/Scripts/jqueryslidemenu.css

    Copia el contenido y pégalo en un block de notas, ahí edita donde dice:
    .jqueryslidemenu{
    font: bold 12px Verdana;
    background: #414141;

    Lo que está en negrita es el color de fondo del menú.

    Para eliminar todos los bordes del menú busca esta línea:
    border-right: 1px solid #778; y cambia el 1px por 0px.
    Luego busca esta otra línea y haz lo mismo:
    border-bottom: 1px solid gray;

    Guarda el archivo con este nombre jqueryslidemenu.css, subelo a un hosting, y cambia la primera URL del primer código por la URL de tu archivo que has subido.

    Es un poco trabajoso el proceso pero funciona.
    Saludos.

    ResponderEliminar
  136. Gracias Potro eso está solucionado, ahora espero la última consulta:(si es posible)como hago para que las entradas viejas me reconozcan el sub-menu, es decir con un ejemplo, yo tenía en Deportes(futbol, tenis,etc.) y el código era search/label/deportes; pues bien ahora le agrego una coma o una / (futbol,tenis,etc), pero no lo busca me trae todo lo de deportes, es decir no lu busa y ya cambié las entradas que debo hacer, como se pone lo que esta luego del menu, creo que debe ser igual en la entrada que en el código, pero no se que se pone para que lo distinga...
    Gracias.
    Abrazo..con esto me quedaría listo..

    ResponderEliminar
  137. Estimado amigo, solucioné lo referente a los sub-menu, lo hice poniendo el nombre de la etiqueta y pegado el nombre del sub-menu y funciona..Gracias.
    Disculpá las molestias, pero se que sabes mucho y por allí uno pierde tiempo, pero esto lo hice.
    En cuanto a lo que te preguntaba y no molesto más, en cuanto al color, en realidad lo que deseaba es que me quede como el que tienes aqui en tu blog, ese gris, que se oscurece, y en vez de los bordes tiene ese espacio y son redondeados,eso no lo puedo lograr..pero la verdad que está espectacular el de tu blog...ojala pueda hacerlo, pero no quiero arruinar el que hice, si me podes dar una idea..agradecido como siempre.
    Abrazo!

    ResponderEliminar
  138. Hola Fernando,

    Qué bueno que ya lo pudiste solucionar, a veces experimentando un poco con los códigos y peleandonos con ellos logramos entenderlos.

    El color de fondo es tal como te dije, hay que editar el archivo del código.
    Lo del borde redondeado no se puede aplicar a este menú, su estructura es distinta al que yo uso, que es sin efectos ni submenús.
    Tendrías que elegir, entre uno con submenús y efectos, o uno sin efectos y submenús como el que uso.

    Un abrazo!

    ResponderEliminar
  139. Amigo, creí no molestarte más, pero no me había dado cuenta en el blog de pruebas que mi plantilla tiene tres columnas y una me la pasó hacia abajo.
    Cuando lo pongo en el que uso, puedes ver en www.elportaldefunes.com (ahora dejé la anterior), pero ocurre lo mismo me corre la columna derecha y la cabecera..
    Tienes idea de que puedo hacer.
    Te pido disculpas pero me había quedado hermoso y trabajé un montón y me encuentro con esto, no se que pasa.
    Agrdezco desde ya tu respuesta, y espero me entiendas!

    ResponderEliminar
  140. Solucioné lo anterior y quedó hermoso, pero mira ahora lo que me pasa al desplegar los sub-menu Amigo..se tapan con lo que está debajo..que puedo hacer, es unapena, espero tu respuesta se que podrás ayudarme. desde ua mil gracias.
    Para verlo ingresa en el blog original www.elportaldefunes.com

    ResponderEliminar
  141. Hola de nuevo Fernando,

    No es ninguna molestia, sabes que en lo que pueda te ayudaré, sirve que aprendemos los dos.

    Es posible que el problema de los submenús se trate de la versión de tu navegador. He entrado a tu blog desde Google Chrome, Mozilla Firefox 3.6 e Internet Explorer 8, en todos se despliega el menú, se muestran correctamente y se pueden seleccionar.

    Saludos.

    ResponderEliminar
  142. Gracias Potro muy amable, lo qe pasaba era que tenía publicidades en flash, las cambié de lugar, ahora el problema esta solo cuando muestra las etiquetas d las entradas y Atom, eso se puede sacar de alguna manera, sin eiminar los comentarios?
    Desde ya gracias pr tu amabilidad como siempre y es verdad contigo se aprende mucho.
    PD. el problema podes verlo selecionando algun submenu, y luego veras que si quieres desplegar otros sobre lo que dice entradas mas recientes y atom, no se ve bien y no deja seleccionar.
    gracias.

    ResponderEliminar
  143. Acabo de entrar al blog pero no lo vi, luego miré que había otro comentario tuyo y me he dado cuenta que ya lo pudiste solucionar :D

    ResponderEliminar
  144. Gracias por todo nuevamente amigo!!
    Sin dudas este es el mejor blog para aprender.
    Una pregunta fuera de esto como hago para insertar al final del blog una linea de texto que diga nombre del autor y derechos reservados, Como tenes Vos?
    Desde ya gracias.

    ResponderEliminar
  145. Sólo agrega en el footer (hasta abajo del blog) un gadget HTML/Javascript con los datos que quieres. Si tienes otro gadget arriba arrástralo para que quede hasta abajo.

    Muchas gracias por tus comentarios :)

    ResponderEliminar
  146. Cuando edito el archivo "CSS", para cambiar el color del fondo y lo subo a un hosting distinto se me va la configuración horizontal.
    http://www.fbmental.blogspot.com/
    ¿Podéis ayudarme?
    Gracias.

    ResponderEliminar
  147. Hola Javier García,

    Para cambiar el fondo sólo hay que editar donde diga background ahí se cambia el código del color por el que quieras.
    Sólo hay que editar eso, nada más.

    Saludos.

    ResponderEliminar
  148. Gracias Potro, por tú interés.
    En la entrada nº:141 se describe el proceso que he seguido. Pero no estiendo por qué al subir el fichero "jqueryslidemenu.css" a "www.speedyshare.com", pierdo la configuarción horizontal y me aparece el menú de forma vertical.
    Gracias.

    ResponderEliminar
  149. Perdona Potro. Foro Andaluz es el blog que estamos intentado implementar. He hecho lo que indicas, pero de esta forma sólo cambio el color en mi PC, cuando abría el BLOG desde otro sitio aparecía con el color gris original. Ahora si aparece cambiado el color, pero se ha desordenado la configuración horizontal requerida.
    Mira: http://www.fbmental.blogspot.com/
    Gracias.

    ResponderEliminar
  150. Hola Javier García,

    El problema está en que el hosting a donde lo has subido sólo te da una URL que es para descargar el archivo, no para visualizarlo. Es por eso que el blog no reconoce la URL y no carga los estilos del menú.
    Te sugiero que subas el archivo .CSS a otro hosting como Dropbox o Google Sites.

    Saludos.

    ResponderEliminar
  151. Amigo Potro, he subido el archivo "CSS" a Dropbox, pero el problema persiste. Sigue apareciendo el menú de forma vertical cuando originalmente estaba horizontal.
    Un saludo.

    ResponderEliminar
  152. Hola Javier,

    Estaba viendo que el primer código lo has puesto antes de <head> y debe ser antes de </head>

    Ponlo en el lugar indicado para que pueda leerse el archivo .CSS

    Saludos.

    ResponderEliminar
  153. Es posible que esto tenga relevancia. Cuando sustituyo esto: 'http://dl.dropbox.com/u/647003/CiudadBlogger/Scripts/jqueryslidemenu.css'
    por esto : 'http://dl.dropbox.com/u/6015664/jqueryslidemenu.css'
    me dice que no se puede guardar la plantilla por que hay un eror, y si sólo sustituyo los números del archivo (647003 por 6015664) se desconfigura la presentación.
    Perdona si soy muy torpe.
    Gracias.

    ResponderEliminar
  154. No eres para nada torpe, es normal que al principio nos cueste un poco de trabajo, a todos nos pasa.

    Si sólo cambias el número que dices no funciona pues si te fijas en mi URL indica que mi archivo está dentro de dos carpetas.
    Debe funcionar con tu URL, ya la verifiqué en el navegador y está bien.

    ¿Qué error te marca?

    ResponderEliminar
  155. Amigo Potro, ya casi lo tengo. Ahora sólo necisito cambiar dos cosas:
    - Cuando paso el cursor por los Items, que el color del fondo sea verde oscuro.
    - Que los separadores, entre Items, también sean de color verde oscuro.
    Necesito localizar la parte del CSS a modificar.
    Gracias por todo.

    ResponderEliminar
  156. Para que el color de fondo cambie al pasar el cursor, busca esta parte:

    .jqueryslidemenu ul li a:hover{
    background: black; /*tab link background during hover state*/
    color: white;
    }

    Cambia ese black por el código del color que quieres, por ejemplo #0B3B0B

    Para que los separadores tengan el mismo color busca esta parte:
    border-bottom: 1px solid gray;

    Y luego esta:
    border-right: 1px solid #778;

    En ambos casos cambia lo que está en negrita por el código del color que buscas.

    Saludos.

    ResponderEliminar
  157. Todo arreglado y conforme. Muchísimas gracias por tu inestimable ayuda.
    Un fuerte abrazo.

    ResponderEliminar
  158. Un placer haber podido ayudarte :)

    ResponderEliminar
  159. WTF!!!Se ubiera savido que estava toda las explicaciones de este menu en este blog me ubiera ahorrado mucho tiempo jeje Pero bue talves sino lo ubiese descubierto solo no lo hubiera aprendido a modicar a mi manera:) Te invito a que pases por mi blog y veas como a quedado. Saludos!!

    ResponderEliminar
  160. Entonces no fue tan malo que tuvieras que aprender tú solo ;)
    ¡Saludos!

    ResponderEliminar
  161. Hola potro... te felicit por tan práctico e intuitivo recurso!
    Por lo que veo, tengo el mismo problema que Ezequiel, cuya solución no presentó... estoy tratando de alinear el menú al centro, pero no lo logro, se alinea a la izquierda y a la derecha, pero no al centro, todo en mi blog está alineado al centro, incluyendo las entradas, pero no sé que sucede... pues cuando le cambio el float a center, las pestañas se colocan una debajo de la otra, y pues... ya creo que lo he intentado todo pero no logro dar con la solución... como podrías ayudarme?

    ResponderEliminar
  162. Hola Jonnathan,

    Todos los menús horizontales se cargan hacia la izquierda para que puedan funcionar los estilos.
    Lo que puedes hacer es agregarle un margen del lado izquierdo para que se mueva hasta donde lo quieras centrar.

    Para hacerlo edita el archivo css y busca esta línea:
    .jqueryslidemenu ul{

    Debajo de ella agrega esto:
    margin-left:80px;

    Cambia el 80px por otro valor hasta que quede en la posición que deseas.

    Saludos.

    ResponderEliminar
  163. Muchísimas gracias!

    Eso resolvió mi problema, lo que si debo aclarar es que por default, el margen se presenta asi: margin: 0

    Le agregué otro margen debajo y no hizo nada, entonces, borre el ": 0" y lo sustituí por "-left 80px", es decir, usé el mismo codigo de margin que tenia y lo modifiqué como te explico... Hago la salvedad por si alguien pasa por lo mismo... Muchísimas gracias!

    ResponderEliminar
  164. Mmm... bueno, me retracto, no lo he solucionado... Pues ahora he logrado centralizar la barra, pero los submenús se desplazan fuera de sitio, se posicionan mucho más a la derecha y no debajo del menú que los genera... qué puede estar pasando ahí? Pues tambien cambié el margin que aparece en /* Sub level menu links style */ por el mismo que puse para la barra en general, y se desplaza muchísimo a la derecha... no se ahora que hacer...

    ResponderEliminar
  165. A eso me refería con que los menús deben estar cargados a la izquierda, ya con las sub pestañas se descontrola todo si se hacen modificaciones de ese tipo.

    ResponderEliminar
  166. muy bueno esto potro no lo habia visto. thanks men!

    ResponderEliminar
  167. Qué bueno que te ha gustado.
    Saludos.

    ResponderEliminar
  168. Wua no sabes como m ayudan tus sabios consejos, gracias, justo tenia un problemita con el menu q tenia mi planilla pero se lo e remplasado con este y queda genial.
    Mil gracias y besos

    ResponderEliminar
  169. Perfecto Aky, que da gusto que te haya gustado este menú :)

    ResponderEliminar
  170. Potro, hay alguna forma de que ocupe todo el ancho de la web, osea quelas letras sean más grandes, no que siga una barra vacia hacia la izquierda, sino que se agranden las celdas, mira: www.porvelez.com.ar
    Saldudos

    ResponderEliminar
  171. El menú ocupa todo el ancho del contenedor de donde esté puesto, generalmente cuando se quiere que ocupe todo el ancho se pone antes del outer-wrapper.

    ResponderEliminar
  172. bufff! Todo perfecto, pero no se me despliegan las pestañas al pasar el ratón por encimA! Que hago mal?

    Buen aporte el tuyo, gracias de antemano : )

    ResponderEliminar
  173. PERDÓN, no pude el link de mi página para que lo compruebes! http://descomposed.blogspot.com/

    ResponderEliminar
  174. No veo que tengas el menú puesto en el blog.

    ResponderEliminar
  175. El Potro te cuento que e instalado ya hace un tiempo este menu, todo hiba muy bien en todos los navegadores hasta hace pocos dias que en IE cuando pones "vista de compativilidad" el fondo del menu ya no aparece, intente de todo pero nada no me permite poner ningun tipo de fondo, y supuestamente funciona corectamente asta con IE6 y e podido comprobarlo, hasta ase unos dias andava perfecto noce que sucedio que de un dia para el otro todo empeso. Es mas me fijado en otros sitios que utilisan el mismo menu aver si tenian el mismo problema, y les anda perfecto, realmente noce que sera y me tiene de cabeza el problema... que crees que pueda ser??


    Saludos!!!

    ResponderEliminar
  176. Supongo que has de haber agregado algún elemento que afecta los estilos en IE, aunque yo he entrado desde IE8 y los fondos del menú aparecen sin ningún problema.

    ResponderEliminar
  177. No, ese es el problema que e no ellegado a agregar ningun tipo de modificacion en la platilla y enpeso a verse asi y si en IE8 se ve bien, pero cuando pones ver la vista de conpatibilidad no se ve nada el menu, en cambio los menus de otras paginas que evisto se ven perfectamente. Me podrias ayudar???

    Saludos!!

    ResponderEliminar
  178. Siempre hay una modificación que es la que afecta, nada aparece y desaparece por sí solo.

    El asunto es que si te fijas en el primer código hay este fragmento:
    <!--[if lte IE 7]>
    <style type="text/css">
    html .jqueryslidemenu{height: 1%;} /*Holly Hack for IE7 and below*/
    </style>
    <![endif]-->

    Ese es un hack para que se visualice bien en IE7 y tú no lo tienes, supongo que lo has de haber eliminado recientemente o desde un inicio no lo pusiste.

    También ten en cuenta que muchos de estos hacks para IE requieren que los archivos no estén instalados directamente en la plantilla como es en tu caso, así que si con el hack tampoco funciona tendrás que ponerlo como se indica en la entrada.

    Saludos.

    ResponderEliminar
  179. Gracias lo e arreglado antes de leer tu comentario cambie todas las propiedades esteticas de la parte css del menu a esta parte .jqueryslidemenu y andubo todo bien en todos los navegadores :) y ahora que leei tu mensaje no dude dos veces en meterle la propiedad que me dijiste en el comentario tambien anda de 10!! asi que solo me queda comfigurar los titulos de los post que noce porque se ven en rojo oscuro:( Pero mientras ande correctamente el blog creo que sere bastante feliz en ese sentido ;)

    Saludos y gracias!!

    ResponderEliminar
  180. Qué bueno que ha sido de tu agrado :)

    ResponderEliminar
  181. otra ves potrillo jajaja mil gracias sino mira como kedo el mio.... www.tutvgratis.tk esta chvr aunke kreo ke para ayudarnos mejor deberia poner o explikar como modificar los archivos css o js creo ke son los ke tienen ese diseño de negro, a mi me va bien pero si mi web fuese de otros colores pos kreo ke no iria tan bien, en fin muchas gracias..... y cuando mi web tenga PR 4 nos linkeamos jeje te parece?? tu diras...

    ResponderEliminar
  182. En algún momento pensé explicar cómo modificarlo pero muchos no saben cómo subir y realojar el archivo (aunque ya lo he explicado mil veces) así que para evitar repetirlo decidí no hacerlo :$
    De cualquier modo si tuvieses una pregunta no dudes en comentar que siempre estaré con la mejor disposición de ayudar ;)

    ResponderEliminar
  183. hola El Potro, ando con un pequeñito problema.

    Resulta que le agregue algunas cosas al menu y ahora no me deja guardar sin rellenar el espacio de "Titulo" en el html/javascript

    antes no me requeria ponerle titulo, pero ahora me pone:
    Campo obligatorio; no debe dejarse en blanco.

    sabes que puede ser??

    gracias

    ResponderEliminar
  184. No lo sé, nunca he tenido ese problema con algún gadget.
    Prueba poniendo como título esto:

     

    ResponderEliminar
  185. solucionado!! muchisimas gracias :D

    ResponderEliminar
  186. Hola Potro… puede ser que este menú no funcione con las nuevas plantillas básicas de Blogger ¿?

    Al menos yo no lo puedo hacer funcionar en ninguna…

    Saludos

    ResponderEliminar
  187. Hola Carlos,

    Debe de funcionar, a menos que tengas algún otro script como Scriptaculous, pero sino no deberías tener problemas con él.

    Saludos.

    ResponderEliminar
  188. ayuda por favor, en mi blog he solocado el efecto burbuja, pero deseo colocar también el efecto acordeón, y me sale o uno o el otro pero no los dos? habra solución?

    ResponderEliminar
  189. mi blog es este: http://diariotomisino.blogspot.com

    ResponderEliminar
  190. Hola froycastro,

    No sé cuál sea el efecto burbuja que mencionas, si es sobre este menú verás que usa jQuery y el menú tipo acordeón usa MooTools y como expliqué en la entrada de ese menú si se usa jQuery u otra librería de efectos no funcionará por cuestiones de compatibilidad.

    Saludos.

    ResponderEliminar
  191. hola potro quisiera preguntarte mira yo tenia las flechas para ir arriba y ir abajo como las tienes tu >>> pero coloque este menu en mi blog y ya no funciona el efecto de deslizamiento de las flechas mi pregunta es porq? como lo areglo gracias

    ResponderEliminar

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

 
Ir Arriba Ir Abajo
I Ciudad Blogger