Buenas chicas a un nuevo viernes de tutoriaaaaaleeeeeessss!!!
He ido añadiendo cositas por lo que aquí estamos de nuevo con un nuevo tutorial JIJIJIJI
Hoy toca explicar cómo hacer este HERMOSO gadget de serie y canción actual:
Sé que muchos me habéis pedido este tutorial así que aquí lo tenéis. Primero de todo os dejaré el código pero tengo que avisar que hay muchos colores que deben ser el mismo por lo que lo pondré de diferentes colores para que lo identifiquéis. Recuerda copiar el código y pegarlo en notas para modificarlo más fácilmente:
<div class="cyber-widget">
<div class="cyber-grid"></div>
<div class="cw-tabs">
<button class="cw-tab active" onclick="openCW(event,'serie')">SERIE</button>
<button class="cw-tab" onclick="openCW(event,'cancion')">CANCIÓN</button>
</div>
<!-- SERIE -->
<div id="serie" class="cw-content active">
<img class="cw-cover" src="URL_IMAGEN_SERIE" />
<div class="cw-info">
<div class="cw-title">
NOMBRE DE LA SERIE
</div>
<div class="cw-subtitle">
Temporada X
</div>
<div class="cw-progress">
<div class="cw-bar">
<div class="cw-fill" style="width:00%;"></div>
</div>
<div class="cw-percent">
00% visto
</div>
</div>
<div class="cw-status">
EN EMISIÓN
</div>
</div>
</div>
<!-- CANCIÓN -->
<div id="cancion" class="cw-content">
<img class="cw-cover" src="URL_IMAGEN_CANCIÓN" />
<div class="cw-info">
<div class="cw-title">
NOMBRE DE LA CANCIÓN
</div>
<div class="cw-subtitle">
ARTISTA
</div>
<div class="cw-listens">
<span class="listen-number">00</span>
escuchas
</div>
<div class="equalizer">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="cw-status">
EN BUCLE
</div>
</div>
</div>
</div>
<style>
.cyber-widget{
width:320px;
position:relative;
overflow:hidden;
background:rgba(255, 232, 249,.90);
backdrop-filter:blur(18px);
border:2px solid #ff5db8;
border-radius:24px;
box-shadow:
0 0 12px #ff69c8,
0 0 30px rgba(255,20,147,.45),
0 8px 30px rgba(255,20,147,.18);
font-family:'Gruppo',sans-serif;
}
/* brillo del borde */
.cyber-widget::before{
content:"";
position:absolute;
top:-50%;
left:-50%;
width:200%;
height:200%;
background:linear-gradient(
120deg,
transparent 35%,
rgba(255,255,255,.55) 50%,
transparent 65%
);
animation:borderGlow 8s linear infinite;
pointer-events:none;
}
@keyframes borderGlow{
0%{
transform:translateX(-45%) translateY(-45%) rotate(0deg);
}
100%{
transform:translateX(45%) translateY(45%) rotate(360deg);
}
}
/* cuadrícula */
.cyber-grid{
position:absolute;
inset:0;
background-image:
linear-gradient(rgba(255,105,180,.07) 1px,transparent 1px),
linear-gradient(90deg,rgba(255,105,180,.07) 1px,transparent 1px);
background-size:24px 24px;
pointer-events:none;
}
/* pestañas */
.cw-tabs{
display:flex;
position:relative;
z-index:2;
background:rgba(255,236,247,.7);
border-bottom:1px solid #ffb8dc;
}
.cw-tab{
flex:1;
padding:13px;
border:none;
background:none;
cursor:pointer;
font-family:'Syncopate',sans-serif;
font-size:12px;
letter-spacing:1px;
color:#ff1493;
transition:.35s;
}
.cw-tab:hover{
background:rgba(255,190,225,.35);
}
.cw-tab.active{
background:linear-gradient(
90deg,
#ffd5eb,
#ffb7df);
color:#ff1493;
box-shadow:
0 0 14px #ff69c8 inset,
0 0 18px #ff69c8;
}
/* contenido */
.cw-content{
display:none;
align-items:center;
gap:18px;
padding:20px;
position:relative;
z-index:2;
animation:fade .4s;
}
.cw-content.active{
display:flex;
}
@keyframes fade{
from{
opacity:0;
transform:translateY(8px);
}
to{
opacity:1;
transform:none;
}
}
/* imagen */
.cw-cover{
width:95px;
height:135px;
object-fit:cover;
border-radius:16px;
border:2px solid #ff8fcb;
box-shadow:
0 0 10px #ff69c8,
0 0 20px rgba(255,20,147,.35);
}
/* textos */
.cw-info{
flex:1;
}
.cw-title{
font-size:24px;
color:#ff1493;
margin-bottom:5px;
text-shadow:0 0 8px #ff9bd8;
}
.cw-subtitle{
font-size:15px;
color:#ff4dac;
margin-bottom:18px;
}
/* barra */
.cw-bar{
height:12px;
background:#fff2f9;
border-radius:30px;
overflow:hidden;
border:1px solid #ffb7df;
}
.cw-fill{
height:100%;
border-radius:30px;
background:linear-gradient(
90deg,
#ffb7df,
#ff69c8,
#ff1493);
background-size:300%;
animation:progressGlow 3s linear infinite;
box-shadow:
0 0 15px #ff69c8;
}
@keyframes progressGlow{
0%{
background-position:0%;
}
100%{
background-position:300%;
}
}
.cw-percent{
margin-top:8px;
font-size:13px;
color:#ff1493;
}
/* canción */
.cw-listens{
font-size:16px;
color:#ff1493;
margin-bottom:15px;
}
.listen-number{
font-size:28px;
font-weight:bold;
color:#ff1493;
text-shadow:
0 0 10px #ff7ccd;
}
/* ecualizador */
.equalizer{
display:flex;
gap:5px;
height:24px;
align-items:flex-end;
}
.equalizer span{
width:5px;
border-radius:30px;
background:linear-gradient(
#ffbde3,
#ff1493
);
box-shadow:
0 0 10px #ff69c8;
animation:music .8s infinite alternate;
}
.equalizer span:nth-child(1){
height:8px;
animation-delay:.1s;
}
.equalizer span:nth-child(2){
height:18px;
animation-delay:.4s;
}
.equalizer span:nth-child(3){
height:13px;
animation-delay:.2s;
}
.equalizer span:nth-child(4){
height:22px;
animation-delay:.6s;
}
.equalizer span:nth-child(5){
height:10px;
animation-delay:.3s;
}
@keyframes music{
from{
transform:scaleY(.6);
}
to{
transform:scaleY(1.15);
}
}
.cw-status{
margin-top:16px;
font-size:11px;
letter-spacing:3px;
font-family:'Syncopate',sans-serif;
color:#ff1493;
text-transform:uppercase;
text-shadow:
0 0 6px #ff69c8,
0 0 14px #ffb6e6;
opacity:.85;
}
</style>
<script>
function openCW(evt, id){
var tabs = document.querySelectorAll(".cw-tab");
var panels = document.querySelectorAll(".cw-content");
tabs.forEach(function(tab){
tab.classList.remove("active");
});
panels.forEach(function(panel){
panel.classList.remove("active");
});
evt.currentTarget.classList.add("active");
document.getElementById(id).classList.add("active");
}
/* Animación del brillo de la barra de progreso */
document.addEventListener("DOMContentLoaded", function(){
const fills = document.querySelectorAll(".cw-fill");
fills.forEach(function(fill){
fill.animate(
[
{filter:"brightness(1)"},
{filter:"brightness(1.35)"},
{filter:"brightness(1)"}
],
{
duration:1800,
iterations:Infinity
}
);
});
});
</script>
Sé que es un poco confuso pero con paciencia vas a ir modificando poco a poco y con paciencia vas a poder poner los colores que quieras. He querido dejar los que tengo yo por si hay alguien que lo quiere igual.
Respecto a las partes que puedes modificar están:
En la parte de "<img class="cw-cover" src="URL_IMAGEN_SERIE" />" pon la foto que más te guste, yo las saco de Pinterest.
En "<div class="cw-title"> NOMBRE DE LA SERIE </div>" pondrás pues el nombre de la serie LOL.
Donde pone "<div class="cw-subtitle"> Temporada X </div>" modifica la temporada por la que vas.
En el "<div class="cw-fill" style="width:00%;"></div>" se modifica el porcentaje que sale en la barra y donde pone "00% visto" deberás poner el mismo número para que se vea debajo.
Donde pone "EN EMISIÓN" puedes modificarlo como quieras.
Dejando de lado la serie tenemos "<img class="cw-cover" src="URL_IMAGEN_CANCIÓN" />" para la imagen de la canción.
Más adelante está "<div class="cw-title"> NOMBRE DE LA CANCIÓN </div>" y básicamente tienes que poner ¿adivina? exacto, el nombre de la canción.
Aquí "<div class="cw-subtitle"> ARTISTA </div>" pones el nombre del artista de la canción.
Aquí "<span class="listen-number">00</span>" cambias el numero de veces que has escuchado esa canción.
Casi llegando al final de lo que debes modificar está el estado en donde pone "EN BUCLE".
Por último encontramos esto "width:320px;" en el que puedes modificar el ancho de tu gadget por si tu sidebar es más estrecho que el mío.
Y ya estaría, esto es todo, lo único es eso de los colores que es un poco complicado ver cuales son iguales y cuales no.
Una vez ya tengas el código listo ve a la parte de "Diseño" en Blogger, elige el sidebar donde quieras ponerlo, dale a "añadir un gadget" y elige la opción de "HTML/JavaScript" para pegar el código entero en la parte de contenido. Acuérdate de darle a guardar tanto en el gadget como en la página de "Diseño".
Eso es todo!! Espero que os haya gustadooo!!!
No hay comentarios:
Publicar un comentario