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.

🛍️Broches #1🛍️

 Bueno, miren la cosita que encontré

No iba con la idea de comprar nada, pero ya sabemos cómo termina eso... una entra “solo para mirar” y sale con algo nuevo en la mano.

Esta vez fue este broche con forma de torta de corazón, que capaz es una cosa chiquita, pero me pareció demasiado lindo como para dejarlo ahí. Me encantan esos accesorios que parecen pequeños detalles, pero que terminan siendo los que más personalidad le dan a un outfit, siento que las mejores compras son esas que no necesariamente necesitás, pero que cuando las ves pensás: “esto es muy yo”. Y bueno, claramente este broche tuvo ese momento.

Ahora solo falta encontrar todos los lugares donde pueda usarlo. ✨

 Últimamente estuve juntando algunas cositas que compré y pensé: ¿por qué no compartirlas por acá? 🍓

Siempre me pasa que entro a una tienda “solo para mirar” y termino encontrando algo que de alguna manera siento que necesitaba. A veces son cosas chicas, como una taza nueva, una libreta bonita que seguramente voy a querer usar para escribir cualquier cosa (y que probablemente no use por miedo a arruinar), algún libro que me llamó la atención o algún detalle para hacer mi espacio un poquito más mío.

No son grandes compras ni cosas súper importantes, pero me gusta la sensación de traer algo nuevo a casa, acomodarlo en su lugar y sentir que forma parte de mi día a día. Creo que hay objetos que tienen esa magia de acompañarnos en momentos simples: una tarde tranquila, una noche leyendo, un desayuno lento o esos ratitos donde una simplemente disfruta estar en casa.

Así que en esta sección les voy a ir mostrando esas pequeñas cosas que se fueron cruzando conmigo y que terminaron viniéndose conmigo a casa, algunas serán compras planeadas y otras de esas que aparecen de sorpresa, pero todas tienen algo especial detrás.

Bienvenidos a mi pequeño rincón de compritas y nuevos tesoritos. 🍎

Cómo crear una mascota interactiva para Blogger con animación y partículas

 

En este tutorial vamos a crear una pequeña mascota interactiva para tu blog.

La mascota permanecerá en un rincón de la página y reaccionará cuando el lector interactúe con ella:

• Al pasar el cursor aparecerán pequeñas estrellas.
• Al hacer clic cambiará a una expresión diferente.
• Después de unos segundos volverá a su estado original.

Este gadget convierte una imagen sencilla en un pequeño compañero dentro de tu espacio digital.

Dificultad: Intermedia
Tiempo aproximado: 15 minutos
Necesitas: Un blog en Blogger + dos imágenes de tu personaje o mascota

Antes de empezar

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

Cada parte tiene una función diferente:

• HTML → crea el espacio donde vive la mascota.
• CSS → controla el tamaño, posición, transición y partículas.
• JavaScript → permite que la mascota reaccione al movimiento y al clic.

La idea principal es transformar una imagen estática en un pequeño elemento interactivo que haga que el blog se sienta más personal.

Cómo crear una lluvia de pétalos animados para tu blog con HTML y CSS

 

Hoy vamos a crear un pequeño detalle decorativo para tu blog: una lluvia suave de pétalos que caen por la pantalla con movimiento natural, como si una brisa los llevara lentamente.

Este gadget está pensado para crear una atmósfera más tranquila y visual. No modifica el fondo de tu blog ni ocupa espacio dentro del diseño; simplemente añade una capa decorativa sobre la página.

Dificultad: Intermedia
Tiempo aproximado: 15 minutos
Necesitas: Un blog en Blogger + una imagen en formato PNG para usar como partícula

Antes de empezar

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

La parte de CSS se encarga de crear el movimiento y la apariencia de las partículas, mientras que JavaScript genera nuevos pétalos automáticamente y controla detalles como:

• tamaño aleatorio
• velocidad de caída
• dirección del viento
• rotación
• desaparición después de caer

La idea es que cada pétalo sea ligeramente diferente, para que el efecto no parezca una animación repetida.

Cómo crear una carta interactiva con efecto 3D para Blogger

Hoy vamos a preparar este pequeño rincón para tu blog. No necesitas saber programación; solo un poco de paciencia, una taza de té y unos minutos para personalizar tu espacio.

Dificultad: Fácil - Intermedia
Tiempo aproximado:10 minutos
Necesitas: Un blog en Blogger + dos imágenes

Antes de empezar

Esta carta está creada únicamente con HTML y CSS, por lo que no necesita scripts externos ni complementos adicionales. La magia del efecto ocurre gracias a una transformación 3D llamada rotateY, que permite que un elemento gire sobre su eje como una tarjeta real.

Domingos de Té

Recomendación de Té #1 — Earl Grey

Hay días que parecen pedir silencio, no ese silencio incómodo, sino el que aparece cuando la lluvia golpea suavemente la ventana, un libro permanece abierto sobre la mesa y el tiempo deja de sentirse urgente. En esos momentos, siempre termino preparando un Earl Grey, quizá sea por su aroma a bergamota, o porque tiene esa extraña capacidad de hacer que una tarde cualquiera se sienta un poco más especial.

✧Un té que invita a quedarse✧

El Earl Grey es un té negro aromatizado con bergamota, un pequeño cítrico de perfume delicado. Su sabor es elegante, con un equilibrio entre la intensidad del té negro y una nota fresca que recuerda a los jardines después de la lluvia. No necesita grandes acompañamientos, basta una taza caliente, una manta sobre las piernas y unos minutos sin mirar el reloj.

✧¿A qué sabe una tarde con Earl Grey?✧

Tiene un sabor profundo, pero amable, primero aparece la calidez del té negro y, unos segundos después, la bergamota deja una sensación cítrica, suave y ligeramente floral que permanece incluso cuando la taza ya está casi vacía.

Es uno de esos sabores que no buscan llamar la atención; simplemente hacen que todo parezca un poco más tranquilo.

✧Si pudiera acompañar un momento...✧

Lo serviría junto a una novela que avanza despacio, de esas que describen paisajes, estaciones y pequeños gestos cotidianos, también lo elegiría para escribir unas páginas en un diario, ordenar pensamientos o simplemente observar cómo cambia la luz de la tarde.

Bienvenidos

Bienvenidos a Mañanas Lentas

Este es un lugar para las cosas pequeñas.

Para los libros que terminan llenos de notas.

Para las canciones que se escuchan mientras haces café.

Para las películas que dejan ganas de mirar por la ventana.

Para las flores que encuentras caminando sin rumbo.

Para las fotografías borrosas que terminan siendo las favoritas.

Aquí no hay prisa.

Solo pequeñas historias que hacen los días un poco más bonitos.

Bienvenido a Mañanas Lentas.