¿Cómo poner un iPod en tu blog?

Otro día más en viernes de tutoriales, por petición popular, voy a explicar cómo hacer este gadget en forma de iPod que suena de verdad:

Como con todos los códigos, te recomiendo copiar el que te pongo y pegarlo en notas para personalizar los colores, las canciones y los tamaños:

<link href="https://fonts.googleapis.com/css2?family=Slackey&display=swap" rel="stylesheet" />

<div class="ipod-widget">

  <div class="ipod">

    <div class="screen">

      <img id="cover" src="" alt="cover" />

      <p id="track-title">Cargando...</p>

    </div>

    <div class="controls">

      <button id="prev" class="ipod-btn">⏮</button>

      <button id="play" class="ipod-btn">

        <span class="play-icon">▶</span>

      </button>

      <button id="next" class="ipod-btn">⏭</button>

    </div>

    <div id="player" style="display:none;"></div>

  </div>

</div>

<style>

/* SOLO afecta al widget */

.ipod-widget {

  all: initial;

  display: block;

}

/* contenedor principal */

.ipod-widget .ipod {

  width: 00px;

  height: 00px;

  padding: 15px;

  border-radius: 20px;

  background: #f5f5f5;

  box-shadow: inset -4px -4px 8px #fff, inset 4px 4px 8px #ccc;

  text-align: center;

  font-family: Arial;

}

/* pantalla */

.ipod-widget .screen {

  background: #00000;

  border-radius: 12px;

  height: 00px;

  display:flex;

  flex-direction: column;

  align-items:center;

  justify-content:center;

  gap: 10px;

  padding: 10px;

}

/* imagen */

.ipod-widget .screen img {

  width: 00px;

  height: 00px;

  object-fit: cover;

  border-radius: 10px;

}

/* texto */

.ipod-widget .screen p {

  font-family: 'Slackey', cursive;

  font-size: 00px;

  color: #00000;

  margin: 0;

}

/* controles */

.ipod-widget .controls {

  display: flex;

  justify-content: space-around;

  margin-top: 00px;

}

/* SOLO botones del iPod (NO global) */

.ipod-widget .ipod-btn {

  border: none;

  background: #ddd;

  border-radius: 50%;

  width: 00px;

  height: 00px;

  cursor: pointer;

  display:flex;

  align-items:center;

  justify-content:center;

  transition: 0.2s;

}

/* icono play */

.ipod-widget .play-icon {

  font-size: 00px;

  line-height: 1;

}

.ipod-widget .ipod-btn:active {

  transform: scale(0.9);

}

</style>

<script src="https://www.youtube.com/iframe_api"></script>

<script>

let player;

let current = 0;

const playlist = [

  {

    title: "TÍTULO",

    id: "ID_VÍDEO",

    cover: "URL_IMAGEN"

  },

  {

    title: "TÍTULO",

    id: "ID_VÍDEO",

    cover: "URL_IMAGEN"

  },

  {

    title: "TÍTULO",

    id: "ID_VÍDEO",

    cover: "URL_IMAGEN"

  },

];

function onYouTubeIframeAPIReady() {

  player = new YT.Player("player", {

    height: "0",

    width: "0",

    videoId: playlist[0].id,

    playerVars: {

      autoplay: 0,

      controls: 0

    }

  });

  updateUI();

}

function updateUI() {

  document.getElementById("track-title").textContent = playlist[current].title;

  document.getElementById("cover").src = playlist[current].cover;

}

document.getElementById("play").onclick = () => {

  const state = player.getPlayerState();

  if (state !== 1) {

    player.playVideo();

  } else {

    player.pauseVideo();

  }

};

document.getElementById("next").onclick = () => {

  current = (current + 1) % playlist.length;

  player.loadVideoById(playlist[current].id);

  updateUI();

};

document.getElementById("prev").onclick = () => {

  current = (current - 1 + playlist.length) % playlist.length;

  player.loadVideoById(playlist[current].id);

  updateUI();

};

</script>

Este sería el código customizable, recuerda no dejarte ningún espacio porque son MUY importantes. Vamos a ir juntas paso a paso para no perder nada de lo que hay que hacer:

El primer "width: 00px; height: 00px;" que encontramos son para el tamaño del gadget, en mi caso es bastante grande pues lo tengo a 300px por 350px pero lo puedes poner más pequeño o más grande según lo que necesitas.

En la parte de pantalla encontramos "background: #00000;" que es el color de la pantallita del iPod. Para ver qué color quieres puedes mirarlo en HTMLcolorcodes.

Siguiendo en la parte de pantalla encontramos las medidas "height: 00px;" en la que se calcula la altura, yo lo tengo en 180px que es un poco más grande de la mitad del iPod, es lo que recomiéndo para que sea realista.

Siguiendo por la parte de la imagen encontramos estas medidas "width: 00px; heigth: 00px;" que calcula el tamaño de la foto que pongamos dentro de la pantalla, simplemente con que sea más pequeño que la pantalla, ya ahí eliges como de grande lo quieres, yo lo tengo en 140px por 140px.

Para la parte del texto tenemos estos apartados "font-family: 'Slackey', cursive; font-size: 00px; color: #00000;" en la que la primera parte es la fuente de la letra (para esta parte tienes que poner el nombre completo de la fuente que quieras), en la segunda parte es el tamaño de la letra, yo lo tengo en 14px, y en la última es el color del texto.

En la parte de los botones tenemos el tamaño "width: 00px; heigth: 00px;" es importante que pongas el mismo tamaño en ambos para que se vean los botones de forma circular y no ovalada, yo lo tengo a 80px.

Vamos ahora con el tamaño del botón del play en "font-size: 00px;", yo lo tengo a 40px.

La última parte y lo que va a permitir poner música es la parte de: 

{

    title: "TÍTULO",

    id: "ID_VÍDEO",

    cover: "URL_IMAGEN"

  },

En el título debes escribir el nombre de la canción, donde pone ID del video tienes que poner SOLO una parte del URL del video musical que quieras poner, por ejemplo: en la canción Nobody's Son de Sabrina Carpenter el URL completo es https://youtu.be/hE2DLtuxcUU?si=1HHHRBYFGxZQAYxg pero el ID es hE2DLtuxcUU (lo que entra entre el / y el ?).

Si quieres añadir o quitar canciones deberás añadir o quitar desde el { hasta el siguiente }, y para cerrar todo debes conservar el ]; es MUY importante.

Para la parte de la imagen simplemente copias una imagen que quieras de Pinterest o donde quieras y lo pones por lo que no hace falta que sea directamente algo relacionado con la canción, aunque sería lo suyo.

Una vez editado todo tu código cópialo y ve a la parte de Diseño en Blogger, busca el sidebar en el que quieras añadir tu gadget y dale a "añadir un gadget". Cuando se desplieguen las opciones dale al que pone HTML/JavaScript y pega tu código editado en la parte de contenido. Dale a guardar y para ver si ha quedado bien dale al ojo que sale en la pantalla de Diseño abajo a la derecha. Una vez te hayas gustado los colores y los tamaños que quieras en tu iPod que no se te olvide darle al botón de guardar que esta al lado del ojo de antes.

Pues ya estaría el tutorial, espero que te haya servido y no dudes en dejar en los comentarios tus preguntas por si necesitas alguna ayuda. Muchas gracias por leer!! Nos vemosss