Tutorial : diseño de gadget de televisión retro para tu blog ✧˖°

 [ ✦ ] introducción ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─

dale un toque nostálgico y estético a tu espacio digital ☁️₊˚⊹ este tutorial te guiará para integrar un marco de televisión vintage cromado que reproduce tus clips o películas favoritas directamente en la pantalla de la tele 

[ ✦ ] requisitos previos ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─

• una plataforma de blogs compatible con widgets o bloques html (como blogger o wordpress) 🗂️ • el enlace del vídeo de youtube que deseas reproducir 🎞️

[ ✦ ] paso a paso para la instalación ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─

1. dirígete al panel de administración de tu blog y añade un nuevo gadget o bloque de código de tipo html/javascript ⚡

2. copia y pega el siguiente código completo dentro del cuadro:

HTML

<div class="vintage-tv-wrapper">
  <!-- reproductor de vídeo oculto detrás del marco -->
  <div class="vintage-tv-screen">
    <iframe 
      id="tv-player"
      src="https://www.youtube.com/embed/1zpoyNfXpSg" 
      title="reproductor tv retro" 
      frameborder="0" 
      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
      allowfullscreen>
    </iframe>
  </div>

  <!-- marco del televisor vintage -->
  <img 
    src="https://i.postimg.cc/qvnskfD9/Vintage-Chrome-Tv-removebg-preview.png" 
    alt="televisor vintage" 
    class="vintage-tv-frame"
  />
</div>

<style>
/* contenedor principal */
.vintage-tv-wrapper {
  position: relative;
  width: 100%;
  max-width: 480px;
  margin: 20px auto;
}

/* diseño del marco */
.vintage-tv-frame {
  position: relative;
  width: 100%;
  height: auto;
  display: block;
  z-index: 2;
  pointer-events: none;
}

/* pantalla ajustada al hueco retro */
.vintage-tv-screen {
  position: absolute;
  top: 31.5%;
  left: 17.5%;
  width: 52%;
  height: 48%;
  z-index: 1;
  background-color: #000;
  border-radius: 20px / 18px;
  overflow: hidden;
}

/* adaptabilidad del vídeo */
.vintage-tv-screen iframe {
  width: 100%;
  height: 100%;
  border: none;
}
</style>

[ ✦ ] cómo cambiar el vídeo ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─

• localiza la línea del código que contiene src="[https://www.youtube.com/embed/1zpoyNfXpSg](https://www.youtube.com/embed/1zpoyNfXpSg)" 🔍 • reemplaza 1zpoyNfXpSg por el identificador único del vídeo de youtube que prefieras mostrar 🕯️✨

resultado final: un rincón visualmente único para que tus visitantes disfruten de tus selecciones audiovisuales con estilo clásico 📼🕊️

୨୧ Kawaii Cursor Effects ୨୧

 Pequeños detalles para hacer tu cursor más cute

｡･:˚:✧｡･:˚:✧｡･:˚:✧｡･:˚:✧

¿Quieres que tu cursor deje un pequeño rastro mientras recorres tu blog?

Aquí tienes 6 efectos diferentes para darle un toque más cute y personal a tu página. Puedes elegir tu favorito y agregarlo desde:

Blogger → Diseño → Añadir un gadget → HTML/JavaScript

╭─────────────── ୨୧ ───────────────╮

୨୧ 01. Star Sprinkle

Un pequeño rastro de estrellitas que aparece mientras mueves el cursor.

<style>
.cursor-star {
  position: fixed;
  pointer-events: none;
  z-index: 999999;
  font-size: 12px;
  color: #f4b6d2;
  animation: star-fade 0.8s ease-out forwards;
}

@keyframes star-fade {
  0% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }

  100% {
    opacity: 0;
    transform: scale(0.2) rotate(180deg) translateY(15px);
  }
}
</style>

<script>
document.addEventListener("mousemove", function(e) {

  var star = document.createElement("span");

  star.className = "cursor-star";
  star.innerHTML = "✦";

  star.style.left = (e.clientX + 5) + "px";
  star.style.top = (e.clientY + 5) + "px";

  document.body.appendChild(star);

  setTimeout(function() {
    star.remove();
  }, 800);

});
</script>

╰─────────────── ୨୧ ───────────────╯

୨୧ 02. Heart Trail

Pequeños corazones aparecen siguiendo el movimiento del cursor.

<style>
.heart-effect {
  position: fixed;
  pointer-events: none;
  z-index: 999999;
  color: #e9a5c2;
  font-size: 12px;
  animation: heart-fade 1s ease-out forwards;
}

@keyframes heart-fade {
  0% {
    opacity: 1;
    transform: scale(1);
  }

  100% {
    opacity: 0;
    transform: translateY(-20px) scale(0.3);
  }
}
</style>

<script>
document.addEventListener("mousemove", function(e) {

  var heart = document.createElement("span");

  heart.className = "heart-effect";
  heart.innerHTML = "♡";

  heart.style.left = (e.clientX + 5) + "px";
  heart.style.top = (e.clientY + 5) + "px";

  document.body.appendChild(heart);

  setTimeout(function() {
    heart.remove();
  }, 1000);

});
</script>

╭─────────────── ୨୧ ───────────────╮

୨୧ 03. Flower Trail

Un delicado rastro de florecitas para darle un toque romántico al cursor.

<style>
.flower-effect {
  position: fixed;
  pointer-events: none;
  z-index: 999999;
  color: #d9a7bd;
  font-size: 11px;
  animation: flower-fade 1s ease-out forwards;
}

@keyframes flower-fade {
  0% {
    opacity: 1;
    transform: rotate(0deg) scale(1);
  }

  100% {
    opacity: 0;
    transform: translateY(-18px) rotate(90deg) scale(0.2);
  }
}
</style>

<script>
document.addEventListener("mousemove", function(e) {

  var flower = document.createElement("span");

  flower.className = "flower-effect";
  flower.innerHTML = "✿";

  flower.style.left = (e.clientX + 5) + "px";
  flower.style.top = (e.clientY + 5) + "px";

  document.body.appendChild(flower);

  setTimeout(function() {
    flower.remove();
  }, 1000);

});
</script>

╰─────────────── ୨୧ ───────────────╯

୨୧ 04. Sparkle Dust

Pequeños destellos aparecen alrededor del cursor creando un efecto brillante.

<style>
.sparkle-effect {
  position: fixed;
  pointer-events: none;
  z-index: 999999;
  color: #e8b7ca;
  font-size: 10px;
  animation: sparkle-fade 0.7s ease-out forwards;
}

@keyframes sparkle-fade {
  0% {
    opacity: 1;
    transform: scale(0.5);
  }

  50% {
    opacity: 1;
    transform: scale(1.3);
  }

  100% {
    opacity: 0;
    transform: scale(0);
  }
}
</style>

<script>
document.addEventListener("mousemove", function(e) {

  var sparkle = document.createElement("span");

  sparkle.className = "sparkle-effect";
  sparkle.innerHTML = "✧";

  sparkle.style.left = (e.clientX + Math.random() * 12) + "px";
  sparkle.style.top = (e.clientY + Math.random() * 12) + "px";

  document.body.appendChild(sparkle);

  setTimeout(function() {
    sparkle.remove();
  }, 700);

});
</script>

╭─────────────── ୨୧ ───────────────╮

୨୧ 05. Bubble Trail

Pequeñas burbujitas aparecen mientras recorres la página.

<style>
.bubble-effect {
  position: fixed;
  pointer-events: none;
  z-index: 999999;
  color: #e3b4c9;
  font-size: 9px;
  animation: bubble-fade 1.2s ease-out forwards;
}

@keyframes bubble-fade {
  0% {
    opacity: 0.9;
    transform: scale(0.5);
  }

  100% {
    opacity: 0;
    transform: translateY(-25px) scale(1.5);
  }
}
</style>

<script>
document.addEventListener("mousemove", function(e) {

  var bubble = document.createElement("span");

  bubble.className = "bubble-effect";
  bubble.innerHTML = "○";

  bubble.style.left = (e.clientX + Math.random() * 15) + "px";
  bubble.style.top = (e.clientY + Math.random() * 15) + "px";

  document.body.appendChild(bubble);

  setTimeout(function() {
    bubble.remove();
  }, 1200);

});
</script>

╰─────────────── ୨୧ ───────────────╯

୨୧ 06. Sakura Trail

Un pequeño efecto inspirado en los pétalos de sakura.

Esta versión no necesita ninguna imagen externa, así que puedes probarla directamente:

<style>
.sakura-trail {
  position: fixed;
  pointer-events: none;
  z-index: 999999;
  font-size: 15px;
  color: #f3a9c4;
  animation: sakura-float 1.5s ease-out forwards;
}

@keyframes sakura-float {
  0% {
    opacity: 1;
    transform: translate(0, 0) rotate(0deg) scale(1);
  }

  50% {
    opacity: 0.9;
    transform: translate(8px, -15px) rotate(120deg) scale(1.1);
  }

  100% {
    opacity: 0;
    transform: translate(-8px, -40px) rotate(240deg) scale(0.4);
  }
}
</style>

<script>
document.addEventListener("mousemove", function(e) {

  var sakura = document.createElement("span");

  sakura.className = "sakura-trail";
  sakura.innerHTML = "✿";

  sakura.style.left = e.clientX + "px";
  sakura.style.top = e.clientY + "px";

  document.body.appendChild(sakura);

  setTimeout(function() {
    sakura.remove();
  }, 1500);

});
</script>

｡･:˚:✧｡･:˚:✧｡･:˚:✧｡･:˚:✧

୨୧ Personaliza tu efecto

Puedes cambiar los símbolos por otros que combinen con tu blog:

✦  ✧  ☆  ♡  ♥  ✿  ❀  ❁  ❅  ⋆  ˚

También puedes modificar el color, tamaño y velocidad para crear tu propio estilo.

╭─────────────── ୨୧ ───────────────╮

୨୧ Important

No coloques los seis códigos juntos.

Elige solamente uno y agrégalo como gadget HTML/JavaScript.

Si ya tienes un efecto de cursor instalado, estos códigos pueden funcionar junto con tu cursor personalizado porque no reemplazan el cursor, solamente agregan el rastro alrededor de él.

╰─────────────── ୨୧ ───────────────╯

୨୧ ─── ♡ ─── ꕤ ─── ♡ ─── ୨୧

Create your own cute cursor

Un pequeño detalle puede hacer que tu blog se sienta mucho más personal.

Elige tu efecto favorito, cambia los detalles y crea tu propio cursor aesthetic.

♡ ୨୧ ₊˚⊹ happy blogging ⊹˚₊ ୨୧ ♡

♡ Recursos cute para decorar tu blog de Blogger

୨୧ Cómo crear un cursor personalizado para Blogger ୨୧

¿Quieres darle un toque más cute y personalizado a tu blog?

En este tutorial vamos a crear un cursor personalizado utilizando Canva + Postimages + Blogger.

｡･:˚:✧｡･:˚:✧｡･:*˚:✧

୨୧ 01. Diseña tu cursor

Primero crea tu cursor en Canva.

Puedes hacer un moño, una flor, un personaje, un corazón o cualquier diseño que combine con tu blog.

Si quieres que tenga movimiento, crea una pequeña animación y descárgala como GIF.

♡ Tip: utiliza un fondo transparente para que el resultado se vea más bonito.

╭─────────────── ୨୧ ───────────────╮

୨୧ 02. Sube tu GIF

Ahora entra a Postimages y sube tu GIF.

Después copia el Direct Link de la imagen.

Debe verse parecido a:

https://i.postimg.cc/xxxxx/mi-cursor.gif

╰─────────────── ୨୧ ───────────────╯

୨୧ 03. Agrégalo a Blogger

Ve a:

Blogger → Diseño → Añadir un gadget → HTML/JavaScript

Pega este código:

<style>
html, body, a, button, input, textarea, select {
  cursor: none !important;
}

#gif-cursor {
  position: fixed;
  width: 70px;
  height: 70px;
  pointer-events: none;
  z-index: 999999;
  left: 0;
  top: 0;
}
</style>

<img id="gif-cursor"
src="TU-DIRECT-LINK-AQUI"
alt="cursor" />

<script>
document.addEventListener("mousemove", function(e) {
  var cursor = document.getElementById("gif-cursor");

  cursor.style.left = e.clientX + "px";
  cursor.style.top = e.clientY + "px";
});
</script>

｡･:˚:✧｡･:˚:✧｡･:˚:✧｡･:˚:✧

୨୧ Personaliza tu cursor

Solo tienes que cambiar:

TU-DIRECT-LINK-AQUI

por el Direct Link de tu propio GIF.

También puedes cambiar el tamaño modificando:

width: 70px;
height: 70px;

Por ejemplo, 50px, 80px o 100px.

╭─────────────── ୨୧ ───────────────╮

♡ Canva → crea tu diseño
♡ Postimages → sube tu GIF
♡ Blogger → pega el código
♡ Cambia el enlace → ¡listo!

╰─────────────── ୨୧ ───────────────╯

Espero que este pequeño tutorial te ayude a personalizar tu blog y hacerlo mucho más tuyo.

୨୧ ₊˚⊹ ♡ ⊹˚₊ ୨୧

╭─────────────── ୨୧ ───────────────╮

୨୧ Ideas para tus propios cursores

Una vez que aprendas el proceso puedes crear diferentes cursores para cada estilo de blog.

`୨୧` Coquette

`♡` Kawaii

`ꕤ` Floral

`☆` Y2K

`☾` Dark aesthetic

`𐙚` Fairycore

`⊹` Pastel

`꒰ა ໒꒱` Angelcore

`⌒` Cute minimal

`₊˚` Pink aesthetic

También puedes crear cursores especiales para diferentes épocas o diseños de tu blog.

╰─────────────── ୨୧ ───────────────╯

｡･:*˚:✧｡･:*˚:✧｡･:*˚:✧｡･:*˚:✧

୨୧ Último consejo

La mejor parte de personalizar Blogger es que no necesitas utilizar exactamente los mismos recursos que otras personas.

Puedes crear tus propios elementos desde cero y combinar diferentes detalles para conseguir una estética que represente tu blog.

Un cursor personalizado puede parecer un detalle pequeño, pero combinado con separadores, fondos, botones, GIFs y otros recursos puede cambiar completamente la apariencia de una página.

Así que abre Canva, crea tu diseño, súbelo a Postimages y dale a tu blog ese pequeño detalle que lo hará sentir completamente tuyo.

`♡ ୨୧ ₊˚⊹ 𝒄𝒖𝒕𝒆 𝒃𝒍𝒐𝒈 ୨୧ ♡`

🌷 Ahora viene mi parte favorita: recursos para decorar el blog

Si te gustan los blogs con estética kawaii, cute, pixel, coquette, Y2K o estilo old web, tienes que conocer Neocities.

Neocities – páginas con recursos gráficos

Neocities es básicamente un lugar lleno de páginas personales y muchas de ellas tienen recursos hechos para decorar páginas web.

Yo estuve mirando la sección de graphics y encontré varias páginas que me parecieron súper bonitas para sacar ideas o encontrar recursos.

Cute.gif

cute.gif – recursos cute y Sanrio

Esta me llamó la atención porque tiene etiquetas de Sanrio, graphics, gifs, sozai y cute

Si estás buscando pequeños gifs o imágenes para darle vida a tu blog, definitivamente vale la pena pasar por aquí. Puedes encontrar cositas que quedan muy bien entre secciones, al lado de un texto o simplemente como decoración.

🩷 Betty's Graphics

Betty's Graphics

Esta es otra de las que guardaría. Aparece dentro de la sección de graphics de Neocities y está enfocada precisamente en gráficos y gifs. Además, tiene una cantidad enorme de visitas, así que es de esas páginas que dan ganas de quedarse mirando todo.

Si te gusta la estética de las páginas antiguas de internet, aquí puedes encontrar bastante inspiración.

✨ lukovrurshldr

Lukovrurshldr – graphics, gifs y glitters

Esta me gustó especialmente si estás buscando una estética más kawaii. En Neocities aparece con las etiquetas graphics, dolls, gifs, glitters y kawaii, así que tiene exactamente ese tipo de recursos que pueden quedar bonitos en un blog. Los glitters y gifs pequeños son perfectos para poner entre una sección y otra.

 🌸 Kalachuchi

Kalachuchi – cute graphics y resources

Otra página que encontré fue Kalachuchi. Está etiquetada como personal, art, graphics, cute y resources, por lo que también es una buena opción si estás buscando pequeños recursos para decorar. Dale a la tercera opción para ir a la página antigua.

💗 Blinkies

Blinkie World

Y si te gustan los blinkies, tienes que mirar esta página. Los blinkies son esas pequeñas imágenes animadas que normalmente tienen una frase, palabra o diseño y quedan súper bien en las barras laterales o como decoración.

En la sección de graphics de Neocities aparece precisamente como un sitio de blinkies y resources

୨୧ ¿Y los separadores?

Los separadores son probablemente una de las cosas más fáciles de agregar y hacen que una entrada se vea mucho más bonita.

Puedes buscar imágenes pequeñas y alargadas, por ejemplo:

♡ flores

♡ corazones

♡ moños

♡ estrellas

♡ mariposas

♡ Hello Kitty

♡ ositos

♡ glitter

♡ pixel art

Después simplemente agregas la imagen dentro de tu entrada de Blogger.

También puedes usar un separador entre cada sección de tus entradas para que el texto no se vea como un bloque enorme.

Por ejemplo:

🌸──────────────🌸

o directamente utilizar una imagen cute como separador.

🧁 Algunas ideas para decorar tu blog

Una vez empiezas a encontrar estos recursos, puedes hacer muchísimas combinaciones.

Por ejemplo, puedes tener:

un cursor personalizado

separadores entre las secciones

blinkies en la barra lateral

pequeños gifs decorativos

botones para tus redes

pixel art alrededor de las entradas

pequeños stamps o stickers

Y no necesitas poner absolutamente todo.

De hecho, creo que queda mucho más bonito cuando escoges unos cuantos recursos que combinen entre sí y mantienes una misma estética.

♡ Mi combinación favorita

Si quieres hacer un blog con una estética cute/kawaii, yo empezaría con algo así:

Cursor: Cursors-4U

Separadores: flores, corazones o moños

Decoración: pequeños gifs

Barra lateral: 2 o 3 blinkies

Detalles: algunos píxeles o stickers

Colores: rosa, blanco y tonos pastel

Y poco a poco vas agregando más cosas.

Lo bonito de este tipo de blogs es justamente ir encontrando recursos y probar cómo se ven. A veces encuentras una imagen que ni siquiera estabas buscando y termina siendo perfecta para tu página. ♡

> Importante: antes de utilizar un recurso, revisa las condiciones que indique cada creador. Algunas páginas permiten el uso libre, mientras que otras pueden pedir crédito o tener reglas específicas.

Espero que esta pequeña lista te sirva para empezar a decorar tu blog. 🌷

Y si encuentro más páginas bonitas de recursos, probablemente haga otra entrada porque hay DEMASIADAS cosas lindas escondidas en internet. 🎀