Helou, hoy vengo con un tuto, y es el del Ipod, quiero ser lo más breve y clara posible así que empezaré de una con la explicación.

1-Copia este código sin borrar espacios.

</div>

</div>

</div>

<style>

.ipod-container{

width:305px;

height:505px;

background:linear-gradient(145deg,#EDFBFF,#E5F9FF);

border-radius:38px;

margin:20px auto;

padding:15px;

box-sizing:border-box;

font-family:Arial,sans-serif;

display:flex;

flex-direction:column;

align-items:center;

border:1px solid rgba(255,255,255,.75);

box-shadow:

0 8px 18px rgba(220,150,180,.22),

inset 0 1px 5px rgba(255,255,255,.8);

transform:perspective(800px) rotateX(2deg);

}

/* Pantalla */

.ipod-screen{

width:270px;

height:275px;

background:#fff;

border-radius:20px;

overflow:hidden;

display:flex;

flex-direction:column;

align-items:center;

box-shadow:inset 0 1px 6px rgba(0,0,0,.08);

}

.ipod-screen img{

width:270px;

height:275px;

object-fit:cover;

margin-top:10px;

border-radius:12px;

}

.song-info{

width:100%;

height:50px;

text-align:center;

padding-top:5px;

}

#song-title{

font-size:17px;

font-weight:bold;

color:#333;

}

#song-artist{

font-size:14px;

color:#888;

}

/* Rueda */

.ipod-wheel{

margin-top:12px;

width:125px;

height:125px;

background:#fff;

border-radius:50%;

position:relative;

box-shadow:0 4px 10px rgba(220,150,180,.18);

}

/* Botones */

.ipod-btn{

position:absolute;

border:none !important;

background:transparent !important;

box-shadow:none !important;

outline:none !important;

cursor:pointer;

color:#777;

padding:0;

font-weight:bold;

font-family:Arial,sans-serif;

z-index:3;

appearance:none;

-webkit-appearance:none;

}

.prev{

left:9px;

top:50%;

transform:translateY(-50%);

font-size:18px;

}

.next{

right:9px;

top:50%;

transform:translateY(-50%);

font-size:18px;

}

.ipod-play{

position:absolute;

left:50%;

top:50%;

transform:translate(-50%,-50%);

font-size:25px;

background:transparent !important;

border:none !important;

box-shadow:none !important;

color:#777;

z-index:4;

}

.wheel-center{

position:absolute;

width:42px;

height:42px;

left:50%;

top:50%;

transform:translate(-50%,-50%);

background:#ffffff !important;

border-radius:50%;

border:none !important;

box-shadow:none !important;

z-index:2;

}

</style>

let songs = [

{

id:"",

img:"",

title:"",

artist:""

{

id:"",

img:"",

title:"",

artist:""

{

id:"",

img:"",

title:"",

artist:""

{

id:"",

img:"",

title:"",

artist:""

{

id:"",

img:"",

title:"",

artist:""

}

];

let current = 0;

let player;

let playing = false;

function onYouTubeIframeAPIReady(){

player = new YT.Player('youtube-player',{

height:'0',

width:'0',

videoId:songs[0].id,

events:{

'onReady':function(){

loadSong();

}

});

}

function loadSong(){

document.getElementById("song-image").src = songs[current].img;

document.getElementById("song-title").innerHTML = songs[current].title;

document.getElementById("song-artist").innerHTML = songs[current].artist;

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

player.pauseVideo();

playing = false;

}

function playPause(){

if(playing){

player.pauseVideo();

playing = false;

}else{

player.playVideo();

playing = true;

}

function nextSong(){

current++;

if(current >= songs.length){

current = 0;

}

loadSong();

}

function previousSong(){

current--;

if(current < 0){

current = songs.length - 1;

}

loadSong();

}

</script>

</div>

2- Personaliza tu iPod

Lo primero que encontrarás son los botones del reproductor:

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

<button class="ipod-btn ipod-play">▶</button>

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

Si quieres cambiar los iconos, simplemente borra el símbolo y escribe el que prefieras. Incluso puedes utilizar texto o emojis si así lo deseas.

Ahora empezará el CSS, que es donde se personaliza prácticamente toda la apariencia del iPod.

Lo primero será:

.ipod-container{

  width:305px;

  height:505px;

Aquí modificas el tamaño completo del iPod. width corresponde al ancho y height corresponde al alto.

Recuerda que debe ser un poco más pequeño que tu sidebar para que no sobresalga del blog. Si quieres comprobar cuánto mide tu sidebar puedes ir a Tema → Personalizar → Ajustar ancho.

Un poco más abajo encontrarás:

background:linear-gradient(...);

Aquí modificas el color del cuerpo del iPod. Puedes utilizar un color sólido: background:#ffffff; o cualquier degradado que prefieras.

Más abajo verás: border-radius:38px;

Aquí cambias qué tan redondeadas serán las esquinas del iPod. Entre mayor sea el número, más redondeadas se verán.

También encontrarás:

border:...

Aquí puedes cambiar el borde o eliminarlo por completo.

Después aparecerá:

box-shadow:...

Esto controla todas las sombras del iPod. Puedes modificarlas o eliminarlas si prefieres un diseño más plano.

La siguiente sección será la pantalla:

.ipod-screen{

  width:270px;

  height:275px;

Aquí cambias únicamente el tamaño de la pantalla.

Más abajo encontrarás:

background:#fff; Ese será el color de fondo de la pantalla.

También podrás modificar:

border-radius:20px;

Para hacer la pantalla más cuadrada o más redondeada.

Después encontrarás:

.ipod-screen img{

  width:270px;

  height:275px;

Aquí cambias el tamaño que tendrá la imagen.

Lo recomendable es que tenga exactamente las mismas medidas que la pantalla para que ocupe todo el espacio correctamente, pero puedes hacerlo más pequeño si gustas.

También encontrarás:

object-fit:cover;

Si lo dejas como cover, la imagen llenará toda la pantalla. Si lo cambias por contain, la imagen completa será visible aunque deje espacios vacíos alrededor.

Más abajo encontrarás el título:

#song-title

Aquí podrás cambiar:

tamaño del texto (font-size) fuente (font-family, si decides añadir una) color (color) y grosor (font-weight)

Después aparecerá:

#song-artist

Aquí modificarás exactamente lo mismo, pero únicamente para el nombre del artista.

La siguiente sección será:

.ipod-wheel

Aquí modificas toda la rueda del iPod, o sea, puedes cambiar el ancho, el alto, el color, las sombras y la separación respecto a la pantalla.

Después encontrarás:

.ipod-btn

.wheel-center

Con los cuales modificas lo mismo pero de manera individual de cada botón o parte de la rueda completa.

Después del CSS empezará el JavaScript.

Lo primero que encontrarás será:

let songs = [

{

id:"",

img:"",

title:"",

artist:""

}

];

Aquí se encuentran todas las canciones del reproductor, cada bloque corresponde a una canción distinta.

id:""

Aquí debes pegar el ID del video de YouTube, para ello debes buscar en enlace y copiaras únicamente lo que va entre / y ?.

Por ejemplo, si el enlace es: https://youtu.be/P95TS3A2jEc?si=yg9sqaSGH68ZE8eU lo que está resaltado es lo que debes pegar entre las comillas. (Reecomiendo el video, por cierto)

img:""

Aquí pegas la URL de la imagen que aparecerá en la pantalla del iPod.

Puede ser una imagen de Pinterest, Imgur, Postimages o cualquier página que te proporcione un enlace directo.

title:""

Aquí escribes el nombre de la canción.

artist:""

Aquí escribes el nombre del artista.

Finalmente, si quieres añadir o quitar canciones solo debes copiar o eliminar este bloque completo:

{

id:"",

img:"",

title:"",

artist:""

},

Cada bloque representa una canción, si quieres más canciones, pega otro bloque debajo, si quieres menos, simplemente elimínalo.

Recuerda: todas las canciones llevan una coma al final, excepto la última.

3- Ponlo en tu blog

Ya con todo personalizado, solo queda instalar el gadget, para ello, ve a Diseño → Agregar un gadget → HTML/JavaScript. En la parte de Contenido pega el código completo, procura no borrar ningún carácter, llave o símbolo porque podría afectar el funcionamiento del reproductor.

¡Y listo! Tu iPod ya estará funcionando dentro de tu blog.

Eso fue todo chiques. Espero que este tutorial les haya servido muchísimo y hayan podido personalizar su iPod sin problemas. Si les surge cualquier duda o encuentran algún error, pueden dejarme un comentario y con muchísimo gusto intentaré ayudarlos.