⋆˚꩜｡𝓟𝓐𝓥𝓞𝓓𝓔𝓜𝓞𝓒𝓞⋆˚꩜｡: 𐔌՞. .՞𐦯 ƭµƭσɾเαℓ ૮σℓε૮૮เσ́ɳ ∂ε ѵเɳเℓσร.ᐟˎˊ˗

Holis chikis¡! Hoy, en domingo de tutoriales, os traigo un código que me ha pedido una unidad de persona pero que creo que es una pasada.

Estoy hablando de la colección de vinilos¡! Perfecta para aquellos blogs dirigidos a hablar de música o simplemente para aquellas personas que quieran exponer un cachito de sus personalidades hechas música.

Como siempre os voy a dejar por aquí el código para que lo copies y peguéis en notas o en el sidebar para modificarlo (recordad no quitar ninguno de los espacios y huecos en blanco para que os funcione):

</div>

</div>

</div>

</div>

</div>

<style>

.coleccion-vinilos {

display:flex;

align-items:flex-end;

height:80px;

padding:4px 10px 0 10px;

margin-top:-5px;

}

/* CADA DISCO */

.vinilo {

width:80px;

height:80px;

margin-left:-50px;

position:relative;

cursor:pointer;

transition:0.4s ease;

}

/* EL PRIMERO NO SE SUPERPONE */

.vinilo:first-child {

margin-left:0;

}

/* PORTADA CUADRADA */

.vinilo img {

width:80px;

height:80px;

object-fit:cover;

border-radius:4px;

box-shadow:2px 2px 5px rgba(0,0,0,.25);

transition:0.4s ease;

}

/* AL PASAR EL CURSOR */

.vinilo:hover {

transform:translateY(-15px);

z-index:100;

}

.vinilo:hover img {

transform:scale(1.25);

}

/* NOMBRE DEL DISCO */

.vinilo::after {

content:attr(data-nombre);

position:absolute;

bottom:-28px;

left:50%;

transform:translateX(-50%);

background:#fff4c7;

color:#704b4b;

font-family:Crushed,cursive;

font-size:13px;

padding:3px 7px;

border-radius:6px;

white-space:nowrap;

opacity:0;

pointer-events:none;

transition:0.3s;

z-index:200;

}

.vinilo:hover::after {

opacity:1;

}

</style>

Perfes, pues una vez que tenéis el código os voy a decir qué modificaciones tenéis que hacer.

1. Para poder modificar las portadas y los títulos os tenéis que ir al inicio donde os encontraréis varios cachos del código en el que pone esto:

</div>

Aquí modificaréis "Nombre de disco 1" y lo cambiaréis por el título de vuestro vinilo y/o nombre del artista. En la parte de "URL-PORTADA-1" deberéis poner la URL de la foto teniendo cuidado de no borrar las comillas porque sino no funcionará. Os recomiendo que la foto la pongáis en una entrada de blogger que no vayáis a publicar y copiéis la URL de ahí ya que algunas URL de internet no van a funcionar.

2. En el caso de que queráis añadir más vinilos (copiando alguno de los bloques para una portada y título y pegándola después de la última) podéis modificar la parte que se ve de los vinilos aquí:

/* CADA DISCO */

.vinilo {

width:80px;

height:80px;

margin-left:-50px;

position:relative;

cursor:pointer;

transition:0.4s ease;

}

En concreto nos vamos a fijar donde pone "margin-left: -50px". Sin quitar el "-" modificamos el número. Cuanto mayor sea más se va a ver por lo que, si quieres que se vea menos, ve probando números más pequeños.

3. Si lo que queréis es modificar el cartelito que sale con el nombre del disco a otro color o la letra tenéis que iros al final del código:

/* NOMBRE DEL DISCO */

.vinilo::after {

content:attr(data-nombre);

position:absolute;

bottom:-28px;

left:50%;

transform:translateX(-50%);

background:#fff4c7;

color:#704b4b;

font-family:Crushed,cursive;

font-size:13px;

padding:3px 7px;

border-radius:6px;

white-space:nowrap;

opacity:0;

pointer-events:none;

transition:0.3s;

z-index:200;

}

En "font-family: Crushed,cursive;" tenéis que cambiar "Crushed" por la tipografía que queráis pero poniéndola completa ya que sino no funciona.

Si lo que queréis cambiar es el color del fondo tenéis que iros a "background:#fff4c7" y cambiar el código de color por otro. Para elegir el código os recomiendo "HTML color codes" para facilitaros un poco la cosa.

Y creo que eso es todo. Espero que os haya gustado¡!

Hasta el próximo tutorial chikis.

Atte. Vivi.

⋆˚꩜｡𝓟𝓐𝓥𝓞𝓓𝓔𝓜𝓞𝓒𝓞⋆˚꩜｡

13 septiembre 2026

𐔌՞. .՞𐦯 ƭµƭσɾเαℓ ૮σℓε૮૮เσ́ɳ ∂ε ѵเɳเℓσร.ᐟˎˊ˗

1 comentario: