Holii, tengo esta entrada en borradores hace un bueeeeeeeen tiempo jajjjaj
Estaré dejando un par de tutoriales y códigos para que puedan decorar sus blogs + algunas explicaciones para que puedan personalizarlos a su gusto 😄
︵‿︵‿୨♡୧‿︵‿︵
¿Cómo tener un cursor personalizado?
Para hacerlo yo use esta página https://www.cursors-4u.com/#google_vignette peeeeero, en su momento estaba la versión antigua. Actualmente no he usado el sitio actualizado, pero les recomiendo que lo exploren para personalizar sus cursores, por lo que vi, incluye el código y abajo un tutorial de como insertarlo en blogger!
¿Cómo poner este CD que gira?
Añadimos un gadget de HTML (deben fijarse de añadir el gadget/ pegar el código donde quieran que aparezca el CD) y pegamos este código:
<style>
.cd-container {
display: flex;
justify-content: center;
margin: 20px 0;
}
.cd {
width: 140px;
height: 140px;
border-radius: 50%;
background:
radial-gradient(circle at center,
#ffffff 0%,
#ffffff 26%, /* aro blanco */
#ffd6e8 27%,
#f7a8c8 40%,
#f4b6d2 55%,
#e88bb4 70%,
#d96a9f 85%,
#c94c84 100%);
position: relative;
animation: spin 9s linear infinite;
box-shadow: 0 0 12px rgba(220,120,170,0.6);
}
/* agujero real */
.cd::after {
content: "";
width: 30px;
height: 30px;
background: #fff;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
}
/* texto dentro del aro blanco */
.song-name {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 12px;
color: #555;
text-align: center;
width: 80px;
font-family: "Georgia", serif;
z-index: 3;
pointer-events: none;
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
</style>
<div class="cd-container">
<div class="cd">
<div class="song-name">
The Promise
</div>
</div>
</div>
Cosas a tener en cuenta:
⤷ La parte del código que determina el color del CD es:
radial-gradient(circle at center,
#ffffff 0%,
#ffffff 26%, /* aro blanco */
#ffd6e8 27%,
#f7a8c8 40%,
#f4b6d2 55%,
#e88bb4 70%,
#d96a9f 85%,
#c94c84 100%);
Para cambiarlo, tienen que cambiar los códigos de cada color
⤷ La línea del código que determina la velocidad de giro es: animation: spin 9s linear infinite;
Si quieren que gire más rápido, deben bajar el número, y si quieren que gire más lento, aumentar el número
⤷ La línea del código que determina el tamaño del CD es:
width: 140px;
height: 140px
Si quieren agrandarlo, tienen que aumentar ambos valores. En caso de aumentarlo bastante quizás también quieran agrandar la parte blanca, en ese caso deben aumentar los valores de esta parte del código:
width: 30px;
height: 30px;
⤷ La línea del código que determina el nombre de la canción es: The Promise
Así que para cambiarla solo tienen que escribir otra en su lugar
¿Como hacer esta cajita?
Nuevamente añadimos un gadget de HTML (deben fijarse de añadir el gadget/ pegar el código donde quieran que aparezca el CD) y pegamos este código:
<style>
.faves-card {
background-color: #fff0f5;
padding: 16px;
border-radius: 16px;
box-shadow: 0 4px 10px rgba(0,0,0,0.12);
max-width: 220px;
margin: 16px auto;
}
.faves-card h3 {
margin-top: 0;
font-size: 16px;
}
.faves-card ul {
list-style: none;
padding-left: 0;
margin: 10px 0 0;
}
.faves-card li {
margin-bottom: 8px;
font-size: 14px;
}
</style>
<div class="faves-card">
<h3>my faves ♡</h3>
<ul>
<li>𐙚 Frutillas con crema</li>
<li>𐙚 Percy Jackson</li>
<li>𐙚 Días de playa</li>
<li>𐙚 Tecito</li>
</ul>
</div>
La linea de código en azul es la que determina el color de la cajita, si quieren cambiarlo, deben modificar eso
Por otro lado, para cambiar las cositas tienen que cambiar lo que esta subrayado en amarillo :)
︵‿︵‿୨♡୧‿︵‿︵
Por hoy llego hasta acá, espero que les sirva!!
