Este es uno de mis gadget favoritos por lo que bienvenidas a un nuevo viernes de tutoriales!! Hoy mi nuevo apartado de News.
<link href="https://fonts.googleapis.com/css2?family=Slackey&family=Gruppo&display=swap" rel="stylesheet" />
<div id="news-gadget">
<!-- HEADER -->
<div class="news-header">
<div class="news-right">
<span class="news-title">NEWS</span>
<div class="bars">
<div class="bar bar1"></div>
<div class="bar bar2"></div>
<div class="bar bar3"></div>
</div>
</div>
</div>
<!-- CONTENIDO -->
<div class="news-content">
Aquí escribe lo que quieras anunciar.
</div>
<!-- SPOTIFY -->
<div class="music-player">
<div class="song-label">
Canción del día
</div>
<div class="spotify-wrapper">
<iframe
src="URL_SPOTIFY"
allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"
loading="lazy">
</iframe
></div>
</div>
</div>
<style>
#news-gadget {
background: rgba(000, 000, 000, 0.6);
padding: 15px;
border-radius: 15px;
width: 100%;
box-sizing: border-box;
}
/* HEADER */
.news-header {
display: flex;
justify-content: flex-end;
}
.news-right {
display: flex;
align-items: center;
gap: 6px;
}
.news-title {
font-family: 'Slackey';
color: #00000;
font-size: 20px;
}
/* BARRAS */
.bars {
display: flex;
flex-direction: column;
gap: 3px;
}
.bar { height: 5px; }
.bar1 { width: 15px; background: #00000; }
.bar2 { width: 22px; background: #00000; }
.bar3 { width: 30px; background: #00000; }
/* CONTENIDO */
.news-content {
margin-top: 10px;
font-family: 'Gruppo';
color: #00000;
font-size: 16px;
text-align: center;
}
/* PLAYER */
.music-player {
margin-top: 15px;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}
/* TEXTO */
.song-label {
font-family: 'Slackey';
font-size: 12px;
color: #00000;
}
/* SPOTIFY */
.spotify-wrapper {
width: 100%;
display: flex;
justify-content: center;
}
.spotify-wrapper iframe {
width: 100%;
max-width: 220px;
height: 90px;
border: none;
border-radius: 12px;
}
</style>
Para editarlo a gusto yo recomiendo que copies el código entero y pegarlo en la app de notas, una vez tengas el código a tu disposición empecemos con la explicación, siempre viendo las partes que pueden variar.
En la parte del contenido tendrás que escribir lo que quieres poner, acuérdate de que NO puedes prescindir de los espacios que hay antes del texto porque son MUY importantes.
Si sigues bajando verás la parte de Spotify en la que deberás poner el URL de la canción que quieras añadir. Tienes que tener cuidado con lo que tienes que poner: por ejemplo, el link completo de la canción que he puesto es https://open.spotify.com/intl-es/track/2vPrHmbjeQiPY0YTR58EWd?si=39d654637dd74ef7 pero la única parte que debes pegar es todo lo que sale ANTES del ?, o sea https://open.spotify.com/intl-es/track/2vPrHmbjeQiPY0YTR58EWd.
Abajo encontrarás "background: rgba(000, 000, 000, 0.6);" aquí deberás poner el color que quieras que tenga tu news, para ver el color que quieres mira en HTMLcolorcode y copia y pega el rgb que quieras.
Después verás "font-family: 'Slackey'; color: #00000;" que será lo que edite el título. En la fuente deberás poner el nombre completo del tipo de letra que quieras. En el color modificas el color (jaja LOL) hazlo también con el HTMLcolorcode.
Más adelante está ".bar1 { width: 15px; background: #00000; } .bar2 { width: 22px; background: #00000; } .bar3 { width: 30px; background: #00000; }" que modifica el color de las tres barritas que hay frente al título.
En la parte de contenido está "font-family: 'Gruppo'; color: #00000;" donde cambiarás el tipo de letra y el color de lo que quieres anunciar. Vamos, tres cuartos de los mismo todo el rato.
Ya al final encuentras "font-family: 'Slackey; font-size: 12px; color: #00000;" que modifica la parte de "Canción del día", tendrás que hacer exactamente lo mismo que en los demás casos.
Esto sería todo, espero que te haya servido y si tienes alguna pregunta no dudes en escribirla en los comentarios!! Nos vemoss
ayy ayudaa cuando pongo el url del spotify , y luego entro a ver como se ve no me aparece la cancion el spotify me sale en gris ,que puedo hacer?
ResponderEliminarHola bonita, pues mira, intenta cambiar los tamaños de la ultima sección del código (donde pone al final del todo "Spotify wrapped iframe") para ver si ajustándolo te sale. Si ese no es el problema entonces intenta agrandar un poco el gadget entero para que quepa bien la canción. Ya me cuentas si te funciona si? <33
Eliminarñisjiji ya lo resolvi no era el codigo era que faltaba cerrar el iframe, que tenia que terminar en ></iframe ñisjijis igualmente graciaaas!! :3
EliminarDonde pongo el codigo pq lo puse en editar HTML y me dice que lo hice mal
ResponderEliminarNooo amorch, esto lo tienes que poner en la parte de Diseño, en “añadir un gadget” <3
EliminarHoliii, tengo un problema con la canción :( sale en gris, ya intenté con la respuesta que le diste a alguien con el mismo problema y nada jaja, vi que la persona lo solucionó de otra forma, pero tampoco entendí :(
ResponderEliminarHola Sofi, mira pues lo que pasa es que para que los códigos funcionen hay que abrirlos y cerrarlos y eso se hace con ciertos códigos, la otra persona que escribió lo que le había pasado es que no habia cerrado el código (con ) por lo que Blogger no leía si habia terminado o no. Básicamente revisa que no te hayas saltado nada del código y que lo que abres tiene final (cuando los códigos se abren salen con < y > y cuando cierran sé añado un / después del <)
EliminarEspero que te sirva y si necesitas más ayuda me dices
Olap, m pasó lo mismo y ya intenté de todo 😔
EliminarHola! También esta la opción que en el link de Spotify cambiar el 'intl-es' a 'embed', la verdad me ayudo cuando ya habia intentado todo
Eliminarola. He intentado de mil maneras y aún no se muestra la canción. ¿Alguien lo logró?
Eliminarholaahhh, m explicás donde tendría que poner el codigo??
ResponderEliminarHola guapi, tienes que ponerlo en la parte de “diseño” en el sidebar dale a “añadir gadget” y pegas el código en la parte de “contenido”. Espero te sirva <33
Eliminar