Cómo crear un reproductor de YouTube para Blogger con portada giratoria y playlist

En este tutorial vamos a crear un reproductor de música inspirado en los reproductores clásicos, pero con un toque más cálido y decorativo.

El gadget incluye:

• Reproducción de canciones desde YouTube.
• Una portada que gira mientras la música está sonando.
• Botones de reproducir, pausar, siguiente y anterior.
• Una playlist desplegable.
• Barra de progreso interactiva.
• Un diseño completamente personalizable.

Todo funciona directamente desde el blog sin necesidad de abrir YouTube en otra pestaña.

Dificultad: Avanzada
Tiempo aproximado: 35 minutos
Necesitas: Un blog en Blogger + imágenes para el fondo y las portadas de las canciones

Antes de empezar

Este gadget utiliza HTML, CSS, JavaScript y la API de YouTube.

Cada parte cumple una función distinta:

• HTML → crea la estructura del reproductor.
• CSS → diseña la interfaz, las animaciones y la portada giratoria.
• JavaScript → controla la reproducción, la playlist, la barra de progreso y la comunicación con YouTube.

Aunque el código es largo, está dividido en pequeños bloques independientes, lo que facilita entender cómo funciona cada parte.

Cómo crear un pequeño bloc de dibujo para Blogger

En este tutorial vamos a crear un pequeño lienzo donde los visitantes podrán dibujar directamente desde el navegador. El gadget está inspirado en el clásico Paint, con una estética retro y sencilla, pero adaptada para combinar con un blog de estilo cálido y creativo.

Incluye:

• Un lienzo para dibujar.

• Una paleta de colores desplegable.

• Un control para cambiar el grosor del pincel.

• Un botón para borrar el dibujo.

• Un botón para guardar la ilustración en formato PNG.

• Compatibilidad con mouse y pantallas táctiles.

Antes de empezar

Este gadget está creado utilizando HTML, CSS y JavaScript.

Cada parte tiene una función diferente:

• HTML → crea la ventana, los botones y el lienzo.
• CSS → da el aspecto de una pequeña aplicación retro.
• JavaScript → permite dibujar, cambiar colores, borrar el lienzo y guardar el resultado.

Aunque el código parece largo, la mayor parte corresponde a pequeñas funciones independientes, por lo que es más fácil de entender de lo que parece.

Cómo crear una tarjeta de “pensamiento del día” para Blogger con hora, energía y recomendación de té

En este tutorial vamos a crear una pequeña tarjeta interactiva que cambia según el momento del día. Este gadget funciona como un pequeño diario del presente: muestra la hora, la fecha, un estado de ánimo, un porcentaje de energía, una frase reflexiva y una recomendación de té, la tarjeta no necesita que el lector introduzca datos; se adapta automáticamente según la hora en la que visite el blog.

Dificultad: Intermedia
Tiempo aproximado: 20 minutos
Necesitas: Un blog en Blogger + una imagen para el fondo de la tarjeta

Antes de empezar

Este gadget está creado utilizando HTML, CSS y JavaScript.

Cada parte cumple una función:

• HTML → crea la estructura de la tarjeta.

• CSS → le da el estilo de nota escrita a mano, con fondo, bordes y tipografía.

• JavaScript → calcula la hora, la fecha y decide qué mensaje mostrar según el momento del día.

La idea detrás del gadget es crear una pequeña pausa dentro del blog: un rincón que cambia junto con el paso de las horas.

🛍️Broches #5🛍️

Esta vez encontré este conjunto de pinza y broches en amarillo transparente, con un detalle de lacito que me pareció demasiado lindo. Me encantó esa mezcla de algo simple pero con un toque más delicado, como esas cositas que parecen sacadas de una cajita de accesorios antigua.

Me gusta mucho cuando los accesorios tienen pequeños detalles que llaman la atención sin ser demasiado grandes, siento que una pinza, un broche o cualquier detalle en el pelo puede cambiar completamente la sensación de un outfit.

Creo que este conjunto va a ser de esos que voy a tener a mano para esos días en los que quiero agregar algo diferente sin complicarme demasiado.

Una compra pequeña, pero de esas que hacen que las cosas cotidianas se sientan un poquito más bonitas. 

🛍️Broches #4🛍️

En esta ocasión me crucé con estas dos pinzas con diseño de corgi y me parecieron demasiado adorables, creo que también me llamaron mucho la atención porque tengo un perro muy parecido a esa raza, así que fue imposible no sentir un poquito de conexión con ellas.

No era algo que estuviera buscando, pero fueron de esas cositas que ves y automáticamente te sacan una sonrisa. Me encantan los accesorios que tienen un toque divertido y que, además de ser lindos, tienen algún significado personal, siento que son esos pequeños detalles los que hacen que algo tan cotidiano como peinarse tenga un poquito más de personalidad y se sienta más nuestro.

Ahora solo falta probar todas las formas posibles de usarlas, aunque algo me dice que estos corguitos van a aparecer bastante seguido por acá. ✨

🛍️Broches #3🛍️

Esta vez encontré este broche de estegosaurio y obviamente no pude dejarlo ahí. Siempre me han encantado los dinosaurios, así que encontrar uno tan tierno y con tantos detalles fue una de esas pequeñas compras que se sienten muy yo.

Me encantan esos accesorios que tienen algo diferente, que capaz son chiquitos, pero que logran darle personalidad a cualquier cosa donde los pongas, siento que este tipo de detalles hacen que nuestro estilo sea más divertido y que podamos mostrar un poquito de lo que nos gusta.

Creo que las mejores compras son esas que no necesariamente necesitás, pero que cuando las ves pensás: “esto parece hecho para mí”. Y bueno, claramente este pequeño estegosaurio tuvo ese momento.

Ahora solo falta encontrarle el lugar perfecto para usarlo, aunque siento que va a quedar lindo en muchos lados. ✨

🛍️Broches #2🛍️

 Esta vez llegó a mi colección este broche de lazo rojo, una de esas cositas que quizás no necesitaba, pero que apenas vi me encantó, tiene ese toque especial que hace que algo simple se sienta diferente.

Me gustan mucho los accesorios así, porque siento que son los pequeños detalles los que terminan contando más sobre nuestro estilo, un lazo, un color, una forma... cosas mínimas que hacen que algo se sienta más personal.

Así que este fue mi pequeño gustito de esta vez ❤️
Ahora queda encontrarle el lugar perfecto para usarlo.