🫧 Reflexiones, opiniones, clases de brujería y tutoriales de blogs para todo el mundo ☁️🩷

31 de julio de 2026

¿Cómo poner un botón a tus canciones más escuchadas de Spotify?

Bienvenidas a un nuevo viernes de tutoriales!! Hoy te traigo un tutorial bastante sencillo que hará que tus seguidores te conozcan un poquito más:


Es muy sencillo de hacer así que no te preocupes porque te dejo ahora mismo el código que necesitas, recuerda pegarlo en notas para editarlo más fácilmente antes de pegarlo en tu blog:

<style>

.spotify-box {

  background: transparent;

  text-align: center;

  font-family: inherit;

  display: inline-block;

}


.spotify-title {

  font-size: 15px;

  color: #00000;

  font-weight: bold;

  display: block;

  margin-bottom: 2px;

}


.spotify-arrow {

  font-size: 12px;

  color: #00000;

  margin-bottom: 6px;

  display: block;

}


.spotify-link {

  text-decoration: none;

  display: inline-block;

}


.spotify-img {

  width: 00px;

  height: auto;

  display: block;

  margin: 0 auto;

}

</style>


<div class="spotify-box">

  <div class="spotify-title">MIS CANCIONES MÁS ESCUCHADAS</div>

  <div class="spotify-arrow">↓ click aquí</div>


  <a class="spotify-link" URL_DE_LA_PLAYLIST" target="_blank">

    <img class="spotify-img" src="URL_DE_LA_IMAGEN" alt="spotify playlist" />

  </a>

</div>


Recuerda copiar el código en notas para modificarlo a gusto.

Voy a explicarte qué es cada cosa: el primer "color: #00000;" es el color del título y el segundo es el color de lo de "click aquí" (yo tengo los mismos colores pero tu puedes alternar). En el "width: 00px;" modificas el tamaño de la imagen (yo lo tengo a 150px, por si te sirve de referencia). Llegamos a la parte de los URL: en la playlist tendrás que ir a Spotify, buscar la playlist (cuidado que debe estar en modo Pública) y copiar el enlace para pegarlo aquí. En el otro buscarás una imagen que te guste en Pinterest y copiarás el link para pagarlo.

Una vez modificado el código cópialo entero, teniendo cuidado con los espacios y las comillas, y pégalo en la parte de Diseño, en el sidebar que quieras, dandole a "añadir un gadget" y a HTML/JavaScript. Recuerda que antes de salir le tienes que dar a guardar tanto en el gadget como en la pagina de Diseño abajo a la derecha.

Esto es todo, espero que se te haya hecho fácil, si tienes alguna pregunta no dudes en escribirla en los comentarios!! Nos vemoss

1 comentario:

  1. HOLA ALIII, una duda hermosa, y si no quiero poner una playlist de spotify sino de youtube por ejemplo? gracias por el tutorial :3

    ResponderEliminar