Tutorial nº4: Gadget en movimiento

¡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 ♥