Menú horizontal deslizante con Scriptaculous

12 de marzo de 2011 323 comentarios ,
Desde que cambié la plantilla del blog han sido muchos quienes me han preguntado cómo poner el menú horizontal deslizante que hice.
La verdad es que no requiere mucha ciencia, es un simple menú en el cual he usado una  tabla y el mismo efecto de Scriptaculous que usamos para expandir y contraer.


Lo primero que haremos será agregar Scriptaculous y Prototype, si ya lo tuvieras no hace falta añadirlo nuevamente. En esta ocasión lo pondremos arriba de la plantilla, esto es para que funcione en Internet Explorer 7, de lo contrario no se deslizará y marcará error.

Así que entra en Diseño | Edición de HTML y después de <head> pega esto:
<!-- Prototype y Scriptaculous-->
<script src='http://www.google.com/jsapi'></script>
<script>
google.load("prototype","1.7.0.0");
google.load("scriptaculous", "1.9.0");
</script>
<!-- Prototype y Scriptaculous-->

Luego antes de ]]></b:skin> pega los estilos:
/* Menú CdBlger
----------------------------------------------- */
#menu-cdblger{
background: #0B3861; /* Color de fondo */
width: 100%;
height: 24px;
font-weight:bold;
margin: 0px;
padding: 0px;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
#menu-cb {margin-top:0px;}

#menu-cb li {
display: inline;
list-style-type: none;
padding-right: 20px;
}
#menu-cb li a {
color:#FFF; /* Color del texto */
text-decoration: none;
}
#menu-cb li a:hover {
color:#CCC; /* Color del texto al pasar el cursor */
}
.menu-into {
background-color: #0B3861; /* Color de fondo del submenu*/
-webkit-border-bottom-right-radius: 15px;
-webkit-border-bottom-left-radius: 15px;
-moz-border-radius-bottomright: 15px;
-moz-border-radius-bottomleft: 15px;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 15px;
}
Y ahora busca esta línea:
<div id='content-wrapper'>
O si usas una plantilla del Diseñador de plantillas de Blogger entonces busca esta línea:
<div class='tabs-outer'>

Arriba de cualquiera de esas dos pega esto:
<div id='menu-cdblger'>
<ul id='menu-cb' style='position: relative; padding-top: 5px;'>
<li><a href='URL del blog'>Inicio</a></li>
<li><a href='javascript:void(0)' onclick='Effect.toggle(&quot;categorias1&quot;,&quot;slide&quot;); return false'>Menú &amp;#9660;</a><div id='categorias1' style='display: none; position: absolute; _margin-left:-100px; *margin-left:-100px; _margin-top:15px; *margin-top:15px; z-index:8880;'>
<table border='0' cellspacing='15' class='menu-into'>
<tr>
<td><img src='URL del icono'/> <a href='URL del enlace'>Pestaña Fila 1</a></td>
<td><img src='URL del icono'/> <a href='URL del enlace'>Pestaña Fila 1</a></td>
<td><img src='URL del icono'/> <a href='URL del enlace'>Pestaña Fila 1</a></td>
<td><img src='URL del icono'/> <a href='URL del enlace'>Pestaña Fila 1</a></td>
<td><img src='URL del icono'/> <a href='URL del enlace'>Pestaña Fila 1</a></td>
<td><img src='URL del icono'/> <a href='URL del enlace'>Pestaña Fila 1</a></td>
<td><img src='URL del icono'/> <a href='URL del enlace'>Pestaña Fila 1</a></td>
</tr>
<tr>
<td><img src='URL del icono'/> <a href='URL del enlace'>Pestaña Fila 2</a></td>
<td><img src='URL del icono'/> <a href='URL del enlace'>Pestaña Fila 2</a></td>
<td><img src='URL del icono'/> <a href='URL del enlace'>Pestaña Fila 2</a></td>
<td><img src='URL del icono'/> <a href='URL del enlace'>Pestaña Fila 2</a></td>
<td><img src='URL del icono'/> <a href='URL del enlace'>Pestaña Fila 2</a></td>
<td><img src='URL del icono'/> <a href='URL del enlace'>Pestaña Fila 2</a></td>
<td><img src='URL del icono'/> <a href='URL del enlace'>Pestaña Fila 2</a></td>
</tr>
<tr>
<td><img src='URL del icono'/> <a href='URL del enlace'>Pestaña Fila 3</a></td>
<td><img src='URL del icono'/> <a href='URL del enlace'>Pestaña Fila 3</a></td>
<td><img src='URL del icono'/> <a href='URL del enlace'>Pestaña Fila 3</a></td>
<td><img src='URL del icono'/> <a href='URL del enlace'>Pestaña Fila 3</a></td>
<td><img src='URL del icono'/> <a href='URL del enlace'>Pestaña Fila 3</a></td>
<td><img src='URL del icono'/> <a href='URL del enlace'>Pestaña Fila 3</a></td>
<td><img src='URL del icono'/> <a href='URL del enlace'>Pestaña Fila 3</a></td>
</tr>
</table></div></li>

<li><a href='URL del enlace'>Pestaña</a></li>
<li><a href='URL del enlace'>Pestaña</a></li>
<li><a href='URL del enlace'>Pestaña</a></li>
<li><a href='URL del enlace'>Pestaña</a></li>
<li><a href='URL del enlace'>Pestaña</a></li>

</ul></div><div style='clear: both;'/>

Por último agrega la URL de los iconos y enlaces donde se indica.
En color verde están señalados los estilos que se pueden cambiar.
Si usas una plantilla del Diseñador de plantillas quizá sea conveniente que elimines todo lo que haya dentro de:
/* Tabs
----------------------------------------------- */

Para agregar más pestañas en el área principal sólo añade otro código como este antes de la última línea:
<li><a href='URL del enlace'>Pestaña</a></li>
El submenú que contiene las demás pestañas es una tabla y obviamente también se le pueden agregar más enlaces.

Si quisieras agregar otro submenú sólo añade antes de la última línea un fragmento como este:
<li><a href='javascript:void(0)' onclick='Effect.toggle(&quot;categorias2&quot;,&quot;slide&quot;); return false'>Menú &amp;#9660;</a><div id='categorias2' style='display: none; position: absolute; _margin-left:-100px; *margin-left:-100px; _margin-top:15px; *margin-top:15px; z-index:8881;'>
<table border='0' cellspacing='15' class='menu-into'>
<tr>
<td><img src='URL del icono'/> <a href='URL del enlace'>Pestaña Fila 1</a></td>
<td><img src='URL del icono'/> <a href='URL del enlace'>Pestaña Fila 1</a></td>
<td><img src='URL del icono'/> <a href='URL del enlace'>Pestaña Fila 1</a></td>
</tr>
<tr>
<td><img src='URL del icono'/> <a href='URL del enlace'>Pestaña Fila 2</a></td>
<td><img src='URL del icono'/> <a href='URL del enlace'>Pestaña Fila 2</a></td>
<td><img src='URL del icono'/> <a href='URL del enlace'>Pestaña Fila 2</a></td>
</tr>

</table></div></li>
Si te fijas este último código es igual al primer submenú (aunque con menos pestañas) lo único que ha cambiado es el doble ID en color naranja. Si se agregara otro submenú más sólo hay que cambiar el ID en color naranja las 2 veces que se indica,  por otro nombre, por ejemplo categorias3

Aunque quizá no es el menú más sofisticado y espectacular, sí es un menú con mucho potencial debido al área del submenú que puede albergar bastantes pestañas de forma organizada, así que si tienes muchos enlaces por agregar esta es una buena opción.


323 comentarios en:

" Menú horizontal deslizante con Scriptaculous "

  1. Pues me parece muy interesante, estaba liado con el otro menu horizontal deslizante de aquí pero este me pareme más apañado para mi blog. Tengo muchas etiquetas así que e va genial. A probar se ha dicho.

    ResponderEliminar
  2. me da raro igual sera que tengo mac

    ResponderEliminar
  3. hahaha te animaste a ponerlo siempre, ahaha lo malo esque ya puse plantilla y pss kedo pro mi blog. pero estu buenosimo el aporte bro, y ps sigo esperando aber si puedes aser algo referente a ""LinkWithin"" pork vi un blog que no tenia el link, pero pss tambien pudo aber sido otro cosa similar :D(-esperando-), bueno pss me retiro, gracias y muy buen aporte.
    suerte!!

    ResponderEliminar
  4. A mi me gusta esta barra se desliza suave ,y al tener iconos le da un toque bonito pero siempre sin perder el orden lastima que talvez no funcione en mi blog por ser de Scriptaculous

    ResponderEliminar
  5. DePapercraftBlog, mi problema igual era que tenía muchas etiquetas y con un menú "tradicional" de subpestañas no me era suficiente, pero esta es una buena opción para meter todas las etiquetas.


    carlos, no sé a qué te refieras con raro, yo igual tengo Mac y me funciona sin problemas.


    DJCosplay, de LinkWithin aún no creo porque ya hay varios tutos sobre ello en la red y bueno, tampoco es complicado ;)

    ResponderEliminar
  6. Potro te ago una pregunta que no tiene nada que ver con este post pero como no se como buscarlo te lo pregunto.

    Por ejemplo cuando yo coloco Ciudad Blogger en el buscador aparece tu blog en primer lugar y debajo aparecen como categorias eso lo has modificado vos o lo modifica google directamente?¿

    ResponderEliminar
  7. Me lo apunto, gracias Potro sos genial :D

    ResponderEliminar
  8. bf buen meno pero no tengo la linea content-wrapper

    que ariba en estos casos

    ResponderEliminar
  9. muy bueno :) ya tengo un menu y mi duda es que tendria que hacer para que tuviera un submenu cambiarle la ID o algo asi o modificar su codigo??

    ResponderEliminar
  10. PeliculasTube, recuerda que en muchos scripts se puede usar Scriptaculous y jQuery al mismo tiempo.

    ResponderEliminar
  11. Matthew Matii, eso lo agrega Google en algunos blogs, no es algo que nosotros podamos agregar.

    Watesam, que tengas buenos resultados!

    ResponderEliminar
  12. Dreko, no conozco esa plantilla pero tal vez puedas ponerlo arriba de <!-- /Container -->


    Sergiio, ¿un submenú dentro del submenú? no lo sé, nunca probé hacerlo de ese modo :/

    ResponderEliminar
  13. potro hola estba esperando esta entrada jajaja, pero cuando le doy al boton MENU para que despliegue el submenu no lo hace v el tuto de como hacer para que java funcione con scriptacolus pero aun no lo hace noc que estoy hacineod mal noc si fue porque modifique el alto del menu de 24 lo puse en 30 o no se que paso de verdad este es mi blog para ver si me puedes ayudar www.sectiongamer.co.cc

    hace unos dias te enie un correo diciendote sobre una barra de herramientas para ver si hacias el tuto de como ponerla en un blog gracias :D!!

    ResponderEliminar
  14. Hola Dexmax,

    Lo que sucede es que el hack de jQuery no conflict aplica sólo para "parchar" jQuery y que éste sea compatible con Scriptaculous y Mootools. Pero no hará que Scriptaculous y Mootools sean compatibles entre ellos, esos seguirán siendo incompatibles, por lo que no se pueden usar juntos.

    Lo del correo que mencionas no me llegó :/
    ¿Lo mandaste por el formulario? Porque esos los he respondido todos, sólo tengo pendientes unos de hoy.

    ResponderEliminar
  15. Hola Potro, ¿te acuerdas de que en otra entrada te pregunte en un comentario que cómo puedo poner unos emoticonos que yo elija para los comentarios?
    Pues ya probé a cambiar la URL, y cuando le doy a guardar plantilla, no me deja y me sale un mensaje en rojo que dice: No hemos podido guardar tu plantilla porque está mal formada. Comprueba que todos los elementos XML estén cerrados correctamente.

    ¿Qué hago?

    ResponderEliminar
  16. Potro tengo mucho lio con las pestañas como seria simplemente para tener 8 pestañas sin submenus y con otra de Inicio. Solo eso muchas gracias

    ResponderEliminar
  17. Hola potro muchas gracias por responder el correo te lo mande por el formulario no se que pasaria :(

    lo que te queria preguntar era que tengo en mi blgo que hace el conflicto con el menu xq ese menu me gusta mucho

    ResponderEliminar
  18. Beben Koben, tnks dude ;)


    Marina, probablemente al cambiar la URL has eliminado algo sin darte cuenta. Verifica que al ponerlo no quites nada más o que no haya espacios de sobra.

    ResponderEliminar
  19. Javier,

    Para quitar el submenú elimina desde:
    <li><a href='javascript:void(0)' ....

    Hasta:
    </table></div></li>

    Si quieres agregar más pestañas "normales" ahí en la entrada se explica qué se debe pegar y dónde.

    Saludos.

    ResponderEliminar
  20. Gracias Potro. Otro rato lo pruebo :)

    ResponderEliminar
  21. Dexmax, pues no sé exactamente qué hayas puesto con Mootools pero el script lo tienes ahí. Busca la palabra Mootools y lo verás

    ResponderEliminar
  22. gracias potro ya elimine el scriptahora si me funciona :D mas tarde te envio el correo con lo de la barra de herramientas esta muy buena si quieres verla te dejo una aqui mira www.sectiongamer.zob yhost.com

    ResponderEliminar
  23. http://www.youtube.com/watch?v=D-9EqPytSLs

    ResponderEliminar
  24. hola potro mira q bien q ya pusiste este menu la verdad q no me alcanza en el menu actual q tengo mas entradas, entraba para preguntar si se podia poner uno mas del q tengo al lado derecho, pero ni asi me alcanzaria, asi q me doy con la sorpresa q pusiste este muchas gracias, mi pregunta es respecto a las imagenes que resolucion tendrian q ser ? muchas gracias voy borrando el q tengo ahora y voy probando el tuio siempre haciendo u respaldo ^^ Gracias potro te pasaste, gracias a ti mi blog esta muy bonito...

    ResponderEliminar
  25. Potro lo que decia era que si en el menu que ya tengo, se puede poner un submenu como este de las tablas o algo asi :) creo que te confundi un poco jeje

    ResponderEliminar
  26. Madre mia me encanta este menuuuuuuu
    Pero no encuentro en mi plantilla ninguno de estos codigos ni este id='content-wrapper'> ni este class='tabs-outer'> se puede hacer de otra formaaaaa?????
    Este es mi blog http://minijuegos-online.blogspot.com porfa contesta :D

    ResponderEliminar
  27. Hola FarStar,

    Eso dependerá un poco de cada plantilla por aquello de los espacios y tamaño del texto, pero con unas imágenes de 16px por 16px me parece que se verán bien.
    Los iconos yo los tengo con esa medida y me parece que se adaptan bien a mi plantilla, pero tú puedes variar de tamaño en caso de que no quede como quisieras.

    Bien por lo del respaldo!

    ResponderEliminar
  28. Sergiio, probablemente sí, no lo sé, en esos casos para no liarte demasiado es mejor quitar el que tienes y poner este, ya sólo adaptas os colores del menú para que se vea como el que tenías.

    ResponderEliminar
  29. Hola Bilias,

    Qué bueno que te ha gustado este menú.
    En el caso de tu plantilla, prueba ponerlo arriba de:

    <div class='content'>

    ResponderEliminar
  30. potro amigo, hice el menu, pero algo falla , al dezlizar el primero que es Genero, sale normal, dezliso el segundo años dvdrip latino, sale normal, deslizo el tercero y cuarto y sale en del 2do :S:S:S ah y puse unos cuantos mas pero no aparecen salen abajo pero no se notan alguna sugerencia ??

    ResponderEliminar
  31. bueno lo del tamaño tuve que achicar los nombres y ya entro todo, pero ayudame q el 3ero y 4to desliznate se repite con lo del 2do :(

    ResponderEliminar
  32. amigo potro ya lo logre, no me habia fijado q tenia q cambiar categoria 1 por categoria 2 y asi concecutivamente

    ResponderEliminar
  33. pero con respecto a lo que te mande por el link de contacto, con eso si ayudame para saber como hacerlo amigo, esque quiero q mis estrenos esten hay visibles, al veces subo peliculas antiguas y por eso no quiero q se dejen de ver mis estrenos... muchas gracias

    ResponderEliminar
  34. Qué bueno que ya lo has resuelto ;)
    Los correos del formulario aún no los reviso, esos tardan un poco más, mañana los miro y te respondo.

    ResponderEliminar
  35. potro gracias encontre uno pero como te comente no me acuerdo tantas cosas q veo en tu blog ya me hago lios xD aca te digo, poner el anuncio del titulo que s emueve de un lado pa otro , titulo en movimiento creo q se llama, si le das una mirada a mi blog veras q ya tengo las imagenes todo bien bonito pero lo que keria era poner mas gadget en la parte de arriba, pero no tengo para poner mas gadget como le hago para poner ese titulo en movimiento y ademas poner otra lista mas de imagenes que vaya abajo separado por otro titulo de movimiento??

    ResponderEliminar
  36. uyy potro pos mira mi blog puse el gadget de carusel que encontre aca y pues dejo de funcionar el menu deslizante q puse :S:S:S

    ResponderEliminar
  37. bueno potro ya vi que puedo poner mas gadget en la parte superior, pero si pongo el gadget encima del menu no salen las imagenes si elimino el gadget sigue son deslizarc el menu, asi q probe borrando lo q agrege antes de y recien funciono el menu :S:S:S ahora la pregunta x 1 millon de gracias es: como le hago para q funcionen ? :S si kito lo q puse antes de para q funcione el carrusel deja de funcionar el carrusel y funciona el menu, si no lo pongo sigue el carrusel (q no tengo idea porq no salen las fechas a los costados como en el blog de pruenas q pusistes)y no funciona el menu :S q hago gran sabio :S

    ResponderEliminar
  38. Gracias por contestarme :p
    Voy a probarlo a ver si me funcciona ...... ya te contare

    ResponderEliminar
  39. Si que funcciona :X:X:X:X
    Mcuhas gracias Potro
    Saludos

    ResponderEliminar
  40. Por cierto potro las imagenes o sea los favicon de donde los has cojdo?Me podrias recomendar un sitio donde alojar los favicon?
    Me gusta como queda el menu pero esto me falta ponerle imagenes a cada categoria :p
    http://minijuegos-online.blogspot.com

    ResponderEliminar
  41. Hola Potro, te he conocido atraves de Gabi y no sabes, como agua de Mayo¡¡¡¡
    Encantada de conocerte, igual a ti no te va igual jajjaj.
    Yo de esto no entiendo nada absolutamente y hace mas de dos mese perdí a mis seguidores, bueno la imagen q, el gaget que sale en el blog y no hay forma de recuperarlo, la gente me escribe y me da consejos pero que va, lo he borrado varias veces y no funciona ¿ tu sabrías decirme porque no se ven???
    http://lolibel.blogspot.com/

    Un saludo desde Almeria.
    lola

    ResponderEliminar
  42. Hola potro :O muy buen menu es el mismo que tienes en el blog :D, pero siempre he querido hacer el siguiente tipo de menu que hay en esta web:
    http://animeid.com/anime/dragon-ball-z.html
    (el de los capitulos de dragon ball)
    ojala que algun dia muestres como se hace *-* gracias :)

    ResponderEliminar
  43. FarStar, recuerda que jQuery no es compatible con Scriptaculous, necesitas usar el hack para que funcionen juntos.


    Bilias, hay varios sitios donde puedes hacerlos, por ejemplo en http://www.htmlkit.com/favicon/ y para alojarlos puedes usar Google Sites.

    ResponderEliminar
  44. tengo una duda, bueno VARIAS :

    1) como se pone las estrellitas de votacion en una entrada ? como en : razienjapon.com :O

    2) en el blog de : http://paramouree.blogspot.com/
    cuando estas encima de un link se extira muchisimo y se pone en cursiva, y quiero saber si tienes ese link ? Y TAMBIÉN, CUANDO ESTAS EN UNA FOTO, ESTA EN "GRIS" Y CUANDO T PONES ENCIMA SE VE NORMAL, COMO PUEDO HACER ESO ? Y TAMBIEN QUIERO Q NO ME COPIEN NINGUNA FOTO xD

    ResponderEliminar
  45. Loladealmeria yo tambien he tenido este problema lo he resuelto asi .....
    Aqui te deo la pagina donde te lo explica muy bien es solo añadir un trozo de codigo y listo ;)
    http://www.blogdelujo.com/2010/03/solucion-problema-gadget-seguidores-no.html

    ResponderEliminar
  46. Al final lo he subido al mismo blogger pero en formato png .....
    Tu que programa has usado para hacerlo con fondo transparente y 16x16?
    Yo he usado este (Microangelo) per se me quedan pequenas las imagenes .......

    ResponderEliminar
  47. Hola Loladealmeria,

    Por supuesto que también estoy encantado de conocerte, ¡bienvenida a Ciudad Blogger!

    Lo que sucede con el gadget de seguidores es que los códigos que se usan para su funcionamiento no son compatibles con Scriptaculous, un script de efectos. Y es por esta razón que cuando se usa Scriptaculous los seguidores desaparecen.

    Para solucionarlo busca este código:

    <script src='http://www.google.com/jsapi' type='text/javascript'></script>
    <script type='text/javascript'>
    google.load("prototype","1.6.0.3");
    google.load("scriptaculous", "1.8.2");
    </script>
    <script language='Javascript'>


    Y reemplázalo por este otro:

    <script src='http://www.google.com/jsapi'/>
    <script>
    google.load(&quot;prototype&quot;, &quot;1.6.1.0&quot;);
    window.JSON = {
    parse: function (st) { return st.evalJSON(); },
    stringify: function(obj) { return Object.toJSON(obj); }
    };
    google.load(&quot;scriptaculous&quot;, &quot;1.8.3&quot;);
    </script>

    Con eso tus seguidores estarán de vuelta.
    ¡Saludos!

    ResponderEliminar
  48. Hola Sirius,

    Había olvidado responderte esa pregunta en la otra entrada, una disculpa.
    Veo que ese menú usa jQuery pero a ciencia cierta no sabría decirte cómo está hecho. Muchas páginas usan menús que son creados por ellos y no tienen el código abierto para que pueda usarlo todo el mundo.
    No sé si ese sea el caso pero sin tener el dato exacto del nombre del menú o alguna otra pista no sabría decirte cómo se hace :/

    Saludos.

    ResponderEliminar
  49. airam,

    Mira esta entrada que habla sobre diferentes opciones para las estrellas de valoración.

    Para ver cómo personalizar los enlaces del blog mira esta entrada.

    Y para conseguir ese efecto en las imágenes agrega antes de ]]></b:skin> lo siguiente:

    img {opacity: 0.8; filter:alpha(opacity=80);}
    img:hover {opacity:1; filter:alpha(opacity=99);}
    }

    ResponderEliminar
  50. Hola potro tengo una pregunta se puede ocultar una entrada ? He intentado varias cosas que he encontrado por internet pero no me desaparece....
    Lo que queria ocultar es el contacto y los datos lssi ya que si le das al final a la ultima entrada las puedes ver .....
    Lo que quiero es esconderlas y acceder a ellas solo con los links.... No se si me he explicado bien :p
    http://minijuegos-online.blogspot.com

    ResponderEliminar
  51. aaa *-* yo tampoco se como se llama y lo e buscado por todos lados xD si lo encuentro te aviso y si no fail :V

    ResponderEliminar
  52. Bilias,

    Puedes hacerlo con este método pero será más sencillo usar una página estática de Blogger.
    Creación de entradas > Editar páginas > Nueva página.

    ResponderEliminar
  53. Gracias por contestarme potro pero con las pagina estaticas no me va en mi plantilla......
    Si creo una pagina estatica me la detecta como una entrada y para el formulario y tambien para el otro no me sirve ya que no puedo acceder a ella .....
    No se por que pero en las paginas estaticas no me abre en otra como en las entradas.
    Solo me queda la otra de ocultarla .....

    ResponderEliminar
  54. Nop con editar el codigo tampoco me la oculta :(
    Este codigo ya lo he probado antes pero nada de nada .......
    Gracias potro por todo tu esfuerzo

    ResponderEliminar
  55. Hola potro la verdad que lo hice funcionar sin usar el hack q me mencionas, solamnete borre la entrada del carrusel q va antes de he aaad y pues normal todo ok hasta puse 2 carruseles y no interviene con el menu ^^ ahora pruebo ese gadget del titulo en movimiento y te cuento,, ahhh verdad algo extraño que eh notado al hacer modificacions no se cual la verdad habla afectado esto, pero el problema es este: al subir imagenes normal mente subo 3 imagenes cargan y selecciono las 3 imagenes al mismo tiempo y las añado, ahora no... ahora suben las 3 imagenes y no me deja seleccionar las 3 juntas... tengo q seleccionar 1 por 1, no es muy grave pero falta de comodidad al crear pots, tal vez sepas de algo al respecto, ahora recuerdo q tb vi por aca algo sobre dar clic a un enlace y este se abra en una nueva pestaña ( normalmente creaba la entrada en una pagina x dava vista previa y copia las url para q funcione asi ) buscare la solucion aca... aca esta todoooooooo muchas gracias espero tu ayuda con lo de las imagenes..

    ResponderEliminar
  56. Potro me pude dar cuneta de algo en tu menu que hay diferente en el mio lo q pasa es que tu por ejemplo al darle click en Suscipción de tu menu el submenu se desplaza justo debajo de la pestaña. por otro lado en el mio cuando le doy a Foro el submenu se Desplaza justo debajo de donde dice inicio quiero saber como hacer para que se desplace debajo de su pestaña correspondiente :)

    ResponderEliminar
  57. FarStar, Blogger anda haciendo cambios importantes tanto en las imágenes como en la interfaz y es por eso que por ahora no se pueden seleccionar todas las imágenes que subes. Sólo hay que esperar a que Blogger termine de hacer todo lo que está cambiando y todo deberá regresar a na normalidad.

    ResponderEliminar
  58. Dexmax,

    Busca en la parte del submenú esto:

    _margin-left:-100px; *margin-left:-100px;

    Esos son los márgenes que hacen que en Internet Explorer se vea bien, esos puedes cambiarlos hasta que se ajuste a tu menú.
    Si además de Internet Explorer también te sucede en otros navegadores entonces agrega después de eso mismo esta parte:

    margin-left:-100px;

    De igual forma puedes modificar ese valor hasta que se ajuste como deseas.

    ResponderEliminar
  59. Ok muchas gracias potro yo uso Google chrome vere que tal me va con los codigos

    ResponderEliminar
  60. :) bueno creo que eso sera lo que hare, de todas formas gracias potro :)

    ResponderEliminar
  61. gracias potro, pense que podria ser por algo q hice yo, ahora lo de

    dexmax a mi tb me pasa probare con tu sugerencia

    ResponderEliminar
  62. Potro podrias ayudarme con lo de ocultar entrada? :D He intentado con el codigo y tamb con la pagina estatica pero con ninguno me va .....

    ResponderEliminar
  63. Potro disculpa que te responda por aqui.. ya probe el tutorial que me recomendaste de "El Escaparate"
    me funciono a la primer.. pero no lo deje el el blog, porque tarda muchiiisimo en cargar a pesar de que el escript va incluido en la plantilla y no alojado en ningun servidor.. a ver si un dia saliera algo que cargue mas rapido.
    La verdad que donde lo vi funcionando no tardaba tanto en cargar como a mi..
    En fin abra que esperar.
    Salu2 ;)

    ResponderEliminar
  64. potro como hago para centrar el menu

    ResponderEliminar
  65. Bilias, en muchas plantillas esa opción no funciona bien, ¿puedes probar de nuevo con el sistema de Blogger? Me es extraño lo que dices que no te crea la página sino una entrada.
    Recuerda, debes ir a Creación de entradas > Editar páginas > Página nueva.

    ResponderEliminar
  66. Odin KO, de por sí no todos los elementos que se agregan tardan lo mismo en cargar para todos, eso va en función de cada blog y de la cantidad de elementos y scripts que tengamos en la plantilla.
    Saludos!

    ResponderEliminar
  67. Javier,

    Para centrar el menú agrega debajo de #menu-cdblger{ esto:
    text-align:center;

    ResponderEliminar
  68. Si potro mira voy a crear una pagina y te doy el link de la pagina y veras como me la crea.... :(
    http://minijuegos-online.blogspot.com/p/contacto_15.html aqui esta la pagina pero como te he contado antes me la crea como una entrada normal y corriente .....
    Espero tu respuesta ...........

    ResponderEliminar
  69. No es que te cree la página como entrada, la página te la crea bien, el problema es que el Leer más que usas no tiene los códigos actualizados para que el Leer más no se aplique a las páginas estáticas.
    ¿Cuál es la plantilla que tienes?

    ResponderEliminar
  70. Pues mi platilla se llama gamezine si quieres te la paso por correo para que pruebes ......

    ResponderEliminar
  71. Ah por cierto en la pagina principal uso el Leer mas para que no se escuche la musica de los juegos si lo pongo sin leer mas en la principal o sea con el codigo el juego no se ve pero empieza no se si me he explicado :p

    ResponderEliminar
  72. Por cierto potro perdona pero el Contacto que viene en rojo enlazaba a la entrada (normal) que era esta http://minijuegos-online.blogspot.com/2011/02/contacto_10.html por esto creo que te abria bien el formulario ...

    ResponderEliminar
  73. Potro como puedo centrar el cuadro de busqueda en la cabecera de mi blog? ponerlo un poco mas abajo?

    ResponderEliminar
  74. Bilias,

    Vi la que era la indicada, por eso te dije que el problema no es que Blogger te convierta las páginas estáticas en entradas normales sino que la plantilla ya es algo antigua y aplica el Leer más incluso en las páginas estáticas y no las muestra de forma completa.

    Quise ver si podía resolverlo pero esa plantilla es tan... pero tan... modificada que es todo un lío. Te anticipo que si planeas modificarla mucho no saldrá casi nada, así que si la quieres dejar tal como está es bueno, pero si piensas hacerle varios cambios será mejor buscar otra plantilla.

    Saludos.

    ResponderEliminar
  75. Hola potro te pregunto por aca pues ya tengo esta ventana abierta y buscar el tema es un poco complicado, me puse para abrir los enlaces en una nueva pestaña, quise ponerle los codigos para q no abirera algunas ventanas, pero no logro ponerlos, primero puse todas las q keria blokear, y guarde y salio error... pense en algo me abre ekivocado, luego lo volvi hacer detalladamente, y siguio el error, volvi a interntar solamente blokeando 1 y salio error... :S:S no se q pueda ser... ahora que hago amigo ?

    ResponderEliminar
  76. Javier Quiles,

    Enciérralo entre un div que contenga los márgenes:

    <div style="margin-top:40px;">
    ....
    </div>

    ResponderEliminar
  77. FarStar,

    Aunque dé un poco de pereza buscar el tema hay que usar el buscador y el menú para localizar el tema apropiado y así no desviarnos del hilo principal de esta entrada.

    http://ciudadblogger.com/2010/02/abrir-todos-los-enlaces-en-otra-ventana.html

    Vamos a ver esas dudas allá para darle el seguimiento apropiado ;)

    ResponderEliminar
  78. Bueno al final sabes lo que voi a hacer? Es cambiar la paginacion para que no salga la ultima pagina que salga solo < 1234 > por cierto en tu blog no tienes ejemplos de paginacion ....
    Otra vez gracias por tu apoyo.
    Saludos

    ResponderEliminar
  79. Potro miramelo por favor, creo que es que tengo muy ancho el blog, que ancho me recomiendas para que se me quede centrado junto a las entradas, me hago en un vaso de agua PoTRO

    ResponderEliminar
  80. Bilias, nop, pero en la red hay varios tutos sobre ello.

    Javier, pusiste text-align: justify;" y debe ser text-align: center;

    bU, mira el comentario #69

    ResponderEliminar
  81. y donde lo coloco esto? div style="margin-top:40px;"
    ....
    </div

    ResponderEliminar
  82. Como te mencioné, encierra el código del buscador entre esas líneas para generarle el margen que quieres.

    ResponderEliminar
  83. Potro gracias por todo, eres un lince se me ha quedado perfecto.

    ResponderEliminar
  84. Hola Potro! te cuento me gustaria usar el menu en mi blog pero tengo un problema y es que no me esta reconociendo los estilos.

    Aqui te dejo una captura.

    Vista previa

    ResponderEliminar
  85. hola vaya cambio de pagina, me gusta, entrado varia veces en tu blog y no he dado la lata
    porque me ha salido todo bien, me gusta el menu que has puesto aqui dices que funciona con explorer 7 y yo tengo explorer 8 queria saber si lo puedo poner y si no que podria poner me vendria bien yo tambien tengo ya muchas etiquetas y ya he usado las 10 paginas de bloger uqe tambien me gustaria aumentarlas pero no se como.
    decirte que consegui mi baner con tu secretito jaja, pner el incice del blog y el scrip anticopy
    poco a pco lo haciendo en mis dos blogs
    saludos
    ZereZas

    ResponderEliminar
  86. Master Design, necesitaría que lo tengas puesto para ver dónde puede estar el problema.


    zerezas, si tienes muchas etiquetas entonces este menú te servirá. También funciona en IE8, lo que mencionaba sobre IE7 es sólo que ese código debe ponerse ahí arriba porque sino en esa versión no funcionará, pero poniéndolo como se indica no tendrás problemas ni en IE7 ni en IE8 :)


    bU, te ha quedado de lujo el menú, lo has sabido adaptar muy bien al diseño de tu plantilla :)

    ResponderEliminar
  87. Potro como pongo el menu pegado a la cabecera? porque se me pone como 1cm mas abajo..

    ResponderEliminar
  88. Pues yo no lo veo como mencionas, sólo una ligera separación como de 3 pixeles.
    Si quieres subirlo sólo agrega un margen superior con valor negativo:

    #menu-cdblger{
    margin-top: -5px;

    ResponderEliminar
  89. gracias potro lo intentare hasta hora todo me ha salido bien ver si al poner este menu lo hago bien y no me da problemas garcias de nuevo
    me cuesta mucho trabajr con la plantillalas url supongo son de cada pagina que quiera poner en el menu.

    ResponderEliminar
  90. perdon potro debo ser el mas pesado de todos.. jaja pero queria saber como separar el cuadro de busqueda que tengo en la cabecera de mi blog un poco mas a la izquierda porque esta muy pegado al borde derecho.. perdon las molestias!

    ResponderEliminar
  91. zerezas, las URLs son las direcciones Web de lo que quieres enlazar, puede ser una entrada, o un sitio web, por ejemplo, si quisieras enlazar a Google entonces la URL sería:
    http://google.com

    PokerPRO, si lo encerraste como te mencioné en el comentario #78 entonces ahí mismo agrega: margin-right:30px;

    ResponderEliminar
  92. Les recomiendo esta pagina http://www.flashvortex.com/

    Ofrece un monton de diseños de pestañas con o sin menú desplegable, botones, imágenes con texto, banners !!Y TODO GRATIS !!!

    Y lo mejor de todo es que se pueden editar. cambiar tamaños, colores etc.

    Muy recomendable, yo lo puse en mi blog y quedo de 10

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

    ResponderEliminar
  94. Potro, lo puse en mi blog y al pulsar menú no se abre nada, sale javascript void (0), me puedes dar una solución? gracias

    ResponderEliminar
  95. Hola Juan, ¿en cuál blog lo has puesto?

    ResponderEliminar
  96. Este es el link: http://infosportinggijon.blogspot.com/

    ResponderEliminar
  97. Lo que sucede es que usas jQuery y no es compatible con Scriptaculous.
    Mira esta entrada, quizá te sirva.

    ResponderEliminar
  98. Genial ahora me funciona, lo unico que los iconos no se ven ni en ie ni en google Chrome solo en firefox.

    ResponderEliminar
  99. Recuerda que todo lo que subas a Dropbox debe ir dentro de la carpeta Public.

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

    ResponderEliminar
  101. Si está todo en public, pero tengo el problema de que si pongo el url del icono con ie funciona con ie y con firefox pero no con Google Chrome y si lo pongo con con google Chrome, no funciona con ie.Gracias y siento las molestias.

    ResponderEliminar
  102. Si estás sacando la URL desde la página de Dropbox entonces no tienes que seleccionar 'Download file' sino 'Copy public link'

    ResponderEliminar
  103. Ahora ya me sale, no me había dado cuenta de eso,muchas gracias.

    ResponderEliminar
  104. Gracias por este menu, ya lo aplique a mi blog y esta bien y fue super facil, sigue asi, suerte!

    ResponderEliminar
  105. Qué gusto que haya sido de tu agrado :)

    ResponderEliminar
  106. lo quisiera imprementar en una pagina web pero me resulta dificil como puedo hacerle

    ResponderEliminar
  107. ¿Exactamente qué te resultó difícil?

    ResponderEliminar
  108. Hola Amigo Potro, mira ya Lo Tengo pero resulta k la barra principal es muy Larga, Podria Hacerla mas Chica y Ponerla Centrada Como Tu la Tienes En Tu Pagina.

    Espero Tu Respuesta y se Te Agradese La Ayuda Tengo poco k descubri este Blog y ya me ayudado demasiado.

    Saludos Potro

    ResponderEliminar
  109. Hola kriec,

    El menú alcanza el ancho total que tenga el contenedor donde lo has puesto. Si quieres reducir ese ancho entonces cambia donde dice width: 100%; por un valor más bajo.
    Para centrarlo mira el comentario #69

    Saludos.

    ResponderEliminar
  110. no logro ponerlo en mi blog..xp bueno si lo pongo pero tengo un par de problemas, me queda demasiado arriva y aquisiera ponerlo justo debajo de la cabecera.
    y el otro problema es cuando pongo el codigo de scriptaculous, desaparece el widget de mis seguidores..!!
    te dejo mi blog para que veas si la plantilla es chafa o algo asi,,je xp.. http://tumultitec.blogspot.com/
    porcierto la plantilla es de blogger..!xp
    espero y m ayudes..xp

    ResponderEliminar
  111. Necesitaría verlo puesto en tu blog para saber exactamente dónde queda el menú y entender donde es que quieres que quede.
    Para lo de la lista de seguidores mira esta entrada.

    ResponderEliminar
  112. bueno no lo e puesto porq si se ve medio mal pero aqui te dejo una captura. http://j.mp/hqJ37h .!de una vista previa siguiendo todos tus pasos..y pues tambn veo q no se despliega el menu..!:/

    ResponderEliminar
  113. La captura no me sirve, necesito verlo puesto en el blog, sólo así puedo ver los códigos de la plantilla.
    En cuanto a que no se despliega es porque el menú usa Scriptaculous y tienes otro menú arriba que usa jQuery, estas librerías no son compatibles, necesitas aplicar un hack:
    http://ciudadblogger.com/2011/02/usar-jquery-y-scriptaculous-al-mismo.html

    ResponderEliminar
  114. jeje mi cerebro va a explotar.!!!XD creo q m estoi resignando a poner este menu.!!!:/ pero are el ultimo intento.!!aver como sale...gracias

    ResponderEliminar
  115. o si te mando todo el codigo HTML pra que lo veas..porq creo q tengo codigos q salen sobrando..je..xp y si no ps = gracias..asi lo dejamos...ya le puse, quite codigos ,pero nomas no me salee..!xp

    ResponderEliminar
  116. potro el menu me sale por detras de mis entradas osea se desliza por atras creo que ya haz hecho una publicacion para solucionar este problema porque en mi otro blog tengo el menu SEXY DROP DOWN MENU CON JQUERY Y CSS y tenia el mismo problema pero lo soluciones con una de tus puclicaciones pero no la encuentro o talvez la borraste no lo sé pero no la encuentro ayudame porfavor si pudieras dejar el link de tu publicacion... de antemano te lo agradesco

    ResponderEliminar
  117. Muchisimas Gracias Potro

    Quedo Solucionado este Pequeñito problema, y la verdad quedo muy bien, solo me queda agradeserte y saludos.

    ResponderEliminar
  118. man ayudame como ya te comente el menu me aparace detras de las entradas como ago porfavor
    una vez mas gracias

    ResponderEliminar
  119. crakinformatico, pues me encantaría ayudarte pero sin saber cuál es tu blog me es imposible dar con la solución :(

    ResponderEliminar
  120. Hola Potro al fin tengo tiempo, y pude agregar los dos menús que quería una plantilla de diseñador, falta editarlos pero se ve que andan bien, partí el header en 2 como muestras en una entrada para agregar un buscador y un traductor o publicidad en el lado derecho, pero se me agranda el header y se ve mal, lo otro que no se como organizarlo es centrar los títulos de este menú para que no se me trasladen a la izquierda

    lo bueno de haber empezado tarde es que con tus respuestas lo de jquery y scriptaculous y funcionan muy bien los menús, espero puedas ayudarme para ver si le voy dando la forma que quiero a la plantilla, mi blog de pruebas
    http://cultmoviez1.blogspot.com/

    Saludos!

    ResponderEliminar
  121. hola potro mira esta es la direccion de miblog
    http://crakinformatico.blogspot.com/
    es la que falla y esta es la direccion del blog en la k esta bien http://progvs.blogspot.com/

    mira me llego a la bandeja de entrada como solucionar este problema porque estoy suscrito a tu blog pero creo k borre el mensaje y ahora no encuentro tu post en donde explikas como arreglar este herror espero te des el tiempo para responderme ...gracias

    ResponderEliminar
  122. Hola Watesam,

    El hack de jQuery y Scriptaculous ha sido de mucha ayuda para muchos y me alegra que a ti también te haya funcionado ;)

    Para centrar el menú mira el comentario #69.
    Lo del header no me ha quedado muy claro, pero usualmente el problema que todos tienen al momento de dividirlo es que la suma de porcentajes del ancho de las cabeceras así como los márgenes se exceden del 100% y eso trae problemas.

    Saludos.

    ResponderEliminar
  123. Hola crakinformatico,

    El problema que tienes no es justamente el mismo que se plantea en esa entrada que buscas, sino que en este caso el problema es con la plantilla pues así es como están hechas.
    No veo que estés usando este menú sino otro, de cualquier forma sólo necesitas agregar debajo de ul.topnav li { esto:

    z-index:1000;

    ResponderEliminar
  124. siii disculpa se que no es el menu de esta entrada jeje primero si lo puse pero como no le encontraba solucion porque me salia detras de las entradas intente otro pero me salia el mismo herror
    bueno potro un millon de gracias pues ya me anime por uno de ellos y solucione el problema con tu ayuda una vez mas gracias.!!

    ResponderEliminar
  125. Hola potro ya esta centrado el menú pero abrir el submenú sigue abriéndose a la izquierda, supongo que hay que agregar ese mismo código en algún otro lado

    Como siempre gracias por tanto

    ResponderEliminar
  126. En la parte del código de la estructura del menú busca esta parte:
    style='display: none; position: absolute;

    Justo después de eso agrega esto:
    margin-left:150px;

    Ese es un margen izquierdo para que se mueva a donde quieras, puedes manipular ese número por un número mayor o incluso un número negativo.
    Si el problema también lo tienes en IE entonces verás seguido de eso esto:
    _margin-left:-100px; *margin-left:-100px;

    Esos también son márgenes izquierdos pero sólo para IE, también los puedes modificar a tu gusto.

    ¡Saludos!

    ResponderEliminar
  127. potro mira yo pongo el menu en mi blog y queda fino, pero no entiendo por que no me deje ver mis seguidores de blogger en mi blogs, yo quito el menu y se ven los seguidores no entiendo por que

    ResponderEliminar
  128. Hola Moderador,

    Es porque Scriptaculous (el script que se usa para este menú) es incompatible con la Lista de Seguidores:
    http://ciudadblogger.com/2010/01/solucion-la-lista-de-seguidores.html

    ResponderEliminar
  129. potro yo puse un menu como tu lo tienes en suscripciones en columna pero a me sale cuando le doy click me sale el submenu donde dice inicio. no me sale en la misma posicion los submenus

    ResponderEliminar
  130. Sólo agrégale en los estilos de esa área un margen izquierdo con valor negativo, iría después de position: absolute; por ejemplo:
    margin-left: -450px;

    Eso deberá hacer que el menú se mueva hacia la derecha.

    ResponderEliminar
  131. ya lo intente y nada mira esta en la pagina labv87.blogspot.com en el menu donde dice De Interes veras que los submenu no salen debajo de esa pestaña

    ResponderEliminar
  132. Lo he puesto en mi blog y ha quedado genial¡¡¡ muchas gracias¡
    He cambiado algunas cosillas pero me falta saber como cambiar el tamaño de letra de las pestañas. Me dices como hacerlo?

    Otra cosa, porque hay que eliminar:
    /* Tabs
    ----------------------------------------------- */

    Relentiza la pagina si lo dejo?tiene alguna funcion?

    ResponderEliminar
  133. Moderador, entré a tu blog pero ya no veo puesto el submenú.


    Loren, porque las plantillas del Diseñador tienen estilos predefinidos para los menús debajo de la cabecera y si no se quitan puede haber conflito de estilos y podría no verse bien. Las pestañas no tienen un ancho definido sino que se adaptan al ancho del texto, pero tienen una separación entre ellas que puedes hacer más grande o más corta, eso se hace cambiando el valor de padding-right: 20px;

    ResponderEliminar
  134. Bueno dias.

    El caso es que estoy creando un nuevo blog, y me ha gustado mucho este menu. Creo haber echo tal y como pone. El caso es que me sale el menu, pero no se despliega nada, y no se porque puede ser.

    Si pudieras ayudarme, gracias.

    ResponderEliminar
  135. Buenos días Iñigo,

    Pueden ser por varios factores pero sin saber en cuál blog lo has puesto me es imposible ayudarte.

    ResponderEliminar
  136. Buenas Potro.
    Pensaba que podría ser algo comun y por eso no puse el blog. http://carpashossegor.blogspot.com/
    Ni tan si quiera tiene una entrada, aun lo estoy preparando.

    Muchas gracias ;)

    ResponderEliminar
  137. Aun cuando pueda ser un problema común siempre pueden haber muchas posibilidades distintas pues cada blog es diferente a los demás, es por eso que siempre es indispensable poner la dirección del blog.

    En este caso el problema es de incompatibilidad, pues usas el menú deslizante arriba del blog que usa una librería de scripts que se llama jQuery. Ésta librería es incompatible con Scriptaculous, que es el script que se usa para este menú.
    Es por eso que conjuntamente no te funciona. Para solucionarlo necesitas aplicar un hack para que puedas usar jQuery y Scriptaculous al mismo tiempo.

    Saludos.

    ResponderEliminar
  138. Hola potro,
    Estuve los dos ultimos días aplicando el script, iba fenomenal hasta que se me ocurio probar en internet explorer. Los sub menus pasan por debajo de las entradas.
    En Firefox y chrome no ocurre.
    Tienes una idea?
    http://www.militaria-segundaguerramundial.com/

    Saludos, Alex

    ResponderEliminar
  139. Hola Alex,

    Quizá sea a versión de tu navegador, yo acabo de entrar desde IE8 y el submenú se despliega de forma normal sin esconderse detrás de las entradas.

    Saludos.

    ResponderEliminar
  140. Hola el potro,

    Seguramente sera esto. Nunca uso IE. Bueno, entonces lo voy a dejar tal cual y voy a seguir con otros post tuyos para mejorar la visibilidad.
    Con otro ordenador de otra manera lo mirare, pero como lo ha hecho, no me corre prisa :)
    Espero que tus ingresos adsense compensan el tiempo que inviertes en este blog. Después de buscar este el mejor para mejorar una plantilla prediseñada por blogger. Hay muchos con templates, pero no me gustan ya que despues son complicados de modificar.
    Así que muchas gracias.
    Saludos!
    Alex.

    ResponderEliminar
  141. Potro buenas tardes.!
    Pork no se me desliza mi menu?
    http://vagabondcreativity.blogspot.com/

    ResponderEliminar
  142. Porque ya usas jQuery el cual no es compatible con Scriptaculous.

    ResponderEliminar
  143. y que hago, no lo puedo poner de ninguna forma?

    ResponderEliminar
  144. Puedes intentar con este hack:
    http://ciudadblogger.com/2011/02/usar-jquery-y-scriptaculous-al-mismo.html

    ResponderEliminar
  145. wow excelente hermano, me funciona nitido! vamos a tener que crear una pag Web Social Media!

    ResponderEliminar
  146. Hola de nuevo Potro....
    Me estaba gustando mucho el menu y me viene muy bien, pero no encuentro donde colocar el codigo en el cual pones los enlaces del menu.
    Ya busque los codigos que das y otros dos que vi en los comentarios pero nada...
    Podria ser que a diferencia de todos yo uso el programa Artisteer para diseñar las plantillas y que no deje colocarla???
    Te mando la plantilla por el contacto y me dices si se puede.
    Saludos y Gracias de nuevo...

    ResponderEliminar
  147. Hola potro buenos dias, amigo como hago para cambiarle el ancho y colocarlo a la misma medida de ancho del hearde.

    ResponderEliminar
  148. javi_anubis, las plantillas hechas con Aristeer usan códigos completamente diferentes a las plantillas originales de Blogger. Siento no poder ayudarte con eso pues de esas plantillas no conozco su estructura.

    CrewUrbano, el menú se ajusta al 100% del ancho del contenedor donde lo pongas, quizá lo que es más reducido es el ancho del área donde lo colocaste. Puedes probar con cambiar el width: 100%; por otro valor más alto hasta que se ajuste (por ejemplo 120%) aunque la verdad no sé si eso dé resultado pues como te decía va más en relación al ancho del contenedor.

    ResponderEliminar
  149. Bueno no hay problema ire probando hasta que me salga, gracias igualmente por todo tu trabajo jeje...

    ResponderEliminar
  150. Bueno encontre donde va el codigo de los enlaces era antes de
    div id='crosscol-wrapper' style='text-align:center'>
    pero ahora el menu no me baja....

    Intente con este otro menu:
    http://ciudadblogger.com/2011/04/menu-horizontal-con-subpestanas-hecho.html
    Pero ahora cuando me baja el menu se oculta en las entradas y... bueno los problemas me siguen jajaja... me podes ayudar aunque sea en este ultimo.
    Saludosss

    ResponderEliminar
  151. Si usarás este menú dime en cuál blog lo has puesto para mirar si se trata de alguna incompatibilidad con otro script. Si usarás el otro menú entonces deja el comentario en esa entrada y de igual forma dime la dirección de tu blog donde lo has puesto para que pueda mirarlo.

    Saludos.

    ResponderEliminar
  152. Mi plantilla te la mande por correo/contacto para que la veas, supongo que todavia no te llego, igual esta es mi pagina donde me gustaria colocarla para sacar lo que seria las etiquetas...
    http://javier-anubis-doujinshi-2010.blogspot.com/
    Esa plantilla ya le estuve cambiando y agregando cosas tuyas. Y no es por el problema de Scriptaculous / jQuery porque antes de agregar cosas intente primero lo del menu sobre la plantilla ya diseñada (la que te mande...).
    Bueno mirala si tenes tiempo, desde ya muchas gracias por tu tiempo, y si no se puede hago la plantilla desde blogger directamente...
    Hasta un futuro comentario....

    ResponderEliminar
  153. Pero sigo sin entender cuál menú es que te da problemas, pues al menos en ese blog veo sólo un menú y no es ninguno de los dos que mencionas.

    ResponderEliminar
  154. Ese menu lo agrege con el mismo artisteer, y quiero cambiarlo por algunos de los tuyos, el de este post el problema es que no me baja el submenu (ya encontre donde iva y lo puedo ver).
    Bueno fijate si tenes tiempo, igual yo tambien lo voy a estar viendo despues...
    Saludosss...

    ResponderEliminar
  155. Lo que necesito es que lo tengas puesto para poder mirar porqué no funciona, sino lo tienes puesto no puedo saber dónde está el problema.

    ResponderEliminar
  156. Bueno es en este blog donde lo queria...
    http://shadows-of-anubis.blogspot.com/
    Como veras es el submenu lo que no funciona.

    ResponderEliminar
  157. En ese blog tienes sí tienes jQuery y es porque el mismo Arsiteer los agrega para el funcionamiento de sus plantillas. Revisa de nuevo y verás que ahí lo tienes.

    ResponderEliminar
  158. Jeje pues yo ni enterado, con razonnnn....
    Bueno lo hago como todos desde blogger las plantillas, igual con tu ayuda es mas que suficiente.
    Gracias por ayudarme!!!!

    ResponderEliminar
  159. Potro disculpa que te moleste de nuevo, no sabia donde preguntar esto... pero queria saber como cambio el margen superior del blog
    http://shadows-of-anubis.blogspot.com/
    Como veras queda un espacio entre el top de la pagina y el fin de la imagen en la parte de arriba, queria que queden pegadas como en esta otra (http://javier-anubis-doujinshi-2010.blogspot.com/)
    jeje enserio disculpa si soy molesto...
    Saludos y Gracias.

    ResponderEliminar
  160. No te preocupes ;)
    Mira esta entrada, ahí está la información que buscas.

    ResponderEliminar
  161. Hola Potro, gracias por este menu, me iría de perlas si me funcionase bien...

    Me pasa que cuando añado un submenu nuevo, la posición donde se despliega este submenu, no tiene que ver con la posicion del menu que he mandado desplegar. No se si me explicado bien...

    Te dejo la web, www.shiatsudobarcelona.com

    Gracias de antemano

    ResponderEliminar
  162. Hola,

    Busca la parte del código que corresponde a ese submenú (categorias3) y justo antes de _margin-left:-100px; *margin-left: -100px; agrega esto:
    margin-left:800px;

    Con eso deberá acomodarse en su lugar.
    Si en Internet Explorer tienes el mismo problema entonces cambia los valores de _margin-left:-100px; *margin-left: -100px; hasta que se ajusten a la posición que deseas.

    Saludos.

    ResponderEliminar
  163. Recuerda que Scriptaculous no es compatible con jQuery:
    http://ciudadblogger.com/2011/02/usar-jquery-y-scriptaculous-al-mismo.html

    ResponderEliminar
  164. Pues tampoco encontré bien los códigos pero quizá sólo necesites cambiar este:
    <script type='text/javascript'>
    $(window).load(function() {
    $('#featured').orbit({
    advanceSpeed: 5000,
    'bullets': true,
    'timer' : true,
    'animation' : 'horizontal-slide'
    });
    });
    </script>


    Por este:

    <script type='text/javascript'>
    jQuery.noConflict();
    jQuery(window).load(function() {
    jQuery('#featured').orbit({
    advanceSpeed: 5000,
    'bullets': true,
    'timer' : true,
    'animation' : 'horizontal-slide'
    });
    });
    </script>

    Espero con eso funcione, sino creo que sí tendrás que considerar otro menú porque aun así hay scripts de jQuery que se resisten a ese hack.

    ResponderEliminar
  165. Hola Potro,

    Gracias por contestar, funcionó de maravilla la solución que me diste en los tres exploradores Ch,Ex y Fir.

    Lo único con lo que me encuentro ahora es que como realicé en diseño con una resolución en una pantalla pequeña de 1024x600, me encuentro con que el menu horizontal en otras resoluciones no queda centrado y además se extiende más allá de los margenes del blog.

    Sabes como podría solucionar esto?

    Gracias de antemano y un abrazo,
    Julio

    ResponderEliminar
  166. Hola Escuela Japonesa de Shiatsu,

    El menú se extiende al 100% del ancho del contenedor de donde se ponga, en este caso es el tipo de plantilla que usas que hace que el ancho sea siempre según el ancho de la ventana del navegador.
    Como es un asunto de la estructura de la plantilla no hay mucho qué hacer, quizá lo único sería que cambies esta parte del menú:
    width: 100%;
    Por un valor definido en pixeles, por ejemplo width: 960px;

    Saludos.

    ResponderEliminar
  167. Hola de nuevo Potro,

    Lo probé a 960px y me acortó la barra de menu, pero me quedó descentrada, osea alineada a la izquierda.
    En realidad no me importa tanto que el menu se extienda al 100% de la pantalla tanto como que los links del menu queden centrados. Sabes como centrar los links del menu y que no queden alineados a la izquierda tal y como están ahora?

    Gracias por todo,
    Julio

    ResponderEliminar
  168. En el comentario #69 están las indicaciones. Saludos.

    ResponderEliminar
  169. Hola Potro, coloque el menu en mi blog y todo funciona bien, solo que no se ve el color de fondo del menu principal, los submenus si se ven, espero me explique bien, mi blog: abrahamseguros.blogspot.com

    ResponderEliminar
  170. Hola Abraham,

    Debes quitar todas las líneas que tienes como esta:
    <!-- Menu Horizontal ini -->

    Esas sólo se usan si es algo que está dentro de <body> o antes de </head> pero no antes de los estilos, de lo contrario los inhabilita.

    ResponderEliminar
  171. Muchas Gracias Potro, tu siempre tan puntual y al punto....

    con eso he aprendido algo nuevo, que me hace revisar mis demas blogs, por que pienso que tengo ese error en ptros blogs,

    entonces fuera del body> alguna anotación sera con /* ... */

    Muchas Gracias y Éxito en Todo

    ResponderEliminar
  172. Exacto, bueno, la anotación /* ... */ sólo se aplica cuando es antes de ]]></b:skin>
    O bien, para un código que esté dentro de <style> y </style>

    ResponderEliminar
  173. Hola potrillo, me podes orientar si podria usar este menu, en esta web http://www.mirrortac.com.ar/evolucion/ o algo parecido. Estoy estudiando diseño multimedial y lo necesito para un trabajo lo antes posible.
    Muchas gracias, muy buena tu web

    ResponderEliminar
  174. Hola Rivero Melanie,

    Nunca lo he probado en un sitio Web pero debería funcionar. Los pasos son los mismos, solo que lo que va antes de ]]></b:skin> lo pondrías antes de:
    -->
    </style>

    Y el último código que es la estructura del menú lo puedes colocar el cualquier parte dentro del <body>

    ResponderEliminar
  175. hola ya use este menu aunque al principio fue dificil lo he ido adecuando a mi blog, sabes como agregar mas paginas fuera del limite

    ResponderEliminar
  176. Hola, ¿te refieres a tener más de 10 páginas estáticas?
    Si es así mira esta entrada de Vku que explica cómo hacerlo:
    http://loseasi.blogspot.com/2011/03/tener-mas-de-10-paginas-independientes.html

    ResponderEliminar
  177. Hola Potro saludos, yo aca de nuevo, gracias por tu ayuda abierta, de veras, talvez me puedas guiar, tengo un blog que es de Karaoke, el promueve los eventos, los lugares, los muchachos que ponen karaoke, pero se hace por medio de entradas, habra una forma de tener un menu que diga pienso yo "Lugares para ir a cantar" o "los mejores Karaokes" asi poder poner datos de el lugar y si fuera posible imagenes del lugar, entonces los karaokeros entrarian al blog y se irian a ese menu y encontrarian una buena opcion, entre las que hayan, Gracias Potro, se que tu me puedes ayudar, exitos

    ResponderEliminar
  178. Hola TOTAL iPhone,

    Puedes escribir esa información igual en una entrada, o sino quieres que sea visible en la portada puedes hacerlo en una página estática. Luego en tu menú enlazas esa entrada o página para que al dar click aparezca esa información.

    Saludos.

    ResponderEliminar
  179. Gracias Potro , que pena como hago una pagina estatica y como enlazo la entrada? yo coloque el menu deslizante azul bonito que tu tienes sera que ahi lo puedo colocar, disculpa mi falta de conocimiento en el tema del diseño, soy muy novato, gracias por tu ayuda

    ResponderEliminar
  180. La página estática la heces yendo a Creación de entradas > Editar páginas > Página nueva.
    Cuando la publiques abre la página para que la veas, arriba en la barra de direcciones de tu navegador verás la URL de la página, copiala. Esa es la URL que necesitas para enlazarla desde el menú que quieras, ya sea ese menú que has elegido o cualquier otro ;)

    Saludos!

    ResponderEliminar
  181. Hola Amigo, Hay una parte aca Potro que dice que pongamos el URL del icono, me podrias explicar, disculpa, medio torpe, me come un poco la tecnologia

    ResponderEliminar
  182. Ya resuelto Potro, quedo muy bien, gracias de nuevo...

    ResponderEliminar
  183. Qué gusto que ya lo has resuelto :)

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

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

    ResponderEliminar
  186. oye como puedo aumentar el ancho de los submenus ya que el texto que escribí es muy largo, entonces en vez de que se vea normal se ve asi.

    las cronicas
    de narnia en
    tercerda
    dimension

    y lo que quiero es que se vea corrido ayuda me porfavor!! me urge

    ResponderEliminar
  187. Hola potro, como puedo colocar el gadget de busqueda en el blog dentro de la barra, es que así libero algo de sitio.

    ResponderEliminar
  188. Rick, eso es porque has modificado el submenú y al hacerlo quitaste las demás columnas, con eso dejaste sólo las columnas y por eso se ve todo en una fila. Si lo pones como estaba, un item en una fila, luego otro en la fila dos, y así, entonces se verá bien.

    ResponderEliminar
  189. pos_ch, no lo he hecho pero sería cuestión de que en lugar de esta parte:
    <img src='URL del icono'/> <a href='URL del enlace'>Pestaña Fila 1</a>

    Pongas el código del buscador:
    <form id="searchthis" action="/search" style="display:inline;" method="get"><input id="search-box" name="q" type="text"/> <input id="search-btn" value="Buscar" type="submit"/></form>

    ResponderEliminar
  190. ya he modificado el alto de la barra para que ajuste el gadget de la busqueda, y en los estilos quiero poner la fuente en 16 con font-size:16; pero no hace nada, lo he colocado bajo font-weight

    ResponderEliminar
  191. Es que te ha faltado especificar los pixeles. Debe ser:
    font-size:16px;

    ResponderEliminar
  192. si ya me di cuenta haha! es que ya andaba cansado por eso no lo noté, oye modifique un poco el codigo y todo eso y todo funciona perfecto, solo una duda, tengo un menu que ocupa mucho espacio, entonces se despliega casi hasta el final de la pagina, pero tengo un cuadro de embed de megavideo entonces cuando baja el menu se esconde atrás del cuadro de megavideo, se que es por que el embed usa flash, pero como lo soluciono para que pase por esncima y no se esconda en esa parte!, te dejo mi blog con una de las entradas por que es casi en todas.
    http://www.thecinemaonline.org/2011/02/mi-pobre-angelito.html

    le das en peliculas, despues en S-T, despues te deslizas hacia abajo y veras el problema
    ;)
    espero tenga solucion

    ResponderEliminar
  193. Mira esta entrada, ahí se explica cómo solucionar esos detalles:
    [Cuando los videos se sobreponen]

    ResponderEliminar
  194. Potro.... te acabo de enviar por e-mail una duda sobre los submenús. Un abrazo

    ResponderEliminar
  195. Hola Carlos,

    Como el tema es sobre esta entrada te respondo por acá.
    El problema está en que este menú requiere de un script que se llama Scriptaculous, el cual no es compatible con jQuery, otro script que usas en el blog.
    Hay un hack que hace que se puedan usar Scriptaculous y jQuery al mismo tiempo. No sé si lo aplicaste porque veo en el código de tu plantilla que está aplicado a medias.

    Si miras ese enlace verás que hace falta agregar:
    jQuery.noConflict();

    Y posiblemente también cambiar el signo $ que aparece por ahí, por la palabra jQuery

    Prueba hacer esos cambios, si sale bien entonces el submenú podrá deslizarse.

    Si quieres agregar otro submenú sólo cambia toda la línea morada que mencionabas por el último código que se menciona en la entrada.

    Saludos!

    ResponderEliminar

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

Nota: solo los miembros de este blog pueden publicar comentarios.

 
Ir Arriba Ir Abajo
I Ciudad Blogger