Hola Hola!! Soy Cat y aquí estoy de nuevo otro sábado con el segundo tutorial en este blog. Antes de empezar con el nuevo tuto, quería avisaros que estamos recibiendo varios formularios duplicados ya que muchos pensáis que nos hemos olvidado. Ni mucho menos es así, estáis todos en nuestra lista para reseñar pero sois muchos. En cualquier caso si tenéis alguna duda o habéis cambiado el nombre, url o ha pasado algo en vuestro blog mandadnos un mail y no otro formulario de contacto, ya que así será más sencillo para nosotros. Y eso es todo, vamos con el tutorial!
El de hoy ha sido petición de Shine, que no tenía muy claro como poner un widget de los que hay en este espacio que le llamó bastante la atención. Concretamente el Slider en movimiento que tenemos en la barra lateral anunciando los blogs de cada administradora. Así que espero que os sirva este tutorial, que lo entendáis y para cualquier duda referente a este tutorial mandadme un mail a cathiieh@gmail.com
El de hoy ha sido petición de Shine, que no tenía muy claro como poner un widget de los que hay en este espacio que le llamó bastante la atención. Concretamente el Slider en movimiento que tenemos en la barra lateral anunciando los blogs de cada administradora. Así que espero que os sirva este tutorial, que lo entendáis y para cualquier duda referente a este tutorial mandadme un mail a cathiieh@gmail.com
- ¿Qué es un Slider o
galería de imágenes en movimiento? -
La verdad es que no sé
exactamente como se llama este widget para mi siempre será “el coso ese que tiene imágenes pasando y
cuando pones el cursor encima de una de ellas se para”. Pero el nombre más
similar que he encontrado, que no sé si será el correcto, es Slider. (Si alguien sabe cuál es el nombre
correcto que me lo diga, faltaría más.) Os dejo un ejemplo de Slider
para que sepáis de forma más clara que es.
Este Widget puede tener muchos
usos. Los he visto en blogs de reseñas anunciando las reseñas de los libros que
se han hecho, también haciendo promoción a otros blogs (como en el nuestro) y diversas cosas. Resulta
práctico ponerlo ya que ocupa poco espacio y queda bastante estético.
- ¿Cómo ponerlo? -
Quizás si no estás acostumbrado a
usar códigos HTML te sea un poco difícil ponerlo. ¡Pero ten en cuenta
que es sólo copiar y pegar códigos! Es muy sencillo, ya verás:
1. Diseño > Añadir un gadget
> HTML/Javascript
2. Copiar código HTML [Click aquí para conseguirlo]
3. Rellenar el código HTML según
las instrucciones del archivo adjuntado en el paso anterior.
4. Guardar y colocarlo en la zona
que más te guste de tu blog.
Click en la imagen para agrandarla
Y eso es todo! Así de sencillo y rápido. ¡Espero que os haya servido! Contadme en los comentarios que os ha parecido y si lo habéis puesto en vuestro blog, enseñádmelo. Si tenéis alguna duda o queréis que haga algún otro tutorial en especial tan solo tenéis que acceder ¡AQUÍ!
Nos vemos el próximo sábado!
Mil besos!♥
Llego a saberlo y me espero a que tú lo expliques porque tuve que buscarlo en internet y lo que me costó ponerlo u.u Ni lo entendí.
ResponderEliminarPor cierto no sé si dejas hacer sugerencias, pero ¿podríais explicar como se pone un gadget con los ultimos comentarios y foto?
Es que lo tenía puesto pero se me quitó un día y ya no se pone u.u
Mil besos.
Creo que lo voy a usar para mi blog de historias, ya que el personal no tiene casi nada de imágenes, banners o links. Pero en el de historias puedo hacer portadas de cada novela y hacerlas que pasen así de bonitas :)
ResponderEliminarGracias, me ha encantado el tuto de hoy :)
yo ya tengo varios de esos, pero es muy buen idea, sobretodo porque ahorra mucho espacio en el lateral y encima queda muy bonito
ResponderEliminarun beso
Enhorabuena Cat, me encanta como lo explicas todo y estoy pensando en ponerlo en mi blog de reseñas :)
ResponderEliminarUn besazo!
Me encanta :D pensaré que imágenes para ponerlo dentro de poco! Buena explicación guapa! Muuuuuak
ResponderEliminarMe encanta :D pensaré que imágenes para ponerlo dentro de poco! Buena explicación guapa! Muuuuuak
ResponderEliminarOH gracias se me pasó por completo mirarlo, que vergüenza xd
ResponderEliminarAhora mismo puede que incluso lo ponga en práctica en el blog, me encantan estos tutos por lo sencillos y útiles que resultan:P
besitos
Ah eso si, tuve un problema con las dimensiones... ¿se podría poner automático para no tener que modificar nada?
ResponderEliminargracias
Hola Shine!! El gadget es automático por si solo ya.
ResponderEliminarQuizás si se comete ese fallo es o porque bien has copiado mal el HTML del gadget o porque en la configuración HTML de tu plantilla hay algo que impide que sea automático.
Eso ya sería algo más concreto de tu plantilla, vaya.
Un saludo!
Hola! de verdad me han salvado, lo estuve buscando un buen rato, eh, solo tengo una duda... ¿Se puede hacer que pase un poquitico más rapido? Gracias
ResponderEliminar¡Muchisimas gracias por el tutorial!
ResponderEliminarLo intenté hacer como 10 veces con diversos tutoriales pero no me salia...
Ahora ya tengo mi slider de reseñas.
¡Muchas gracias! (otra vez)
Besos<3
Pues lo he intentado pero una imagen se mueve (tal y como debería), y la otra sin embargo se queda debajo de ésta y sin moverse :cccc
ResponderEliminarHola Marina ♥!
ResponderEliminarComprueba debidamente que has copiado bien los códigos HTML y has seguido las instrucciones.
Si aún así no te sale puedes contactar con Cat vía mail (cathiieh@gmail.com) para que resuelva tu duda.
Un saludo!
¡Buenas! Me ha venido genial el post, una explicación muy sencillita. Pero tengo una duda, ¿qué habría que modificar para que las imágenes pasaran más rápido? ¡¡Muchas gracias!!
ResponderEliminar¿Es tarde ya para responder? O:
EliminarRevisa al inicio del código, donde dice "onmouseover="this.scrollAmount='0'"" y "onmouseout="this.scrollAmount='3'"". Lo primero corresponde a la velocidad al poner el mouse sobre una imagen (xD la idea es que pare, por eso es 0), y lo segundo es la velocidad cuando no está el mouse encima. Entre más alto, más rápido :3.
Yo he tratado, pero las imágenes me quedan muy grandes, cómo puedo hacer para que las imágenes me queden parejas y de un tamaño pequeño para que se vean bien???
ResponderEliminar¡Hola!
EliminarxD Me doy la libertad de responder xP.
O: Tienes dos opciones: usar imágenes del mismo tamaño (o al menos del mismo alto, que es lo que importa) o en el código de cada imagen editas donde dice "img border="0" img style="width: 100px; height: 100px;"": width es el ancho y height el alto ;).
¡Suerte!
¡Hola! Hace ya bastante que vi este tutorial y lo apliqué en mi blog. ¡Muchísimas gracias! (xD Juraría que ya había pasado a agradecer, lo siento).
ResponderEliminarAyer, sin embargo, me di cuenta de que ahora al posar el mouse en una de las imágenes, no se detiene :C. Al principio pensé que era algo sólo de mi blog, pero al pasar acá, vi que tampoco paran... ¿alguna idea de porqué pasa? O:
♥ Gracias de antemano~.
xD Hola otra vez. Estuve jugando un poco con el código, revisando otros sitios y viendo los códigos de otras páginas con gadgets similares y encontré una solución :D.
EliminarSólo reemplacé "onmouseover="this.scrollAmount='0'"" y "onmouseout="this.scrollAmount='3'"" con "onmouseover="stop()"" y "onmouseout="start()"" respectivamente, y para regular la velocidad cambio el número en "scrollamount="4"". ;) Lo dejo aquí, en caso de que le sea útil a alguien más.
Otra vez, ¡gracias por el tutorial!
¡¡muchas gracias!! me ha servido de gran ayuda ^^
ResponderEliminarUn abrazo.
Hola gracias por el tutorial, soy nuevo en esto y quiero saber si hay posibilidades de hacer slider con las notas de las p{aginas, ya hice el de las entradas
ResponderEliminar¡Hola! Gracias por el tutorial, pero tengo un problema. Cuando voy al blog a ver las imágenes no me salen, me pone un cuadrado del tama{o de la imagen con una montaña rota al costado, que quiere decir que no se puede ver. ¿saben por que? gracias.
ResponderEliminarHola!
ResponderEliminarNadie me lo había planteado tan sencillo, gracias!!! Ya te sigo...
HOLA! <3
ResponderEliminarDisculpa. UNA DUDA. Es que ya lo intente en mi blog pero cuando repito el parrfo en cursiva me aparece la imagen estancada. ¿que hago?
Hola Alexa!
EliminarComprueba que hayas copiado correctamente el código del archivo. Muchas veces no nos damos cuenta y detalles como puntos o comas no los copiamos. Ese simple detalle hace que el código deje de funcionar.
En el caso de que siga dándote algún tipo de fallo contacta conmigo en cathiieh@gmail.com y te ayudaré de una manera más personal encantada
Un saludo! :)
Hola:
ResponderEliminarEn el navegador de Explorer no funciona correctamente la "caja de imágenes en movimiento", y sí en Chrome.
Me podrías explicar que es lo que falla para corregirlo.
He visto que tu caja si funciona con Explorer.
Un saludo.
Mi blog (trata de plagas) es: http://ratamur.blogspot.com.es/
ratamur@gmail.com
Un saludo. Juan Antº
Osea hellou? Esto no va se tira media hora cargando soys unos rechingones....
ResponderEliminar¡Bien! He encontrado lo que estaba buscando para poner las iniciativas en las que participo. ¡Muchas gracias! A ver si no me lío a la hora de poner el código, que bien que sé sobre html y tal pero luego me cuesta hacer algunas cosas (por pereza sobre todo xD).
ResponderEliminarHola ..lo que yo quería saber..es como poner imágenes en movimiento ..unas que son parecidas a esta entrada que subieron.. pero q al tocar cada imagen te lleve a una entrada del blog.
ResponderEliminarSi me pueden mandar la info al mail.se los agradezco..
santiago_08_16@hotmail.com
Hola! Gracias me ha servido de mucho!
ResponderEliminarHola! Me sale una imagen debajo de la otra, yo las quiero juntas (lado a lado)... ?
ResponderEliminarHola! Me sale una imagen debajo de la otra, yo las quiero juntas (lado a lado)... ?
ResponderEliminarCorregí todo lo demás, pero tengo exactamente la misma duda que tu :/
Eliminar¿De qué tamaño tienes que ser las imágenes?
ResponderEliminarMuchas gracias por la explicación! Yo estaba teniendo problemas con el código que tenía pero este funciona espectacular :D
ResponderEliminar