Pues bien, aquí va la explicación:
1. Vamos a Diseño > Elementos de la página y allí Añadir un gadget > Nuevo HTML / Javascript
<marquee direction="up" scrollAmount="1" style="text-align: center; width:150px;height:150px;border:1px solid #000000;padding:3px" onMouseover="this.scrollAmount='0'" onMouseout="this.scrollAmount='2'">3. Personalizamos el código
<a href="URL DEL 1er ENLACE" title="TÍTULO1"><img src="URL DE LA 1ª IMAGEN"/></a> <br>
<a href="URL DEL 2º ENLACE" title="TÍTULO2"><img src="URL DE LA 2ª IMAGEN"/></a> </marquee>
Cambiamos URL del 1er y del 2º Enlace por la dirección a la que llevará cada imagen al pinchar sobre ella, y URL de la 1ª y 2ª imagen por los banners o logotipos correspondientes que hayamos alojado en Picasa, PicCoodle, Imageshack, Photobucket... y que dirigiran al enlace que hayas puesto.
También podemos cambiar TÍTULO 1, 2... por el título que queramos, por ejemplo el del blog al que se enlace.
Y otra cosa; con el código que tenéis, podéis añadir tan solo 2 imágenes con enlaces, asi que si quieres poner muchos más banners (logotipos), tan solo tienes que pegar de nuevo la línea:
<a href="URL DEL ENLACE X" title="TÍTULO X"><img src="URL DE LA IMAGEN X"/></a>
Y repetirla tantas veces como hagan falta (y cambiando la URL del enlace y la imagen, y el TÍTULO)
También podemos personalizar otras propiedades:
- marquee direction: Hacia donde se moverán las imágenes; up (arriba), down (abajo), right (a la derecha) y left (a la izquierda)
- scrollAmount: Velocidad a la que se moverán las imágenes. Cuanto mayor sea el número, mayor será la velocidad, aunque el 1 está bien.
- text-align: Posición de las imágenes, centrados (center), a la derecha (right), a la izquierda (left).
- width: Ancho de la caja.
- height: Alto de la caja.
- border: Grosor del borde de la tabla.
- #000000: Color del borde en códigos hexadecimales, en este caso, blanco. Puedes ver códigos de colores aqui.
Finalmente, guardamos cambios y ya podemos ver como ha quedado.
Visitas y estadísticas
Este blog está desde el 23 de Agosto de 2009 oficialmente como La Trucoteca, aunque fué creado el 3 de Junio.
Trucotequeros: Javier y Germán Medina
Localización: Archena, Murcia (España)
19 comentarios:
Buenas. La verdad que he llegado a este blog a través de la búsqueda de google, sobre el tema de banners y me ha servido de mucho, sobre todo por mi nulo conocimiento en lenguaje HTML. Mi duda es la siguiente. Con este código, las imágenes que vamos añadiendo se colocan una debajo de la anterior. ¿Como sería para que se colocasen una junto a la otra y que al desplazarse se viesen en linea?
Es para usarlo en un banner en nuestro blog del que te pongo la dirección.
Muchísimas gracias de antemano y enhorabuena por el blog, es muy útil.
Hola Antonio!
Bienvenido al blog ;)
Bueno, no sabemos exactamente a lo que te refieres con "en línea", pero si lo que quieres es que los banners se muevan horizontalmente en vez de verticalmente, lo que tienes que cambiar es <marquee direction="up"
por <marquee direction="right"
Espero que hayamos resuelto tu duda, y , si no, solamente tienes que dejarnos un comentario para especificarnos si es necesario, algo más.
¡¡¡¡Saludos!!!!
Gracias mi gente de latruc.....
No saben el grandioso favor que ustedes me han dado por encontrar estos tutoriales que tanto habia buscado en Google y no satisfacian lo que queria, gracias a ustedes los encontre.
Un saludo cordial desde Rep. Dominicana.
Hola Julio!
Bienvenido al blog ;) , nos alegra que te haya servido de utilidad :)
Por cierto, gracias por seguirnos :D
¡Nos vemos!
Buenas¡¡¡ Gracias por la respuesta, Efectivamente lo que quería decir es movimiento horizontal. El problema que me surge, es que la imágenes se introducen una debajo de otras aunque se desplazan horizontalmente. ¿Es posible que además del desplazamiento horizontal, las imágenes salgan una tras otra y no debajo de la anterior? (o estoy haciendo algo mal)
Solo me queda darte las gracias por tu tiempo y la enhorabuena. A medida que vas leyendo el blog te engancha más¡¡¡¡¡
Saludos
Antonio
Prueba a reducir el número que indica el alto de la caja contenedora de los banners (despues de height:), a un tamaño que se ajuste bien :)
Aún asi, no entendemos muy bien el problema o como puede pasar, por favor, si nos das la dirección de tu blog para poder verlo, te lo agradeceríamos mucho ;)
¡Muchos saludos!
Buenas de nuevo.
Por supuesto, Es un blog de un club de scalextric http://tobejarslot.blogspot.com/
Enredando un poco (que es como se aprende), me he fijado que al final de el primer código de imagen hay un br (entre<>).
Al poner en "mi blog" mas imágenes, me di cuenta que las nuevas no lo colocaba y la imagen salina una detrás de otra de Izqda a Dcha, mas o menos lo que quería. Es decir, tal y como lo ves ahora (en unos días lo retocaré) esta sin el br (entre<>), si pongo el br (entre<>) me salta de linea y coloca la imagen debajo, dándole igual el alto del cuadro.
Muchas gracias de antemano y por favor borra el anterior comentario donde no salía el cod. br (entre<>)
Gracias
Hola de nuevo Antonio!
Bueno, entonces el problema ya está solucionado :)
No caímos, la verdad, en que el error pudiera ser el "br".
Lo importante es que salga bien, aunque esté sin esa parte del código.
Muchos saludos y para lo que necesites aquí nos tienes ;)
¡Nos vemos!
Muchas gracias a ti¡¡
Seguiré de cerca este blog recien descubierto para mi.
Saludos¡¡¡¡
Hola Antonio
Bueno, muchas gracias a ti también por haber sido tan amable ;)
Ya sabes que para lo que necesites, aquí estamos :D
¡Muchos saludos!
Buenas de nuevo, nueva molestia, pero no se como hacerlo. A ver si me indicas.
Con este código, hasta que no pasan el total de las imágenes que tengamos incorporadas, no vuelve a salir ninguna. ¿Es posible que no pase esto?, es decir, ¿que antes de que se acabe la "ristra" de imágenes, se enganchan de nuevo y se vea el banner de manera continua?
Gracias por tu tiempo de nuevo.
Saludos
Hola Antonio!
Pues, la verdad, desconocemos la forma de hacerlo :(
De todas maneras, vamos a ver si podemos decubrir y hacer algo, y, si lo averiguamos, te lo comunicamos :)
¡Muchos saludos desde Murcia!
muchas gracias enserio me fue super util
antes utilizaba un codigo parecido y derepente me dejo de funcionar u.u
este blog es muy util me gustaria afiliarme contigo si quieres
http://animevisualkeimangavampiros.blogspot.com/
ese es mi sito
Hola Night!
Nos alegra que te sirviera este truco, te ha quedado muy bien en tu blog :)
Por cierto, no realizamos intercambios de enlaces, si quieres puedes participar en la faviconera gratuitamente, o anunciarte ;)
¡Un saludo!
Hola .
Gracias por comaprtir tantas cosas utiles ,hacia rato que vuscaba esta clase de cajitas y al fin la encontre,gracias..
Tambien los enlace para seguir compartiendo que es tan lindo.
Sabes que me gustaria hacer el voton que esta en el lateral derecho ,donde haces clic y aparecen los banner,como donde dice ( blog de ayuda) esta re lindo , bueno ,espero me puedas ayudar
Bueno les dejo abracitos
Hola Donny!
Pues en el Balcón de Jaime explican este truco muy bien (nosotros no lo tenemos entre nuestras entradas): http://elbalcondejaime.blogspot.com/2009/08/expandir-y-contraer-cosas-en-los-posts.html
Solo necesitas tener el script de Scriptaculous en tu plantilla (dice ahí como ponerlo), y en vez de "TEXTO DEL ENLACE", nosotros lo hemos cambiado por el código con una imagen (<img src="URL-IMAGEN";>) ;)
Saludos!
ola esta muy bien el codigo pero me pasa lo sigiente cuando abro mi blog que es donde esta el cuadro de banners se ven los banners salidos del cuadro ya de una vez que carga no a ver si puedo subirte una imagen
[IMG]http://img859.imageshack.us/img859/1684/blogm.png[/IMG][/URL]
Hola, una pregunta, puse las fotos y quedo muy bien, pero cuando pasas el mouse por arriba va al enlace de imagensharck y no a donde lo quiero mandar ya.
muchas gracias
Saludos
Horacio
Hola no se si algun dia me responderan, mi unica duda es que quiero poner las imagenes que se muestren de derecha a izquierda pero al hacerlo solo se ve una imagen porque se mueven una arriba de la otra en vez de estar las imagenes una pegada de la otra, como lo soluciono?