Sin duda Mootools es una de las librerías más completas en efectos para páginas web aunque no es tan popular como otras librerías de efectos.
Este es un buen ejemplo de los atractivos efectos que se pueden conseguir con esta librería, se trata de un menú de imágenes tipo acordeón que se desliza suavemente cuando se pasa el cursor sobre él.
El menú es de ByScripts el cual ellos lo llaman Byslidemenu y ha sido Robinson quien me ha pedido que explique su instalación.
Hay dos versiones, el menú horizontal y el menú vertical.
Puedes ver funcionando el ejemplo en este blog de pruebas.
Antes de ponerlo considera que, Mootools no es compatible con la mayoría de las librerías de efectos, así que si usas jQuery, Prototype o Scriptaculous estoy casi seguro que no les funcionará.
Además que es un menú de imágenes, así que cada quién deberá crear sus imágenes con sus textos o lo que se le quiera agregar a la imagen.
Bien, habiendo aclarado lo anterior empecemos, primero hay que descargar este archivo, descomprimirlo y subirlo en algún alojamiento.
Ahora entra en Plantilla | Edición de HTML y pega antes de </head> lo siguiente:
<script src='URL del archivo mootools-core.js' type='text/javascript'/>
<script src='URL del archivo byslidemenu.js' type='text/javascript'/>
<style type='text/css'>
ul.bsm{
margin: 0px auto;
border:1px solid #B0B0B0;
list-style-type: none;
}
ul.bsm li{
border-left:2px solid #FFFFFF;
}
ul.bsm li.first{
border-style: none;
}
ul.vertical li,
div.vertical div{
border-top: 2px solid #FFFFFF;
border-left-style: none;
}
</style>
Cambia lo que está en color verde por las URLs de los archivos que subiste previamente a tu alojamiento.
Luego pega antes de </body> esto:
<script type='text/javascript'>
window.addEvent('load', function(){
var slideMenu = new BySlideMenu();
var verticalmenu = new BySlideMenu('verticalmenu', {vertical: true});
});
</script>
Por último entra en Diseño | Elementos de la página | Añadir un gadget | HTML/Javascript y pega uno de estos códigos.
Si deseas usar el menú horizontal pega esto:
<ul class="bsm" id="byslidemenu">
<li class="first"><a href="URL del enlace"><img src="URL de la imagen" /></a></li>
<li><a href="URL del enlace"><img src="URL de la imagen" /></a></li>
<li><a href="URL del enlace"><img src="URL de la imagen" /></a></li>
<li><a href="URL del enlace"><img src="URL de la imagen" /></a></li>
<li><a href="URL del enlace"><img src="URL de la imagen" /></a></li>
</ul>
O si deseas el menú vertical pega este:
<ul style="display:none; visibility:hidden;" class="bsm" id="byslidemenu">
<li></li></ul>
<ul class="bsm vertical" id="verticalmenu">
<li class="first"><a href="URL del enlace"><img src="URL de la imagen" /></a></li>
<li><a href="URL del enlace"><img src="URL de la imagen" /></a></li>
<li><a href="URL del enlace"><img src="URL de la imagen" /></a></li>
<li><a href="URL del enlace"><img src="URL de la imagen" /></a></li>
<li><a href="URL del enlace"><img src="URL de la imagen" /></a></li>
</ul>
Ya sólo cambia lo que está en color rojo por las URLs de tus imágenes y por las URLs de los enlaces. Las imágenes yo las he hecho de 300px de ancho y 225px de alto, pueden ser de cualquier otra medida, pero esa de ejemplo creo que da mejores resultados visuales.
Como ves la instalación es muy sencilla, el mayor trabajo estará en diseñar las imágenes del menú, pero al final seguro tendrás un menú mejor personalizado y poco usual.
woooooooooooooooow, Esta muy bakan bro mil gracias.
ResponderEliminarPero podrias poner una preview pero en uno de tus blogs de prueba, solo si esque puedes, Saludos cuidate potro
¿No se puede ver el ejemplo del post? o.O?
ResponderEliminarem, esque en el titulo del post dice "Tipo Acordeon" y en el ejemplo que pusiste en el post no se aprecia bien, se ve solo como una imagen y se ve cortada abajo... :/
ResponderEliminarListo, ya he quitado ese ejemplo y lo pasé a un blog de pruebas :)
ResponderEliminarExcelente ahora quedo muy bien el ejemplo, creo que lo aplicare a mi blog, cuando este en mi otro pc xD
ResponderEliminarSaludos y gracias.
Hola Potro, el menú se veía perfecto, al menos cuando yo visualicé las páginas estáticas, por un instante variaron las dimensiones del horizontal, iba a comentar ese detalle, pero ya veo que "todo va viento en popa". Enhorabuena
ResponderEliminarSí, es que por ahí se me había ido una parte del código y justo lo estaba arreglando, pero ya se ve bien incluso en Internet Explorer.
ResponderEliminarSaludos.
muy bueno, pero no lo puedo utilizar por lo de las librerias que no son compatibles.
ResponderEliminarEspero que nos muestres algun dia como lograr este efecto con otra libreria.
Saludos.
Me parece que hay uno parecido con jQuery pero no estoy seguro, deja que tenga un poco de tiempo y veo si lo encuentro.
ResponderEliminarSaludos.
Buenisimo! Me ha encantado, pero digo lo que el compi, que pena que no sea compatible
ResponderEliminarSaludos
Hola Potro:
ResponderEliminarGracias por la explicación del Menú. Queda perfecto para colocarlo en el blog. En verdad que eres un duro en esto de los trucos.
Gracias por la mención. Siempre en contacto.
Robinson Char
que son los url de enlaces ? que enlaces ? plis una respuesta k no se mucho d esto :(
ResponderEliminarMeri, al menos los que usan Mootools sí lo van a disfrutar :)
ResponderEliminarRobinson Char, qué gusto que ya vas a poder usarlo ;)
Mago Ilusionista, la URL del enlace es la dirección de la página a la que enlaza algo, en este caso cada imagen del menú, por ejemplo, la URL de Google es http://google.com
aaa muchisimas gracias veo si me sale y cualquier cosa consulto :) no m imagine que contestarian tan rapido! muy buena pagina!
ResponderEliminaralguien sabria como hago para k cuando hago click en el menu me redirecione a una parte de mi mismo blog ? como este menu http://pateandobarrio.blogspot.com/ si me pueden ayudar o mandarme algun link d un tutorial seria muy feliz jaja gracias perdon por ser tan molesto
ResponderEliminarPues hay varias formas de obtener la URL de una página, la más fácil sería que entres a la página que quieres enlazar y que copies la dirección que aparece en la barra de direcciones del navegador, esa sería la URL.
ResponderEliminarSaludos.
que página puedo alojar las imagenes????
ResponderEliminarbuenas me queda un borde blanco miren http://magoyamil.blogspot.com/ si me dicen como puedo sacarlo o que tamoño tiene k tener la imagen para k no aparesca se los agradeceria mucho!
ResponderEliminarSaludos!
WELAROM, hay varios sitios, TinyPic, Imageshack, Picasa, Google Sites, etc.
ResponderEliminarMago Ilusionista, no vi que lo tengas puesto. El tamaño que yo he usado es de 300 x 225px
Eso si Potro. Espero que lo pongan porque esta chulisimo
ResponderEliminarSaludos
es perfecto, pero dos preguntas:
ResponderEliminarFunca con el sexy menu?
Y para que las imágenes se muevan más rápido? me parece que va muy lento...
Jo, no te dejo en paz, no tengo perdón XD
Nop, tal como mencioné en la entrada, no es compatible con jQuery.
ResponderEliminarY sí, no tienes perdón, jajaja :D
Gracias potro
ResponderEliminaraunque tengo otra pregunta que no viene a esta entrada, pero quiero poner un reproductor de musica en mi blog pero necesito un alojador de musica que no sea dropbox porque no lo agarra en mi pc :S
gracias d nuevo
Si no tienes un dominio propio (.com) puedes usar Google Sites, también es muy bueno.
ResponderEliminarSaludos.
hola soy fred y acabo de ver tu blog y esta excelente pero ahora me gustaria saber de como se hace el menú que tienes en tu blog el que dice:temas basicos, plantillas, contadores, herramientas, etc. y tambien de como lo has echo como un boton te lo agradeceria bastante espero tu respuesta.
ResponderEliminarUn menú parecido es este:
ResponderEliminarhttp://ciudadblogger.com/2009/06/menu-horizontal-en-blogger.html
Lo del botón no sé a qué te refieres.
Saludos.
Hola Potro! denuevo por aca!
ResponderEliminarmira tengo este blog de pruebas con esa misma plantilla, oc que pasa pero no agarra el eefcto a ver si puedes verlo que pasa :
http://kids101010.blogspot.com/
saludos!! potro!
Quizá puede ser algo de la plantilla, si te fijas con el menú horizontal sí funciona, sólo con el vertical no funciona en esa plantilla, desconozco a qué se deba.
ResponderEliminarSaludos.
hola yo igual tengo el problema cuando pongo el horizonal sala perfecto cuando pongo al vertical aun teniendo el horizonal agarra los dos bien pero cuando quito el horizontal el vertical ya no agarra esta bien raro
ResponderEliminararquitectura online y .::EALV::. ,
ResponderEliminarAgreguen arriba del código del menú vertical esto:
<ul style="display:none; visibility:hidden;" class="bsm" id="byslidemenu">
<li class="first"></li>
</ul>
Con eso ya debe funcionar.
Saludos.
jajaja si funciono te doy toda las grcias muchisimas gracias este menu me encanto pero lo keria en vertical pero por este porblema no lo ponia aaaaaaaaaaaa gracias eres el mejor
ResponderEliminarQué bueno que ya está funcionando todo bien ;)
ResponderEliminarwow muchisimas gracias agradecida!
ResponderEliminarEste comentario ha sido eliminado por el autor.
ResponderEliminarhola a todos tengo una inquietud...yo coloque el menu horizontal pero quiero cambiarlo de puesto colocarlo por la cabezera como hago
ResponderEliminarSólo arrastra el gadget hasta que quede debajo de ella, mira aquí.
ResponderEliminarPotro al cien men pero no me sale lo del archivo serias tan amable de pasarme los url???? digo si quiere :$
ResponderEliminarhttp://dl.dropbox.com/u/647003/CiudadBlogger/Scripts/Mootools_Byslidemenu.rar
ResponderEliminargracias ^.^
ResponderEliminaro_Ó Wowww... que profesionál que se que ve eso!!! Felicitaciones Bro!! es excelente!!
ResponderEliminarUn abrazo!!!
¿Verdad que sí? Igual a mí me ha gustado :)
ResponderEliminar¡Un abrazo!
FELICITACIONES,POTRO LO INCORPORE A MI PAGINA http://librosdecostura.blogspot.com/
ResponderEliminarPERO COMO HAGO PARA:
1.- QUE CARGUE MAS RAPIDO
2.- ALARGARLO MAS PARA QUE SE VEA DEL ANCHO DE LA PAGINA
DE ANTEMANOS MIL GRACIAS
Hola Prof. Maria,
ResponderEliminarCargará más rápido si el primer código lo pegas después de
<head> en lugar de </head>
Para alargar el menú sigue estos pasos:
- Abre el archivo byslidemenu.js con WordPad
- Localiza esta parte:
elementWidth: 320,
elementHeight: 240,
El primer número es el ancho del menú, el segundo número es el alto, puedes cambiarlos por las medidas que desees.
- Guarda los cambios y sube el archivo al alojamiento y continua con los demás pasos del tutorial.
Potro en " Diseño | Elementos de la página | Añadir un gadget | HTML/Javascript"
ResponderEliminarsi lo quiero agregar en una Html normal con el dreamweaver,
qué tend´ria que haceR?
vale gracias de antemano :D
Sería dentro del cuerpo del sitio, es decir, dentro de <body> y </body>
ResponderEliminarhola estoy haciendo paso a paso lo que dices pero en el momento de pegar el primer codigo me sale este error
ResponderEliminarMensaje de error de XML de: tipo de elemento "script" debe ser seguida de especificaciones de atributo o bien, ">" o "/>".
Que estoy haciendo mal, por fa si puedes ayudarme te agradezco
Hay una parte del código que te está faltando, quizá al poner la URL de script te has "comido" alguna letra. Inténtalo de nuevo.
ResponderEliminarNo hemos podido guardar tu plantilla
ResponderEliminarPor favor, corrige el siguiente error y envía la plantilla de nuevo.
No se ha podido analizar su plantilla, porque no está bien formada. Asegúrese de que todos los elementos XML se han cerrado correctamente.
Mensaje de error de XML: Element type "script" must be followed by either attribute specifications, ">" or "/>".
Es nuevamente el mismo error, revisa bien el código de ejemplo y remplaza únicamente lo que se indica.
ResponderEliminarPotro disculpa tanta preguntadera pero logre hacerlo a medias!! es decir aparecen los cuadros pero no se mueven
ResponderEliminarhttp://ivanca-calderas.blogspot.com/
si puedes mirar y me dices que me falto por favor te agradezco.
En las plantillas nuevas de Blogger nunca lo he probado así que no sé si funcione.
ResponderEliminarDe cualquier modo el primer código va antes de </head> no antes de <head>
listo ya hay movimiento, ahora como hago para que se vean las letras de cada uno? cada cuadro tiene un nombre como hago aqui??
ResponderEliminarEs tu plantilla que tiene predeterminadas esas medidas, no puedo asegurarte que funcione bien con las plantillas nuevas de Blogger, pero puedes intentar buscando este código y eliminando lo que está en negrita:
ResponderEliminar.tabs-inner .widget ul {
padding: 2px 25px;
max-height: 34px;
Wow que genial! nwn lo intentare :P lo que quisiera preguntar es que tamaño usaste para las imagenes k usast? Saludos.
ResponderEliminarAhí mismo en la entrada lo he mencionado, son de 300px de ancho y 225px de alto.
ResponderEliminarSaludos.
Potro, encontré en esta página (http://www.phatfusion.net/projects.html) un menú que CREO que es compatible con jquery y demás librerías... es
ResponderEliminarsi te atrevés a probarlo y luego explicar todo... te agradeceríamos muchos. me pareció muy bueno y útil.
lo que no sé es si se puede usar vertical. date una vuelta si querés:
http://dev.phatfusion.net/imagemenu/
Listo ya me kedo! nwn Infinitas Gracias
ResponderEliminarNick'sWriter, quizá no lo notaste pero es el mismo menú que explico en esta entrada ;)
ResponderEliminaraah, ok! porque estoy buscando alguno que sea compatible. gracias por responder
ResponderEliminarPotro No me sale.. :( lo he intentadooo pero nahh.. :( ayuda plis.. hago todo lo ke dices.. y nada..!! sera por la plantilla???
ResponderEliminarsalu2 grascias..!!
Es porque usas Scriptaculous y no es compatible con el script que se usa para este menú.
ResponderEliminarEmm jejeje ke es Scriptaculous?? jeje perdona la intensidad..!!
ResponderEliminarListo men..!! YA SALIO..! THANKs..!! Le kite esoo Men y tu ke estudiasteS?? o ke?? porke eres UN Barbaro jejejeje
ResponderEliminarSaludes..!
Es un script que se usa generalmente para efectos de deslizamiento, en algo lo estabas usando, desconozco en qué, así que si lo has eliminado seguro algo dejará de funcionar.
ResponderEliminarSaludos.
no me sale,presiento que es un problema con las direccines, porque me aparece una barrita como un menu pero no las imagenes que elegi por favor puedes ayudarme?
ResponderEliminarsubi a dropbox los archivos
https://dl-web.dropbox.com/get/BLOG/mootools-core.js
https://dl-webdropbox.com/get/BLOG/byslidemenu.js coloco todo esta direccion
donde dice url de enlace puse
https://www.dropbox.com"
¿que será que me esta fallando? gracias
Efectivamente Vero, el problema es con las direcciones. Los archivos tienes que meterlos dentro de la carpeta Public para poder conseguir la URL correcta y para que pueda funcionar.
ResponderEliminarSi los tienes en otra carpeta (por ejemplo veo que están dentro de BLOG) entonces mueve la carpeta dentro de Public y luego consigue la URL de cada archivo.
bueno potro. me la paso en tu blogg, la verdad te pasa. tenes muchisimas cosas que sirben y ayudan, aparte de explicarlas bien funcionan y siempre atento a todo...
ResponderEliminaryo tengo una pregunta. tengo un blogg de un juego online. y nesesito saver si hay algo que desde mi blogg me escriban mails directamente a mi correo, existe?? agradeceria tu respuesta. diegacho_007@hotmail.com si queres mandame un mail o yo paso de nuevo por aca..
saludos...
Que escriban el correo desde el blog no pues es un blog y no un cliente de correo pero puedes poner un botón para que al presionarlo pueda abrirse el cliente de correo y puedan escribir el mail:
ResponderEliminarhttp://ciudadblogger.com/2009/10/opcion-de-enviar-mail-con-asunto-y.html
muchas gracias!! si me funciono ahora se ven las imagenes, pero no funciona el efecto de deslizaminento¿tendra que ver con el tipo de plantilla o con el contenido del blog? el menu lo puse en http://huertaspeuhec.blogspot.com/
ResponderEliminarNo veo que tengas puesto el menú aunque sí veo que es una plantilla de las nuevas de Blogger y sé que la mayoría de los menús no funcionan en ellas.
ResponderEliminarNecesito ayuda con mi bloG PARA PODER HACERLO. gRACIAS BESITOS
ResponderEliminarGracios por essta estupenda herramienta :)
ResponderEliminarBelen Sanchez, ¿exactamente qué ayuda necesitas?
ResponderEliminarGuillem, qué bueno que te ha gustado!
hola, lo puse en mi blog, pero solo se ven las imagenes estáticas, es decir, no tiene movimiento al pasar el mouse, y el mismo script lo puse en mi blog de pruebas y si sirve! no se a que se deba, me gustaria que me explicaras como puedo solucionar este problema gracias! http://enrike23.blogspot.com/
ResponderEliminarHola [Enrike23],
ResponderEliminarEso es porque usas jQuery, otro script para crear efectos y no es compatible con el que se usa para este menú.
Saludos.
OOO, Y NO HAY SOLUCIÓN A ESTE PROBLEMA?
ResponderEliminarPues elegir entre usar uno o el otro. Hay un hack que anda por la red para que se puedan utilizar ambas librerías pero yo nunca he tenido éxito y por lo mismo no podría decirte que te funcionará.
ResponderEliminarBuen día amigo auxilio auxilio.....
ResponderEliminarSolo me muestra las imagenes pero sin movimiento..
Saludos y muchas gracias de antemano.
¿En cuál blog?
ResponderEliminarHermano es el siguiente blog: http://posadalagoazul.blogspot.com/
ResponderEliminarEs un blog de pruebas, te agradezco tu
interes por ayudarme. Recuerda que solo se
ven las imagenes (estaticas), sin el efecto
de acordion....Espero su pronta respuesta.
Saludos...
El problema es que en ese blog tienes Prototype y Scriptaculous los cuales no son compatibles con este script (mootools) por lo que no se pueden usar ambos al mismo tiempo.
ResponderEliminarSaludos Potro. Y que tengo que hacer ??? quiero aplicar este menu al blog.
ResponderEliminarPues eliminar el otro script, búscalo como Prototype y Scriptaculous y lo encontrarás, pero toma en cuenta que si lo tienes ahí es porque lo has agregado para algún truco así que el truco con el que lo hayas puesto dejará de funcionar.
ResponderEliminarEsta muy util y funcional tu post, tenes 10... Bendiciones....
ResponderEliminarBuen día Potro, ya funciona perfectamente el menú. Gracias por las aclaratorias. Un millón de gracias. Saludos
ResponderEliminariRojas, qué bueno que te ha gustado :)
ResponderEliminarMiguelsld, excelente, me alegra que ya esté funcionando ;)
lo uso en mi blog pero no se ven las imagenes, están dentro de dropbox pero no se ven, debo tener abierto dropbox para que se vean... ya intente con el codigo ul style="display:none; visibility:hidden;" class="bsm" id="byslidemenu"
ResponderEliminarli class="first" antes del otro codigo pero nada espero respuesta muchas gracias
y lo mismo me pasa con los contenidos FLASH
http://miamatlan.blogspot.com
salu2
Los archivos que subas a Dropbox deben estar dentro de la carpeta Public, sólo de esa forma podrán funcionar en la red.
ResponderEliminarSaludos.
woow eso fue rapido gracias lo intentare sino estare dando lata otra vez jiji salu2 y de nuevo graaacias
ResponderEliminarme gustaria saber como hago para que cuando den click en la fotos del menu deslizante no se vaya para el link de dropox, me gustaria direccionarlo a una parte de mi pagina, hay alguna manera. gracias
ResponderEliminarNo se tiene que ir al enlace de Dropbox, es por eso que en el código hay dos URLs en color rojo que se deben cambiar, una (la primera) es la URL del enlace a la que apuntará, por ejemeplo http://google.com
ResponderEliminarY la segunda es la URL de la imagen del menú, que en tu caso seguramente subiste a Dropbox.
En mi blog se ve bien, pero las imagenes quedan centradas en vez de a tamaño completo, y son de 300x225
ResponderEliminarPues no he entendido bien ya que no están centradas y conservan el tamaño de 300 x 225px
ResponderEliminarYa lo se... mira mi blog http://bachiller-infantes.blogspot.com/
ResponderEliminarYa lo he visto, pero sigo sin entender cuál es el problema, lo veo todo bien.
ResponderEliminarPotro, otra vez yo! ando trabajando en la imagen y suelen haber problemas!
ResponderEliminarMirá mi "menu acordeon": http://comometanfetamina.blogspot.com
Porque me quedo ese espacio en el cuadro? Creo que no esta bien centrada! :S que puedo hacer?
Lo que pasa es que tienes muy pocas imágenes. Puedes editar el archivo .js y donde dice compressSize: 40 cambiarlo por otro valor, ese valor es lo que determina qué tan comprimidas quedan las pestañas.
ResponderEliminarO si te parece más fácil aun, sólo elimina el borde del recuadro para que no se note ese espacio:
ul.bsm{
margin: 0px auto;
border:1px solid #B0B0B0;
Hola Potro, me encanta tu sitio. Abri hace poco un blog y tus diversas aplicaciones me fueron de gran utilidad pero aun soy muy novata en esto de tunearlo. No hay caso de que me salga este menu y veo que soy la unica XD...Las imagenes no me aparecen o directamente el menu no lo hace.Subi los archivos por Dropbox y creeria que hice todos los pasos bien pero no sale tal cual. Esta muy lindo el menu y me gustaria tenerlo. Desde ya gracias...
ResponderEliminarPotro donde se consigue el url de la imagen? que no me sale!Adios muy buena la pagina
ResponderEliminarSweet Muse, necesitaría ver en cuál blog lo has puesto para decirte cuál puede ser el problema.
ResponderEliminarNicole, sube la imagen a cualquier hosting, incluso puedes subirla a Blogger, verás que te da una URL como esta:
http://2.bp.blogspot.com/AAASM/e4yECdXL1HA/s1600/h-musica.jpg
Esa es una URL y así parecida es la que deberás utilizar.
una pregunta como hago para q el menu solo aparezca en una de las paginas de mi blog y en las otras no?? gracias y saludos
ResponderEliminarme refiero a q solo aparezca dentro de una de las páginas estáticas ..
ResponderEliminarMira esta entrada que dice cómo hacer que los gadegts se muestren sólo en la portada, tú harás lo mismo, sólo que en lugar de poner la primera línea en color rojo que se explica en el ejemplo tú deberás poner esta:
ResponderEliminar<b:if cond='data:blog.pageType == "static_page"'>
mil gracias Potro!. ahi aprendi tbn q para q se vea en una pagina especifica tenia q poner la URL de la pagina asi
ResponderEliminarmuy bueno abrazos y saludos!!
Este comentario ha sido eliminado por el autor.
ResponderEliminarHola Potro, logre hacer el menu XD.Elimine algo que no era compatible con el menu. Gracias por responderme :).
ResponderEliminarMi pregunta seria ahora si esta clase de menu se podria icorporar como una entrada en el blog igual.
Gracias...
Si te refieres a poner el menú dentro de una entrada sí, aunque quizá en algunas plantillas no quede muy bien, pero será cuestión de que pruebes qué tal queda en el tuyo.
ResponderEliminarHola Potro, perdón que moleste.
ResponderEliminarSabes por qué me quedan las imágenes fijas?
http://incorporarteatro.blogspot.com/
saludos y gracias miles!
Rodrigo
Hola Potro, perdona que sea molesta otra vez...Me olvide de preguntarte de como haría para ingresarlo a una entrada. Así normalmente como esta el codigo completo uno detras de otro en edición html o tengo que hacer algun tipo de modificacion especial para adecuarlo.Perdona mi ignorancia.Gracias...
ResponderEliminarRodrigo, el hosting donde has subido los archivos no te servirá pues la URL que te da es para descargar los archivos, no para ejecutarlos. Necesitas subirlos a otro como Google Sites o Fileden.
ResponderEliminarSweet Muse, los primeros dos pasos son tal como se explican y esos van en el lugar indicado, sólo el tercer paso es el que cambiaría, el código de ese tercer paso es que el pondrías dentro de la entrada.
Hola, me salio al fin...Me quedo muy bien. Agradezco muchisimo tus contestaciones, ¡¡¡Saludos!!!
ResponderEliminarMe da gusto que ya esté funcionando :)
ResponderEliminarGracias por responder Potro. Te cuento que las imágenes las tengo en Google Sites porque me da la opción "ver" pero con los archivos de extensión .js no me da esa opción. Los subi pero sólo me tira "descargar", es por eso que los subi a este servidor. Sabes por qué no me da la opción en Google Sites de "ver" los .js?
ResponderEliminarAunque no te dé la opción de 'Ver' pon el cursor sobre el link que dice 'Descargar' y dando click con el botón derecho copia la URL del enlace, esa URL es la que necesitas, sólo elimina la parte final del enlace que es algo como esto:
ResponderEliminar?attredirects=0&d=1
exelente tutorial, me gustaria saber como podria aplicarlo en dreamweaver para alguna pagina web cualquiera,si puedes contestarme te lo agredeceria demasiado :D
ResponderEliminareso,saludos!
Pues no manejo Dreamweaver pero en teoría debería ser exactamente el mismo procedimiento para cualquier página Web, sólo que el último código que dice que va dentro de un elemento HTML/Javascript se pondría después de <body>
ResponderEliminarsi mi sidebar es de pequeño como dejo pequeñas las imagenes?
ResponderEliminarEn la parte donde va la URL de la imagen agrega lo que está en negrita:
ResponderEliminar<img src="URL de la imagen" style="width:200px; height:100px;" />
Ahí puedes determinar el tamaño de las imágenes.
ee amigo me puedes explicar bien sobre..cuando tengo que descomprimir el archivo como lo pego o como copio los urls porque cuando los baje eran dos archivos.gracias
ResponderEliminarEsos archivos debes subirlos a un hosting como Google Sites, Filenden, Dropbox, etc. para tener su URL. Esa URL es la que tendrás que poner en el código donde se indica.
ResponderEliminarHola, a mi, al pasar el cursor sobre una imagen, esta se desplaza pero me queda un hueco en blanco a la derecha entre imagen e imagen......tengo sólo 3 imágenes puestas...y debajo de las imágenes me aparece un punto gris...como se quita......alguien sabe la solución....gracias
ResponderEliminarCuando son pocas imágenes usualmente sucede eso. Puedes editar el archivo byslidemenu.js y donde dice compressSize: 50, cámbialo por otro valor, probablemente con uno más bajo tengas los resultados que esperas.
ResponderEliminarPara eliminar los puntos prueba poner en esta parte lo que está en negrita:
ul.bsm{
margin: 0px auto;
border:1px solid #B0B0B0;
list-style-type: none !important;
}
Potro, lo de los puntos perfecto, si cambio compressSize a cualquier valor se siguen viendo los espacios a la derecha...probé con muchos valores y nada..si se te ocurre otra cosa ...!! sino MUCHAS GRACIAS
ResponderEliminarAl poner 5 imágenes me pasa lo mismo..el borde no se queda fijo sino que se agranda todo a lo ancho para que cojan las 5 imágenes.Por debajo del borde me queda un espacio todo alrededor..solo aparece la imagen pegada al borde por el lado derecho...
ResponderEliminargracias men. saludos
ResponderEliminarmccartu, entonces es por la plantilla, arriba de ul.bsm{ agrega esto:
ResponderEliminar.bsm img {padding:0 !important; margin:0 !important;}
Quizá veas un pequeño espacio, pero eso es porque tus imágenes tienen bordes blancos.
Estimadisimo Potro, te agradezco una vez mas tu grandiosa colaboracion con todos nosotros... Adapte este menu a la pagina ke estoy construyendo para mi pequeño negocio de comidas (al ke estas cordialmente invitado si en algun momento visitas Ecuador), la direccion actual es http://lascanastasdeverde.blogspot.com/ , pero como podras observar esteticamente no queda muy bien esta como recortado a la mitad de la pagina y los bordes no son parejos... existe posiblidad de remediar esta situacion? me gustaria que cubra el ancho completo y kizas quitarle los bordes para ke no se vea como cortado. Una vez mas millon gracias y espero que exista una solucion para estos detalles ya que el menu esta increible, suerte y exitos!!!
ResponderEliminarHola Pepe Lynch,
ResponderEliminarQué gusto leerte de nuevo por aquí. Gracias por la invitación, ten por seguro que si un día voy a Ecuador pasaré ahí :)
Esos bordes son de la plantilla, puedes eliminarlos quitando todo lo que hay dentro de:
/* Tabs
----------------------------------------------- */
Para que se extienda más necesitas dos cosas, una, agregar más pestañas, y otra, editar el archivo byslidemenu.js y donde dice compressSize: 40, cambiarlo por otro valor más alto, por ejemplo 80
Con un valor de 80 o 90 y una o dos pestañas más que le agregues al menú quedará a todo el ancho de tu blog.
Saludos y mucha suerte con el negocio.
http://lislianoche.blogspot.com/
ResponderEliminarpor alguna razon a mi no me saliooo :( ayudaaa!
me encanto tu blogger! ^^
Es porque como mencioné, no es compatible con Prototype y Scriptaculous, mismos que tú usas.
ResponderEliminarSaludos.
Hola Potro, muchas gracias por tus trucos, gracias a ti gente que no tenemos ni idea podemos hacer cosas algo aparentes. Tengo un problema con las fotos del menú porque salen desplazadas hacia la derecha y abajo. He probado todas las cosas que le has dicho a otra gente y a modificar el compresssize pero aún así no me va. A ver si tú puedes saber lo que es: http://www.aulaabalar.blogspot.com/
ResponderEliminarMuchas gracias
Hola aulaabalar,
ResponderEliminarEn las plantillas hechas con el Diseñador de plantillas de Blogger siempre hay problemas con los menús pues nunca se ven como deberían.
La única opción que puedo darte es la misma que menciono en el comentario #128, posiblemente te sirva para esa plantilla.
Saludos.
entonces no puedo tener un menú acordeon? :(
ResponderEliminarPues al menos este no, de hecho será complicado mientras uses Scriptaculous ya que hay menús tipo acordeón hechos con jQuery pero ese también es incompatible con Scriptaculous :\
ResponderEliminarPerfecto, ha funcionado. Muchísimas gracias.
ResponderEliminarUn saludo
hola El Potro
ResponderEliminarYo tengo un problema al hacer eso me deja un espacio entre la linea y la imagen haber si ves el problema este es mi blog
http://unionanimem.blogspot.com/
bueno El Potro cureoseando y borrando a la adivinanza lo arregle gracias por el post
ResponderEliminarQué bueno que ya lo has solucionado :)
ResponderEliminarHola, me gustaría saber cómo quitar el sidebar del menú que he puesto, sin quitarlo en si. Me refiero al marco que ahora mismo tiene y me parece muy feo. Pero no encuentro cómo quitarlo en ningún lado.
ResponderEliminarBlog. www.planescaping.blogspot.com
Gracias por adelantado, un saludo.
Lo que sucede es que tu plantilla agrega esos bordes. Puedes quitarlos buscando esta parte en tu plantilla y eliminando lo que está en negrita:
ResponderEliminar.main-inner .widget ul li, .main-inner .widget #ArchiveList ul.flat li {
padding: .5em 15px;
text-indent: 0;
color: #666666;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
Ya lo he hecho y está perfecto. Muchísimas gracias. He aprendido mucho con los trucos de tu blog; agradezco además el haberme respondido tan rápido.
ResponderEliminarUn saludo.
Un placer haberte podido ayudar :)
ResponderEliminarHola POTRO, segui todos los pasos pero no veo resultado :( me podrias decir que sucede, porque yo quiero hacer un menu con 7 imagenes de 246px × 27px, gracias
ResponderEliminarhttp://radiofh.blogspot.com/
Podría ser porque tienes el archivo de mootools 3 veces.
ResponderEliminary que tengo q hacer??? donde se encuentran los 2 q estan de mas, Gracias saludos
ResponderEliminarBúscalos en tu plantilla, usa las teclas CTRL+F para encontrar los que se llaman Mootools. Ignoro para qué trucos los hayas puesto.
ResponderEliminarBueno, he tratado de hacer un menú nuevo, con imágenes algo más pequeñas, pero parece ser que estas no se centran. Antes las mías eran de 200 px, pero ahora las hice de 150. ¿Sabes a qué se debe y si se puede arreglar?
ResponderEliminarEl blog: www.planescaping.blogspot.com
ResponderEliminarMuchas gracias por tus tutoriales, estoy empezando a administrar un blog(blogspot) y esto me ayudará a personalizarlo como yo quiero^^..sin embargo, tengo una duda. En muchos de tu tutos, indicas que vayamos aquí ->Diseño | Elementos de la página | Añadir un gadget | HTML/Javascript, pero la entrada al HTML, por aquí, no la encuentro, me podrías decir dónde está específicamente. Lo agradecería, así pudiera utilizar muchos de tus manuales.
ResponderEliminarFeliz Navidad!^^
Ya lo he solucionado, ¡gracias!
ResponderEliminarForo Laruku, pues ahí donde se indica lo puedes encontrar, cuando haces click en Añadir un gadget se abrirá una ventana, sólo fijate que en esa ventana del lado izquierdo diga 'Básico' y del lado derecho podrás localizar el elemento que se llama HTML/Javascript.
ResponderEliminarhola me encanto esta entrada, solo tengo una duda se pueden poner mas de un menu, ya lo intente pero solo con uno funsiona el otro se desconfigura X.x
ResponderEliminarNo estoy seguro pues nunca lo he hecho pero podrías editar el script byslidemenu.js, buscar ahí en el script esto y agregar lo que está en negrita:
ResponderEliminarthis.containerId = $pick(containerId, 'byslidemenu', byslidemenu2);
Luego en el elemento HTML/Javascript donde agregues el otro menú cambia donde dice:
<ul class="bsm" id="byslidemenu">
Por:
<ul class="bsm" id="byslidemenu2">
no funsiona u.u
ResponderEliminarEntonces quizá no es posible usar 2 al mismo tiempo :\
ResponderEliminarami no me funciona T_T mira www.distritourbano.net
ResponderEliminarEs porque usas jQuery, y ese script no es compatible con Mootools que es el que se usa para este menú.
ResponderEliminarPOTRO SOY NUEVO EN ESTO. COMO PUEDO PONERLE MAS IMAGENES AL ACORDEON? TRAE SOLO 5 Y LO NECESITO CON 8
ResponderEliminarEn el código que has agregado en el elemento HTML/Javascript agrega antes de </ul> una línea como esta por cada imagen extra que quieras añadir:
ResponderEliminar<li><a href="URL del enlace"><img src="URL de la imagen" /></a></li>
hay alguna forma de yo cambiar el jquery en que lugar esta eso?
ResponderEliminarPues podrías quitar el script de jQuery, el problema es que lo estás usando para algunos otros trucos y si lo quitas esos trucos o gadgets dejarán de funcionar.
ResponderEliminarHola, queria consultarte, porque puse el menu en mi blog, y me salio bien, pero me queda como si fuese un recuadro, no se como sacarlo, probe un par de cosas que aconsejaste arriba, pero nada, si me podes ayudar te lo agradeceria. Gracias.
ResponderEliminarya esta, ya lo pudo arreglar. gracias!
ResponderEliminarexcelentes consejos, me quedo atento a tu blog.
Me alegro que ya lo hayas resuelto :)
ResponderEliminara mi no me funciona e hice todo al pie de la letra...
ResponderEliminarSin saber la dirección de tu blog no puedo saber cuál es el problema.
ResponderEliminarHola Potro, yo estoy haciendo un blog nuevo:
ResponderEliminarhttp://bazar-indefensos-peludos.blogspot.com/
Estoy haciendo pruebas y he intentado poner éste menú, pero no se me desplazan las imágenes.
He buscado en mi plantilla alguna de las librerías que mencionas como incompatibles pero no encuentro ninguna...
¿Qué me recomiendas?
Hola IndefenS.O.S Peludos,
ResponderEliminarRecuerda el primer paso que es descargar el archivo que se menciona, descomprimirlo y subir su contenido a un hosting como Google Sites o Dropbox.
Luego, donde dice URL del archivo debes poner la URL del archivo que previamente subiste al hosting.
Saludos.
Hola, soy IndefenS.O.S Peludos otra vez...
ResponderEliminarLo que me comentas Potro lo he hecho, de hecho lo tengo en Google Sites.
He seguido todos y cada uno de los pasos pero veo que no se me desplazan las imágenes. Leyendo los comentarios que le has hecho a la gente en situaciones similares he seguido tus consejos, pero nada.
De hecho, ni siquiera sé si tengo alguna de las librerias de JQuery, o las otras que son incompatibles, pero no sé si he buscado bien. He buscado en la plantilla de mi blog, es decir en la sección HTML de diseño, pero nada, sigo igual....
En tu código sigue igual que como lo tengo en la entrada, es decir, aún no has cambiado las URLs del primer código.
ResponderEliminarSi te fijas en tu plantilla verás que aun tienes esto:
URL del archivo mootools-core.js
URL del archivo byslidemenu.js
Eso es lo que debes cambiar por las URLs de los archivos que subiste a Google Sites.
Hola Potro, otra ves la de IndefenS.O.S Peludos...
ResponderEliminarPrimero que nada muchas gracias por tu atención y tu tiempo.
Después comentarte que eso ya lo había hecho pero por alguna extraña razón se me ha cambiado solo!!!
La cuestión es que he vuelto a poner las URLs del sitio donde tengo las librerías y seguimos en las mismas...
Ains!
Veo que te ha hecho falta esta parte en el gadget donde has puesto el menú:
ResponderEliminar<ul style="display:none; visibility:hidden;" class="bsm" id="byslidemenu">
<li></li></ul>
Quizá es por eso que no se muestra.
Hola Potro, muchas gracias, eso lo quité porque la verdad es que me extrañaba mucho, pensé que era un error, no entiendo muy bien para qué está ese trozo de código, ya que si te das cuenta en la versión horizontal no es necesario ponerlo. Además parece ser una simple lista vacía con su inicio ul y su fin /ul, no sé, me suena raro, pero aún así lo he puesto otra vez siguiendo tu consejo, y seguimos igual.
ResponderEliminarLo que si veo es que le añade unas huellas de perro al lado de cada foto, y es que supongo que es por la plantilla que define para la sidebar que los items de las listas empiezan por esa huella...
En fin... que parece que se me resiste...
Ya sale!!! jejeje
ResponderEliminargracias!!!!
Tuve que esperar a que cargara!
Mil gracias potro era eso..
A ver si me entero bien de para qué sirve cada cosa...
Ese pedazo de código aunque parece no ser indispensable sí lo es pues desde ahí se llama al script para que reconozca los estilos y pueda aplicar el efecto, es por eso que se ha puesto ;)
ResponderEliminarBuenas, he intentado poner este menú en mi blog pero no consigo que quede horizontal como debería, y mucho menos que se muevan las pestañas..
ResponderEliminarLas imágenes son en JPG de 330x225 pixels y subidas a la carpeta PUBLIC de dropbox.
He hecho todo según se dice pero no consigo mejorarlo de ahí...
Aquí puedes ver el resultado tan penoso en el que he dejado el blog:
www.bionic.tk o www.bionic-spain.blogspot.com
Gracias de antemano y muy buen blog, estoy atento siempre y mirando tutoriales para intentar mejorar el mío poco a poco.
Hola Bionic,
ResponderEliminarRevisa el código que está dentro del HTML/Javascript, si te fijas el cierre </ul> debe ir justo al final de todo y tú lo has puesto en medio.
hola , no puedo descargar el archivo con los URLs por lo que queria saber si no me los podrias pasar como comentario
ResponderEliminarmuchas gracias
Gracias, ya lo cambié y sigue igual...no sé si es por el tamaño de las imágenes o por qué...me recomiendas borrar todo y empezar de nuevo?
ResponderEliminarGracias de nuevo
Camila Aleida Rocha, son demasiado largos para que quepan en un comentario, prueba de nuevo que el enlace lo acabo de probar y está funcionando bien.
ResponderEliminarBionic, pues puedes intentar de nuevo o hacerlo en otro blog que tenga una plantilla que NO sea hecha con el Diseñador de plantillas pues me temo que el problema podría ser el tipo de plantilla que usas.
Y eso de la plantilla cómo puedo quitarla de mi blog? es que quiero empezar a personalizar más mi blog e ir mejorándolo: la cabecera que le hice que queda muy cutre, ponerle los botones del menú, más opciones y eso...
ResponderEliminarLa verdad que aprendo bastante en este blog, pero como no entiendo demasiado pues me cuesta un poco...
Gracias de nuevo, gran curro.
Pues la plantilla Mínima de Blogger es la más moldeable para personalizar. Para instalarla entra en Diseño > Edición de HTML y hasta abajo dice 'Plantillas de diseño (lanzado en 2006)' haz click ahí y elige la Mínima.
ResponderEliminarA partir de ahí puedes ir personalizando la plantilla poco a poco; la apariencia es muy simple pero con ella tendrás menos problemas para irle metiendo más cosas.
He cambiado a la plantilla Mínima y he puesto todo de nuevo, pero nada..lo he puesto en la barra lateral para que al menos no me descuadre tanto, pero ni se mueven ni nada.
ResponderEliminarHace falta que sean al menos 5 o 6? o puedo poner solo 3? No sé qué hago mal, soy un negado XD gracias de nuevo!
En el primer código te ha faltado agregar la URL del archivo byslidemenu.js
ResponderEliminarSólo has agregado la URL del archivo mootools-core.js
Muchas gracias de nuevo El Potro, al final opté por una plantilla a la que con un gadget le he podido poner un menú y ya de paso renovar todo el blog. Me gusta mucho más ahora que antes.
ResponderEliminarDe verdad, gracias por tu interés y dedicación (tiempo y esfuerzo), pero con este menú mismamente me va bien de momento, si veo que quiero ir a más volveré a intentar poner este:)
Un saludo y tienes un seguidor más!
Vale, lo importante es que el blog esté como a ti te gusta :)
ResponderEliminarPotro, otra vez vengo a molestar XP.
ResponderEliminarHe probado el script. Me funciona en mi PC con Firefox, pero al parecer no funciona en otras PCs y tampoco en mi PC en IE. En IE me sale un mensaje de error:
Detalles de error de página web
Mensaje: El objeto no acepta esta propiedad o método
Línea: 2065
Carácter: 1
Código: 0
URI: http://lasscanlations.blogspot.com/
¿Qué podrá ser?
Saludos.
Probablemente en esas PCs no tienes instalada la última versión oficial de Internet Explorer que es la 8.
ResponderEliminarHola Potro... coloque este menú pero aunque le puse el código para la imagen vertical las imágenes se ven horizontales...
ResponderEliminarno se que paso... gracias y saludos
www.artedigitalmcy.blogspot.com
Hola artedigital,
ResponderEliminarDebes modificar las imágenes para que el texto no aparezca a un costado sino arriba para que de este modo el texto de la imagen se aprecie de forma vertical.
Cuando se pone el texto de la imagen a un costado es para usarla en modo horizontal.
Saludos.
Hola potro. El menu que pretendo esta explicado en este blog: http://www.madeincima.eu/blog/jquery-plugin-easy-accordion/
ResponderEliminarPero es muy complicado para mi. Tendrías la amabilidad de ver como simplificarlo para los brutos como yo?
Te agradezco
Hola anibal,
ResponderEliminarHay un par de menús muy parecidos igual con jQuery que explican en Vagabundia que quizá te puedan interesar:
http://vagabundia.blogspot.com/2008/06/un-acorden-horizontal-en-slo-unas-lneas.html
http://vagabundia.blogspot.com/2011/02/acordeones-simples-con-jquery.html
Hey loco, que buena onda!!! gracias por el aporte,
ResponderEliminarIgual sigo fiel a ciudad blogger
Hola, está genial este menú, pero ¿podrías decirme algún otro menú parecido a este? con efecto deslizante y eso..
ResponderEliminarGracias.
Hola potro, tengo un problema con este blog http://erikalarb.blogspot.com/
ResponderEliminarhe incertado todo m salen las imagenes pero no el efecto de deslizamiento quisiera saber a q se debe el problema t agredeceria vastante
David, mira el comentario #192.
ResponderEliminarERIK, no funciona porque como mencioné al inicio de la entrada, requiere Mootools el cual no es compatible con la mayoría de las librerías de efectos como jQuery, Prototype o Scriptaculous y tú usas estos dos últimos, justamente para el menú deslizante que está del lado derecho.
Gracias Potro por el aporte, y hay alguna forma de modificar para mootools y/o colocar otro menu deslizante con imagenes xq el menu que he incertado no tiene imagenes, disculpa por las molestias, y viendo que eres un AZ en esto tengo una duda sobre adsense ya que he llenado todos los requisitos y seguido los pasos y no se apertura los vinculos de adsense, sera porque cuando m dan un codigo dice q tengo q pegar en la pagina q desee, no entiendo esa parte o mejor dicho no se como hacerlo m gustaria que me expliques gracias
ResponderEliminarModificarse no se puede, y para que trabaje con Scriptaculous lo veo más difícil aun. Será más sencillo que encuentres uno basado en jQuery, pero ese también es incompatible con Scriptaculous.
ResponderEliminarSi ya creaste tu anuncio de Adsense prueba primero pegar el código dentro de un elemento HTML/Javascript. Al cabo de 10 mins. verifica si ya se ve en el blog.
man esta bien xvr tu blog gracias pero no sale el menu horizontal porque sale como vertical osea para abajo todo ps ayudame q haGo
ResponderEliminar¿Y en cuál blog lo has puesto...?
ResponderEliminar