❀˖° 𝐃𝐞 𝐭𝐨𝐝𝐨 𝐲 𝐧𝐚𝐝𝐚 ⋆. 𐙚 ˚

¿Cómo colocar una canción en tus posts?

Después de un año, hoy traigo un nuevo tutorial: Cómo colocar una canción en cualquiera de tus publicaciones. Si han estado navegando por mi blog se habrán dado cuenta que en las dos publicaciones sobre música que he hecho de Olivia y Billie he añadido una nube al inicio en la que se puede escuchar cualquier canción que tú pongas. Y hoy te traigo mi maravilloso tutorial para que tú también lo puedas añadir a tu blog. 🫰

Bien, antes de comenzar a darte el código y todo eso debo decirte que debes descargar la canción que desees colocar en formato mp3. Ya que utilizaremos la página catbox, la cual nos va a permitir generar el link para colocarlo en el código. Puedes utilizar esta página para descargar la canción que desees y2mate.

Ahora que ya sabes uno de los pasos más importantes vamos a seguir con el código que es la parte un poquito más larga por el hecho de editarlo. Pero en lo personal no se me hizo tan tardado como con otros tutoriales. El código a continuación es el que deberás copiar y editar:

<!-- 1. ESTILOS CSS (Contenedor Acolchonado) -->
<style>
  .music-player-box {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: #E0F7FA;
    border: 2px dashed #B2EBF2;
    border-radius: 25px;
    padding: 10px 18px;
    max-width: 360px;
    margin: 15px auto;
    box-shadow: 0 4px 10px rgba(178, 235, 242, 0.4);
    font-family: 'Georgia', serif;
  }

  .music-player-text {
    font-size: 0.85rem;
    font-style: italic;
    color: #1A5276;
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.2;
  }

  /* Personalización ligera del reproductor */
  .music-player-box audio {
    height: 32px;
    max-width: 230px;
    border-radius: 20px;
  }
</style>

<!-- 2. REPRODUCTOR DE AUDIO -->
<div class="music-player-box">
  <div class="music-player-text">
    <span>🎵</span>
    <span>Escucha:</span>
  </div>

  <!-- Reemplaza LINK_DE_TU_CANCIÓN.mp3 por el enlace de tu archivo -->
  <audio controls>
    <source src="LINK_DE_TU_CANCIÓN.mp3" type="audio/mpeg">
    Tu navegador no soporta el reproductor de audio.
  </audio>
</div>

Una vez que lo hayas copiado y pegado en notas llega la parte de editarlo (como siempre te recomiendo poner mucha atención para no borrar ningún espacio, comilla o cualquier otro signo ya que son muy importantes).

Para comenzar debes ir al inicio en donde dice <style> y buscar background: #E0F7FA; aquí lo que debes cambiar es #E0F7FA por el color que tú desees. Recuerda que puedes utilizar esta página para usar el color que más te guste htmlcolorcodes.

Abajo encontrarás border: 2px dashed #B2EBF2; aquí también vas a cambiar el color #B2EBF2 por el que tú prefieras, como aquí es el borde te recomiendo un color un poco más oscuro que el que escogiste al inicio para que se note. Y si no quieres el borde punteado sino uniforme cambia dashed por solid.

A continuación cambiaremos el color del texto que dice escucha; busca la parte que dice color y cambia #1A5276 por el color que creas se verá mejor.

Para terminar con los colores vamos a cambiar la sombra por un color que haga juego con su paleta, para esto buscarán box-shadow: 0 4px 10px rgba(178, 235, 242, 0.4); y en la parte de rgba van a cambiar el código por el que ustedes deseen, recuerden que este código es distinto a los anteriores ya que es rgba.

Ahora vamos a cambiar el tamaño, si su columna de blog es más angosta o si quieren que la cajita ocupe menos o más espacio en max-width: 360px; pueden subir o bajar el número de píxeles (por ejemplo, 300px si la quieren más pequeña).

Una vez terminado esto iremos con la parte más importante para que el reproductor funcione. Deben reemplazar LINK_DE_TU_CANCIÓN.mp3 por el URL que deben generar en catbox. Para esto van a ir a catbox y deben subir su canción, una vez subida a la página les va a dar un link que debe terminar con mp3. Este link es el que van a poner en LINK_DE_TU_CANCIÓN.mp3.

Una vez hecho esto van a ir a entradas y van a crear una, ahí deben buscar en la parte superior izquierda un lápiz, una vez ubicado le van a dar click y deben cambiar de vista de redacción a vista HTML, una vez hecho deben ver algo así:

Ahí van a pegar el código que editaron; en la parte de hasta arriba, para que así la nube de la música quede al inicio. Y con eso ya estaría, pueden darle al ojito de la esquina superior derecha para visualizar cómo quedaría y una vez que estén seguros que les gusta cómo se ve pueden darle a publicar.

Básicamente con esto ya terminaríamos el tutorial, como pueden darse cuenta no es una cosa de otro mundo, solo es prestar mucha atención al momento de editar el código para que no haya ningún error. Recuerden que si tienen alguna duda pueden colocarla en los comentarios. <3