Tutorial nº4: Gadget en movimiento

sábado, 24 de enero de 2015

¡Hola a todos!

Hoy os traigo una nueva entrada de la sección que hemos estrenado hace poco de Tutoriales. Recordad que si queréis que os hablemos de cualquier cosa relacionada con blogger, sólo tenéis que dejar un comentario, ya sea aquí o en Twitter, y nosotras lo apuntaremos para hacerlo.

El tema del que venimos a hablaros hoy es del gadget en movimiento. ¿No os pasa que vais a un blog y veis que tienen, como es nuestro caso, un gadget con sorteos o últimas reseñas, que se mueve y queda super bonito? ¡Pues hoy os enseñaremos a añadirlo a vuestro blog!

El tema del HTML siempre da muchos dolores de cabeza, y lo decimos por experiencia propia, pero hay veces que indagando un poco no es tan difícil como parece. De hecho, este gadget es de lo más fácil que hemos hecho hasta ahora, ya que sólo hay que copiar y pegar, ¡nada más!
Seguro que habéis visto este gadget en nuestro blog, pero en movimiento claro, y muchos nos habéis preguntado que cómo lo hicimos. Pues bien, aquí viene la mágica solución. Este gadget con movimiento tiene un simple código que hay que llevar a rajatabla:
<(borra esto)marquee direction="left" scrollamount="7"; text-align: (borra esto)center; width:150px;height:150px; onmouseover="this.scrollAmount='0'"(borra esto)onmouseout="this.scrollAmount='5'">
*Los (borrar esto) no lo pongáis, es lo que he tenido que poner obligatoriamente para que blogger me dejara poner el código HTML. Tras 20 minutos, no es coña, he conseguido que el código se quedara -.-"

Esto marca el comienzo del gadget, la estructura. Para usarlo sólo tenéis que añadir un gadget con HTML e ir pegando el código que os vamos dando. Como veis, nuestro gadget tiene marcado que vaya de derecha a izquierda, pero si queréis que vaya al revés sólo tenéis que cambiar el left por right. Otra cosa que también personalizamos nosotras es el tamaño que queremos del gadget. Nosotras tenemos el ancho y el alto a 150px, como podéis ver en width:150px;height:150px. Si queréis que salga más pequeño o más grande, sólo tenéis que ir cambiando el tamaño y personalizarlo a vuestro gusto.
< a href(borrar esto)= "(añadir URL del post)" target="(borrar esto)_blank"> <(borrar esto)img src= "(añadir URL de la imagen)" width(borrar esto y el espacio)  =120 px height(borrar esto y el espacio) = 190 px />
*Los (borrar esto) no lo pongáis.

Vamos con la segunda parte del código y la más fácil. Como podéis ver aquí es donde van los datos de nuestras reseñas, o en caso de utilizarlo para otra cosa, la url de la entrada o lo que queráis vosotros. Aquí es importante que os fijéis en el width=120 px height= 190 px porque es lo que indica el tamaño de la portada que aparecerá en el gadget. Para cambiarlo sólo tenéis que personalizarlo a vuestro gusto, como dije antes. Sólo hay que cambiar los números, el alto y el ancho.
</(borra esto)marquee>
*El (borrar esto) no lo pongáis.

¡Y llegamos a la parte final! Esto es lo que cierra el código, mucho cuidado porque si no lo ponéis, el código no servirá para nada. Como veis este es muy sencillo, no creo que tenga que poner nada sobre él, ¿no? :P

Y hasta aquí el tutorial de hoy. Creo que lo he explicado todo medianamente bien, ¿no? Aún así si tenéis algún problema o duda siempre podéis comentarlo en la entrada, por Twitter o por nuestro correo, y os responderemos encantadas a cualquier pregunta.

Feliz fin de semana a todos ♥

19 comentarios:

  1. Muchísimas gracias por el aporte!!!Está bien saberlo para futuros ccambios en el blog.
    ¡Gracias!

    ResponderEliminar
  2. Hola,

    Muchas gracias. ¡Hacía tiempo que quería ver cómo poner esta gadget! ¡Gracias! :)

    Saludos

    ResponderEliminar
  3. Hola! Llevo ya tiempo buscando cómo hacer esto xD Muchas gracias por ponerlo.

    Besos^^

    ResponderEliminar
  4. Hola^^
    ¡Muchas gracias por el tutorial!
    besos

    ResponderEliminar
  5. A mi esto me lo explico Carol hace unos meses *-*
    Buen tutorial <3

    ResponderEliminar
  6. Creo que os adoro. Había estado buscando este código durante muchísimo tiempo y no lo encontraba. Intenté hacerlo por mi misma pero siempre se me quedaba pillado al llegar a la última imagen T_T
    ¡Muchas gracias!

    ResponderEliminar
  7. ¡Hola! :D

    ¡Madre mía! ¡Llevo meses buscando cómo hacer eso! Entre que no sé buscar y mi relación de amor-odio con HTML no daba con nada que se le pareciese, así que ¡¡¡miles de millones de gracias!!! Ahora mismo lo pongo en práctica. :D

    ¡Besitos!

    ResponderEliminar
  8. ¡Hola! Siempre busqué cómo instalar este gadget en mi blog, pero los tutoriales que encontraba eran complicados... Y tú, lo explicaste de una manera super sencilla. MUCHÍSIMAS GRACIAS por esta entrada, me sirvió mucho. ¡Un beso!♥

    ResponderEliminar
  9. ¡Muchas gracias!
    Tenía muchas ganas de hacerlo y gracias a vosotras lo he conseguido.
    Besos ^^

    ResponderEliminar
  10. Hola!!

    Muchas gracias por este super tutorial! :) Me ha encantado ^^

    Una cosa que me gustaría saber, haber si podéis hacer un tutorial, es cómo ponéis los distintos cuadraditos que bordean un texto. Me explico jeje, en el caso de esta entrada, el cuadrado morado que bordea los códigos o en el título de "ULTIMAS RESEÑAS" las rayitas naranjas. Es que lo he visto en varios blogs yqueda muy muy bonito y siempre me he preguntado cómo se hará eso jeje.

    La verdad que me encantaría que me lo dijeráis :) Os lo agradecería un montón ^^

    Besitos!!!

    ResponderEliminar
  11. Muchas Gracias! yo lo tengo hace poco en mi blog, lo encontré después de días buscándolo. pero me llevo el código del gadget por si tengo problemas jaja
    Un besote!

    ResponderEliminar
  12. ¡Hola, Tess <3!
    Qué bonito. Hay mucha gente que no sabía hacer este tipo de cosas y, ¡es una de las cosas más esenciales para el blog! A mí me gusta tenerlo en el mío ^^.
    Un besazo <3

    ResponderEliminar
  13. Hola!!
    esta genial el tutorial :D muchas gracias por él!
    Nos leemos :D

    ResponderEliminar
  14. ¡Hola! Yo ya sabía cómo hacer esto, pero me parece un tutorial muy útil, ya que no siempre es fácil encontrar los códigos para este tipo de cosas si no sabes muy bien cómo se llama lo que buscas.

    Saludos :)

    ResponderEliminar
  15. ¡Muchas gracias por el tutorial! Ya pondré el gadget en mi blog :D
    Y por cierto, te he nominado a un premio tag
    http://elrinconde-maya.blogspot.com/2015/01/premio-tag-gracias-silent-storm.html
    Besos :**

    ResponderEliminar
  16. Siempre me he preguntado cuál sería el código html para este gadget, me parece que queda muy mono y además es muy útil. ¡Gracias por compartirlo!

    Besos ^^.

    ResponderEliminar
  17. Buenas! muchas gracias por el tuto. me encanta. Voy a ver si consigo aplicarlo que yo soy muuuuuuuy torpe!

    besos

    ResponderEliminar
  18. Me encanta, aunque hay un problema. Como tienes bloqueado el click de copiar, me es imposible esciribr todo el codigo. :c

    ResponderEliminar

Este blog se ha construido poco a poco gracias a vuestras visitas y comentarios. ¡Muchísimas gracias! Aunque no solemos contestar a los comentarios por cuestión de tiempo, leemos todos y cada uno de ellos.

Recuerda comentar con educación, sin insultar a nadie y sin ningún spoiler.

Si quieres que conozcamos tu blog, puedes dejar un comentario en cualquier entrada o enviarnos un correo.

¡Gracias por pasaros! ♥

Santa Template by Mery's Notebook © 2014