Este truco les dará movimiento a tus links estilo marquesina, y hará que el link se detenga cuando el mouse pasa sobre él. Lo haremos de dos formas, una con links de texto y otra con imágenes.
Para los links de texto el código es el siguiente:<marquee direction="up" style="text-align: center; width:200px;height:150px;border:1px solid #ccc;padding:3px" onmouseover="this.scrollAmount='0'" scrollamount="1" onmouseout="this.scrollAmount='2'">
<a href="URL del enlace 1">Nombre del enlace 1</a><br/>
<a href="URL del enlace 2">Nombre del enlace 2</a><br/>
<a href="URL del enlace 3">Nombre del enlace 3</a>
</marquee>
Para los links con imágenes el código es el siguiente:
<marquee direction="up" style="text-align: center; width:200px;height:150px;border:1px solid #ccc;padding:3px" onmouseover="this.scrollAmount='0'" scrollamount="1" onmouseout="this.scrollAmount='2'">
<a href="URL del enlace 1"><img src="URL de la imagen 1"/></a><br/>
<a href="URL del enlace 2"><img src="URL de la imagen 2"/></a><br/>
<a href="URL del enlace 3"><img src="URL de la imagen 3"/></a>
</marquee>
Personalización:
Debes cambiar los datos en color rojo por los tuyos.
<marquee direction="up" es la dirección a donde se mueve, up arriba, down abajo, right derecha, left izquierda.
width:200px;height:150px; es el tamaño del cuadro donde aparecen los links
border:1px solid #ccc; es el ancho y color del borde.
scrollamount="1" es la velocidad con la que se mueven los links, números más altos dará mayor velocidad.
El resultado es este:
Enlaza este blog
Suscribirse al feed
Suscribirse por e-mail
Agregar en tu iGoogle
Seguir en Twitter
Unirse en Facebook
Enviar un correo
Iconos RSS.PNG)
Música JPZ
53 comentarios:
Puedo hacer esto con los banner de los directorios?. O esos no se pueden modificar :S
¿Te refieres al directorio que tienes en tu web?
Claro, usa el segundo código, cambia sólo las URLs que corresponden.
Saludos.
Ok, voy a intentarlo. Gracias
Hola, sigo agradeciendole enormemente su ayuda y amabilidad por compartir sus conocimientos. Los recursos que aparecen en este blog me parecen muy interesantes, pero si me lo permite quiero hacerle un comentario para mejorar el contenido de su blog.Aun no he podido aplicar algunos recursos todavia, pues aunque nos brinda los codigos para copiar, no se en que lugar del codigo html pegarlos. Por ejemplo quise aplicar el de Links y banners en movimiento pero en las instrucciones no se especifica donde colocar el codigo. COn respecto a este mismo recurso no comprendo lo de url del enlace y url de la imagen.
Otra cuestion. Sabe usted como utilizar el gadget de presentacion en slide de Blogger? Hay alguna manera de subir fotos pero desde la computadora y no utilizando una url?
Por favor no sienta que soy muy pedigueño, solo le hago sugerencias para mejorar su página. Hasta luego y gracias.
Hola Walter,
Gracias por tus comentarios y por tus sugerencias.
Disculpa si no he sido más claro, el código de los links en movimiento lo puedes poner en una entrada (post) o en un elemento HTML/Javascript, es decir, donde quieras que aparezcan.
La URL del enlace es la dirección a la que enlaza, por ejemplo: http://tublog.blogspot.com/
Y la URL de la imagen es la dirección donde se encuentra alojada la imagen, por ejemplo:
http://dl.getdropbox.com/u/647003/banner-220x80.PNG
Si tienes alguna duda me comentas.
Saludos.
Lo olvidaba...
Para subir fotos desde tu computadora y obtener una URL puedes usar un servicio de alojamiento gratuito.
Hay muchos muy buenos, entre ellos Imageshak.us y Photobucket.com
Saludos.
¿Se puede hacer algo para que no se vea el borde? De fondo tengo una foto, por lo cual no hay color que lo haga invisible...
Hola Sebastián,
En donde dice border:1px cámbialo por border:0px
Saludos.
Muy bueno. El problema ahora, es que ayer puse el nuevo explorer, el 8. Y ahora la imagen se mueve, pero cuando llega arriba la imagen, se corta y vuelve a salir.... Osea, no pasa toda la imagen... Esto solo me pasa con el explorer. ¿se podrá hacer algo?
Hola Sebastian,
Lo siento, pero Internet Explorer tiene problemas con todo, no sólo para los links. Pero eso ya es problema del navegador.
Saludos.
hola potro,tengo un problemita tengo una plantilla que tiene para poner un barnner en la cabecera pero no se como puedo ponerlo, aber si tú me puedes ayudar .
gracias
Hola EDUARDO,
En Diseño > Edición de HTML busca esta dirección: http://3.bp.blogspot.com/_kMUpUqMmduA/SVVA2EWPoQI/AAAAAAAAA7Q/uV4lqj5hIdk/s1600/468x60.gif
Y cámbiala por la URL de la imagen que vayas a poner.
Si sólo quieres quitar el banner elimina desde <div class='headerright'> hasta </div>
Saludos.
gracias, potro haora sí e podido te agradesco mucho.
gracias.
Gracias a ti EDUARDO,
Saludos.
una duda, utilizo este codigo para que la gente vea las portadas de mis discos les den a la imagen y los rediriga a donde esta esos cds ok. bueno aqui mi problema cuando inserto la imagen de la portada del cd me sale a tamaño gigante y quisiera saber que codigo html tendria que poner para que las imagenes salieran a la misma dimension del cuadrado del banner?
Saludos
Hola AbeL VRoS,
Usa este código:
<a href="URL del enlace"><img width="200" src="URL de la imagen" height="200"/></a>
Sólo cambia los valores de width (ancho) y height (alto) por las medidas que quieras que tenga la imagen.
Saludos.
gracias por ser tan rapido por cierto em gustaria hablar contigo sobre mi blog yy saber me podrias ayudar a modificar una cosa de mi plantilla si no te importa.
Saludos blog es
http://musicaparatusoidoserabelito.blogspot.com/
y mi correo es abel_vros@hotmail.es
habe si tu me puedes ayudar
Tambien hice este, Potro!! :D
Quedó bárbaro !!!
Date una vuelta por el blog, y ves como me quedaron todas las cosas que aprendí en tu blog ;)
Gracias, gracias, gracias =)
Genio !!
Besotes
Hola Maria Rosa,
Me da gusto que estés aplicando los trucos de aquí para tu blog, cada vez se me más lindo =)
Besos!
Potro: El Blog está quedando de película =)
También hice el SiteMap, con tu truquito, y lo agregué arriba de todo, con una imagen + el link. ¡Muy bueno es!
Cambié la apariencia de la suscripción al feed, de FeedBurner (siguiendo tus indicaciones) No me salió la de la imagen, la subí a imageshack, pero al intentar con el código no me salió, varias veces no me salió, y desistí, puse el de color, buscando tonos de azules.
Además de hacer muchos trucos tuyos, entre tantas idas y vueltas encontré un sitio para editar imágenes gratuitamente, y te juro que no me acuerdo de donde saqué el link ¿sería de acá? Bueno, por las dudas te paso el dato para que mires: http://www.phixr.es/
www.phixr.es
Tiene muchísimas posibilidades de hacer cosas (para los que no tenemos Picasa de Google, ni programitas especiales en nuestras compus) Esto es ideal. Yo que tengo una PC del año de .... ¡¡¡Colón la trajo en "La Pinta" !!!! Por eso uso cosas online.
Bueno, la verdad: hice de todo!! Y todo gracias a vos. =)
GRACIAS TOTALES !!!!!!!!!!
Un abrazo enorme !!!
Jajajaja, entonces es una computadora completamente épica.
No conocía ese sitio para editar imágenes, me pareció fantástico, a ver si después hago un post para hablar de ello pues hay mucha gente que necesita editar fotos y tampoco cuenta con programas de diseño.
Gracias por el tip ;)
Saludos!
Hola Potro.
No me había fijado en éste post, y es bastante bueno. Es adaptable a links, banners, enlaces varios, etc.
Incluso lo he agregado al mío para ver que tal (Link a los post respectivos).
Quedo bastante aceptable, además facilita un poco el acceso a las entradas por "imagen".
Lo único que quisiera que me expliques son 2 cosas (si se pueden hacer, claro):
1.- Se puede disminuir el tamaño de las imagenes? (al parecer quedan por defecto en 125x125).
2.- Al terminar la secuencia de imagenes, ¿podría pegarse de inmediato la primera imagen respecto a la última?, sin dejar pasar hasta el final del recorrido (width).
Eso.
Saludos.
Jpz.-
Dále una mirada al blog. Está en el footer.
Saludos.
Jpz.-
Ahhhhh sisisisisisisisisi
Mi CPU vino con don Cristobal y desde entonces que hago lo que puedo :P
Ya me acordé de donde saqué la dirección (Mira como estoy !! Con todas las luces!! Tengo como 20 GB de RAM !!! jajajaja)
Porque en el blog de los chicos de La Trucoteca La Trucoteca de blogs La de Germán y Javier, ví esta entrada: WigFlip: Generador de herramientas y efectos online para tu blog
Y publicaron sobre este editor de imágenes Editor de Imagenes online
Me resultó tan lindo, sobre todo este de las imágenes: Automotivador
Y como me gustó esa idea de editar online, con la posibilidad directa de bajarlo a tu compu, o imprimirlo, o llevarlo directamente hasta imageshack para subirlo .... entonces pensé ¿Habrá otros editores de imagenes online?
Puse en google y el primero que me salió (en respuestas Yahoo) fué ese: www.phixr.es
Y así fué el recorrido de la historia y como conseguí ese generador de imágenes online y en español !!!! :P
----------------
Ahora una pregunta que no tiene nada que ver con estos comentarios.
Yo coloqué en mi blog para ver el trafico del blog (entre miles de chiribolos y artilugios) un chiche que está lindo, el de FeedJit. Ahora no se que le pasa que cada vez que pico en mi blog no lo veo, y si entro a cualquier blog que si lo tiene lo veo perfectamente (lo cual verifica eso que no es mi navegador obsoleto que tengo explore 6 buaaaaaa si, ya se que es viejo, pero imposible tener el 8 o firefox con este cacharro)
Por lo tanto, como no se ve el mío, o no veo el mío, intenté copiarlo nuevamente de mil formas diferentes, desde la pág. directamente, agregándoles otros productos de ellos, quitándole otros productos de ellos (grrrrr) ¡¡Y no hay forma!!
¿Alguna sugerencia del gurú blogger? O sea: vos :P
Hola Jpz,
Tú sí que sabes sacarle provecho a los códigos, me encantó cómo se ve.
El tamaño de las imágenes lo puedes modificar agregando después de img esto: width="100" height="100"
Lo otro que mencionas creo que no se puede, la etiqueta marquee no tiene esa opción de atributo.
Saludos.
Hola Maria Rosa,
Creo que un teléfono celular tiene más memoria en RAM que tu ordenador, jajaja.
Qué increíble eso de los editores, cuando abrimos un blog sólo queremos escribir y ya, no estamos obligados a saber de diseño (aunque saber es de mucha ayuda), así que estas herramientas online nos vienen de maravilla, pues no sólo son sencillas sino que no hay necesidad de instalar nada!
Gracias nuevamente por el tip.
Lo olvidaba, el gadget sí se ve, quizá sea tu navegador que no soporta el script de ese gadget pero yo lo he visualizado perfectamente.
De cualquier forma veo que tienes cinco gadgets de contadores distintos lo cual hace que la página se cargue más lento, sería recomendable que te quedaras sólo con uno.
Saludos!
Aaaajajajajjajajajajajajja!!
Y eso que te puse los 20 GB de RAM eran mios, de mi escaza materia gris, :P por la rapidez para acordarme de donde saqué el tip, mi PC de RAM, en la realidad mas pura y verdadera tiene 128 MB (sin comentarios) ... es para llorar realmente.
1) Dime si puedo hacer algo con respecto al FeedJit que no se ve. ¿Utilizará algo en común con otro artilugio y yo no tengo idea? Por eso no funciona bien? No lo veo en mi blog y en otros blogs que si lo tienen lo veo perfectamente
2) y otra pregunta, en que parte de tu blog explicas algo referido por ejemplo a tener una estadística de mi blog (no sé hacerlo) uno que diga: "este blog tiene "X" dias, "X" post, o bien que diga: mi blog tiene "X" dias, y eso se actualice solo
(si es que se puede hacer)
Gracias por todo, Potro !!!!!!
T por la paciencia conmigo :S
Recien veo tu respuesta ;)
Ahora me fijo que elimino asi se hace mas liviana la pagina.
Graciaaaaaaaaas !!
Grande Potro!.
Gracias por tus datos acertados.
Me considero un "Ciudadano" más.
Gracias nuevamente por tus trucos, datos y disposición con nosotros... "Los Ciudadanos".
Saludos.
Jpz.-
Maria Rosa, en este enlace puedes ver cómo se hace el gadget de las estadísticas del blog (#de entradas y de comentarios):
http://ciudadblogger.com/2009/09/gadget-de-estadisticas-del-blog.html
Jpz, qué bueno que te sientas a gusto en este blog, ya sabes que en lo que pueda trataré de ayudarlos. Saludos!
que tal potro, oye si las imagenes quiero que salgan una tras otra pero de izquierda a derecha en la misma linea
me podrias ayudar
Hola Abraham Gomez,
Al inicio del código dice direction="up" cámbialo por direction="right" y listo.
Saludos.
Hola Potro..es la primera vez q' entro aquí..la verdad es q' soy un poco torpe con el funcionamiento de estos garabatos..quiero saber si es posible poner un banner en movimiento junto con la firma en un foro?? lo he intentado pero no me sale
saludos
Hola! La verdad es que tengo que felicitar al autor de Ciudad Blogger por su excelente dedicación a cultivar mentes que buscan embellecer sus blogs y demás cosas relacionadas con el mundo de la internet. Felicidades Potro.
En relación a los banners en movimiento, me gustaría saber si existe alguna manera de modificar el rectángulo por alguna otra figura o un marco más bonito. Se puede?
Saludos =)
Hola keanu_buggui,
Las imágenes en movimiento que se usan para las firmas de los foros están hechas en formato GIF.
No es un ´codigo especial que los mueve, es mas bien el formato en el que están hechas.
Necesitas algún programa de diseño que permita hacer imágenes GIF.
Saludos.
Hola Mónica,
Muchas gracias por tus palabras, es un placer poder compartir lo poco que sé.
El marco lo puedes modificar por otro estilo y color, busca donde dice border:1px solid #ccc; y cambia el 1 por 3 luego donde dice solid puedes cambiarlo por una de estas palabras: dotted, dashed, groove, double, inset o ridge.
Y por último donde dice #ccc cambialo por el código del color que sea de tu agrado.
Saludos!
Muchas gracias Potro.
Por nada sabrinna.
Saludos.
Hola Potro muy bueno tu Bogger.
Pregunta, en el 1º URL puse el enlace y la imagen, en el 2º URL, puse otro enlace y otra ymagen y lo mismo en la tercera. al momento de ver el blog solo aparese la primera, Cual es el error mio o el inconveniente q tengo q solucionar para que vallan pasando las imagenes una detras de la otra.-
Saludos y gracias
Seguro no estás poniendo bien las otras URLs de las imágenes, revisa que estén bien.
Saludos.
Potro cambie de posiciones las URL para ver si hay un error y me sigue saliendo siempre la primera foto sola y la segunda no aparece, la URL estan bien.-
Saludos
Parece que el código no funciona bien cuando la dirección de movimiento se pone a la izquierda (left), cámbialo a down y verás que funciona.
Saludos.
Potro hola...gracias por tener este espacio en la web tan necesario...te admiro mucho por lo que sabes....te queria preguntar algo en la cabecera de mi página tengo el logo o se podria decir banner...no se....que identifica mi sitio...no se si depronto me puedas guiar en como hacer que el logo se mueva..que quede como animado...o si es posible el banner completo ...que pueda como rotar...te agradezco mucho...seria como algo en flash o no se tuque sabes mas me diras ....esta es mi página para que mires lo que tengo en la cabecera...http://www.angularestereo972fm.blogspot.com
Hola Angular Estereo 97.2 FM,
Muchas gracias por tus comentarios, aunque no sé si merezca esa admiración, no creo saber mucho, pero sí me gusta compartir lo poco que sé.
La animación se puede hacer de dos formas, en formato de imagen .GIF en el cual necesitarías algún programa de diseño, o bien, en formato .SWF con el que necesitarías flash, esta última opción me parece más adecuada por la calidad que puedes darle a tu logotipo.
De diseño en flash no sé nada, pero en Trucos Flash puedes pedir orientación y seguro te podrán guiar en la elaboración de tu logotipo animado.
El dueño de ese blog es lector de este sitio así que estoy seguro que él estará dispuesto a ayudarte.
Saludos.
Genial me sirvio de mucho excelente
Qué gusto que te ha sido útil :)
Potro! ya no se mueven! :S
Has de haber modificado algo.
hola potro, muchas gracias por toda tu ayuda
solo te queria avisar que yo estaba viendo tu blog con el google chrome y ni el texto ni las imagenes se detienen cuando pones el cursor sobre ellos y lo vi en el firefox pero ahi si se detiene, no se si solo sea en mi navegador.
No es tu navegador, en Chrome no se detiene ;)
a ok muchas gracias :D....que rapidez para contestar¡¡
hey esta muy bien los codigo
Publicar un comentario en la entrada
Gracias por tus comentarios. Si tienes una consulta sobre tu blog deja la dirección del mismo.