Entradas
Son varios los que me preguntaron como hacer como hacer una slide de enlaces, normalmente se utilizan para crear enlaces hacia otros blogs utilizando poco espacio en nuestro blog, también se puede utilizar para mostrar una serie de imágenes o cualquier otra utilidad que se nos ocurra.
La slide que os propongo es sumamente simple y intentaré que entendáis cual es su estructura para que cada uno de vosotros la personalice a su gusto. Quizás la propiedad que más la caracterice es la de detener la imagen al poner el cursor encima, durante la marcha podréis comprobarlo en cualquiera de los ejemplos que mostraré a continuación.
Lo común será insertarlo en nuestra sidebar por tanto lo primero que tendremos que hacer es ir a: Diseño->Añadir un gadget->HTML/Javascript. Una vez aquí comenzaremos a construir la slide.
La slide que os propongo es sumamente simple y intentaré que entendáis cual es su estructura para que cada uno de vosotros la personalice a su gusto. Quizás la propiedad que más la caracterice es la de detener la imagen al poner el cursor encima, durante la marcha podréis comprobarlo en cualquiera de los ejemplos que mostraré a continuación.
Lo común será insertarlo en nuestra sidebar por tanto lo primero que tendremos que hacer es ir a: Diseño->Añadir un gadget->HTML/Javascript. Una vez aquí comenzaremos a construir la slide.
Primer paso:(Base del código)
Copiaremos el siguiente fragmento de código:
<marquee direction="up" scrollAmount="1" style="background- text-align: center; width:150px;height:150px;border:1px solid #000000;padding:3px" onMouseover="this.scrollAmount='0'" onMouseout="this.scrollAmount='2'">
<a href="URL DEL ENLACE1" title="TÍTULO1"><img src="URL DE LA IMÁGEN1"</a> <br>
<a href="URL DEL ENLACE2" title="TÍTULO2"><img src="URL DE LA IMÁGEN2"</a> </marquee>
Una vez tenemos el código insertado pasaremos al siguiente paso que consistirá en entender un poco el código para poder así adptarlo a vuestro blog.
Segundo paso:(Entendiendo el código)
Lo primero que deberemos de sustituir es lo marcado en negrita, URL DE LA IMAGEN, esta dirección se corresponde con el origen de la imagen que queremos mostrar, será del tipo:
http://i43.tinypic.com/33399o4.jpgSeguidamente tendremos que especificar hacia donde nos llevará al hacer click encima de la imagen, esta dirección la tendremos que ubicar donde puse URL DEL ENLACE, será del tipo:
http://sitiooriginal.blogspot.comEl código os lo dejé preparado para añadir 2 enlaces, podremos añadir tantos como queramos repitiendo la linea:
<a href="URL DEL ENLACEx" title="TÍTULO"><img src="URL DE LA IMÁGENx"</a> <br>
Podremos modificar los siguientes valores del código dependiendo del efecto que deseemos conseguir:
- marquee direction: Define como es el movimiento de los enlaces, hacia arriba (up), abajo (down),a la derecha (right), a la izquierda (left).
- scrollAmount: Velocidad de movimiento. A mayor número, mayor será la velocidad.
- text-align: Posición de los enlaces, centrados (center), a la derecha (right), a la izquierda (left).
- width: Ancho de la tabla.
- Height: Alto de la tabla.
- border: Grosor del borde de la tabla.
- #000000: Color del borde en hexadecimal.Mas colores.
23 Comentarios:
uso paste2.org para los link y gestor de descarga es el jdownloader.
Actualiza nuestro banner, por favor
www.softonickfull.blogspot.com
He decubierto tu blog por casualidad, buscando en google información para apañar el mío y me encanta. Le he puesto a mi blog una nube de etiquetas y, bueno, me parecía mal no darte por lo enos las gracias.
Saludos!
Hola, estoy aprendiendo mucho con tu blog,
lo sigo a diario y he puesto el banner de tu enlace en el mio.
saludos
Hola
Me ha servido el codigo pero el ejemplo de dos enlaces nada mas. Cuando le agrego el codigo para el tercer enlace no sale en movimiento sino estatica como una imagen. Necesito su ayuda por favor indiqueme que estoy haciendo mal como ubico el codigo del tercer codigo pegado al anterior o separado porque ya he intentado ambas formas y aun asi no sale bien. Tal vez el codigo este mal. Por favor comuniquese comigo.
Gracias espero su ayuda..
aztirayaneris@hotmail.com
hola
yo tambien tenia el mismo problema y luego de probar descubri que es lo que deja a los enlaces pegados. Para arreglarlo solo es necesario poner los enlaces sin
excepto el del ultimo enlace
ojo solo el "ultimo enlace debe ir al final con
.
A mi ya me funciono asi que para los demas no deberia ser tan complicado.
Espero haber servido de ayuda
adios..
PD: que gran blog para alguien que esta comenzando en el mundo blogger gracias.
No se porque no se ve lo que puse que se devia sacar pero hay va de nuevo ...
Borren la parte que sale " br " entre los simbolos mayor-menor ( < > ) que aparecen en cada enlace. Solo el ultimo debe llevar " br " asi solucionan el problema de la imagen fija.
Saludos y adios...
Kira Es cierto, lo que pasa que no se muestra por que es código HTML y en los comentarios lo interpreta como tal. Muchas gracias por tu aportacion aveces es dificil explicarse y se necesita una manita ;)
muy buena nota la puse en practica www.the twilightsaga-argentina.blogspot.com
Si, ahora quedó bien, nada más que sale junto :( Ahora te lo mando por e-mail a mi código
Sumer te sale junto por que debes insertar un salto de linea, el salto de linea en html se hace insertando el código <br> entre los distintos enlaces.
Es decir después del código de mi botón inserta lo que te dije, de forma que quede:
enlace 1
--salto de linea
enlace 2
Me sigue saliendo junto, pero no importa, la lista de enlaces no la voy a hacer de esa forma. Igual gracias.
muy buen efecto y ahorra bastante espacio para aquellos que tenemos como metodo seo el enlaze de banners
el problema es que en opera e IE se visualiza perfectamente ,
pero en firefox no veo nada ,,
alguna pista que me puedan dar respecto a esto??
ya revise que el explorador ( firefox) permita la ejecucion de este tipo de codigo
de antemano gracias por sus respuestas
xtremex Me sorprendio!!!, como todos sabemos el que suele dar problemas es IE ya que no cumple con los standares, parece que en la ultima versión I8 han trabajado duro y se amolda mas al resto de exploradores. En cuanto a lo de firefox fijate que tengas los pluggins perfectamente instalados y actualiza la versión, te puedo asegurar que funciona perfectamente.Un saludo y espero que te sirva mi consejillo ;)
@caxitos muchas gracias por atender a mi duda
el problema se resolvio
el motivo por el que el firefox no mostraba el script era por que solo ponia el codigo pero no definia lar urls ni de la imagen ni de la direccion del enlace
y al estar incompleto el script por lo tanto el FF no mostraba nada
muchas gracias de nuevo
saludos desde aca de mi casa
disculpa que haga flood en esta entrada pero me espere unos dias a ver si alguien mas contestaba.
el motivo del post es el siguiente :
ya puse los enlaces en movimiento gracias a tu entrada
pero he estado buscando la manera de eliminar ese espacio entre el inicio y el fin de la lista de enlaces
esdecir quiero el movimiento de la lista de enlaces sea contunua sin ese espacio que hay entre lapso y lapso
ya he estado buscando en el codigo pero no doy
existira alguna manera ???
de antemano gracias por la atencion
saludos
xtremex el espacio que comentas biene por el salto de linea, en html el salto de linea se hace con br, tendrás que quitar también los corchetes que lo encierran, pruebalo y me dices que tal fue.
@caxitos muchas gracias por la respuesta
te comento que en el code de mi marque no existe ningun salto de linea los elimine todos para que salieran continuos entre banner y banner y asi es .
a lo que me refiero es que hay una secuencia
en donde inicia el primer baner de la lista y el ultimo
entre el primer banner y y el ultimo se genera un espacio vacio que no consigo eliminar
quiza haya que insertar alguna otra linea
como posiblemente " continue" :( no se
espero me puedas ayudar
te dejo una imagen por que quiza no me explico bien
http://img94.imageshack.us/i/espacio.png/
de antemano muchas gracias por tu tiempo
saludos
Hola Caxitos!!
Yo tengo una pregunta que puede interesarle a algunas personas: ¿Puedo poner com una página de inicio para el blog y que diga algo y vos ponés entrar al sitio. ¿Algo así? ¿Se puede?
Gracias =)
Sumer La verdad que nunca me lo habia planteado, un blog principalmente su finalidad es de seguir una secuencia de actos reflexiones o comentarios, para eso se crearon estas plataforma, el caso es que ha degenerado la cosa y pretendemos hacer cosas que en Web es sencillo y para adaptarlas a los blogs puede ser algo relativamente complicado. El sistema de blogger como sabrás ordena las entradas por fecha, por tanto para que aparezca una entrada, se podria indicar que muestre 0 entradas por pagina y tener de alguna forma los enlaces a las diferentes paginas en la sidebar, pero sinceramente no lo veo muy limpio. Si encuentras algún blog que posea esa estructura te agradeceria me avises con tal de poder indicarle a la gente como hacerlo. Como siempre un saludo y muchas gracias Sumer
Mira Caxitos: wwww.gold-camera-gratuita.es.tl
Esta es una de las páginas que tienen lo que te digo. El principio y luego puedes pulsar entrar al sitio y vez el resto de la página.
Pero por ahí los blogs no pueden poseer eso. Por ahí solo las páginas webs.
Un saludo.
Sumer Efectivamente la URL que me indicas es la de una web que como te comenté es lo mas común, tener una pagina principal y las demás que cuelgan de ella, en blogger es bastante mas complicado de conseguir.
hola que tal, gracias por le post!.... ya x fin tuve un tiempito para hacer el "Blogs recomendados" en movimiento en mi blog :D ... quisiera saber si podemos intercambiar links? para recomendarnos mutuamente con los blogs!!!
hola quiero saber como puedo hacer para subir imagenes en movimiento en mi pagina de face. gracias
Publicar un comentario
Haga su comentario
Bienvenido al Rincon del Blog
Tus comentarios nos ayudan a mejorar
Muchas Gracias por Comentar.