Como Implementar un Reproductor de Radio Online en Blogger

Tutoriales Blogger

Cómo Agregar un Reproductor de Radio Online en Blogger

Aprende a integrar un reproductor de radio online personalizado y listo para usar en tu blog para captar tráfico y ofrecer streaming en vivo a tus usuarios

Reproductor de Radio Online para Blogger

📋 En este artículo aprenderás:

1. Mejores páginas de servidores de radio gratuitos
2. Cómo agregar el CSS y HTML del reproductor
3. Preguntas Frecuentes

1. Páginas especializadas en Servidores de Radio

Existen muchas páginas especializadas donde podemos crear nuestras estaciones de radios ya sea en vivo o colocar audios pregrabados en secuencia. Algunos de estos servidores nos ofrecen reproductores gratuitos y en algunos casos solo nos ofrecen el enlace URL de nuestra estación radial.

Hay muchas plataformas comerciales que ofrecen el servicio de streaming gratuito. Son empresas que intentan captar clientes regalando planes gratuitos, para luego vender algún paquete Premium de transmisión online. Sin embargo, son una excelente alternativa para comenzar. Algunas opciones recomendadas:

OPCIÓN 1

Listen2myradio

Plataforma clásica de streaming para estaciones de radio online gratuitas y de pago.

OPCIÓN 2

Myradiostream

Ideal para transmitir señal en vivo de forma sencilla y con herramientas básicas de control.

OPCIÓN 3

Caster.FM

Servidor muy popular para DJs y creadores de contenido musical en streaming.

OPCIÓN 4

Zeno.FM

Excelente alternativa actual, gratuita, estable y muy utilizada para radios digitales.

💡 CONSEJO CLAVE

Elige la plataforma que mejor se adapte a tus necesidades de conectividad y asegúrate de guardar el enlace directo (URL) de tu transmisión para integrarlo en el reproductor.

2. Cómo instalar el reproductor en tu Blog

Sigue estos dos sencillos pasos para configurar los estilos CSS en tu plantilla y añadir el código HTML en tus entradas.

Paso 1: Añadir el código CSS

Entra a Blogger en Tema > Editar HTML, busca la etiqueta ]]></b:skin> o </style> y pega el siguiente código CSS justo arriba:

#radio1{background:#ff9200;color:#03222d;border:4px solid #000;border-radius:16px;padding:24px;margin-bottom:20px;box-shadow:0 10px 30px rgba(0,0,0,0.15);overflow:hidden;box-sizing:border-box;transition:transform 0.2s ease,box-shadow 0.2s ease}
#radio1:hover{transform:translateY(-2px);box-shadow:0 14px 35px rgba(0,0,0,0.2)}
#radio{direction:ltr;width:100%;min-height:auto}
.caja-box{display:flex;flex-wrap:wrap;align-items:center;gap:20px;width:100%;text-align:left}
.img-box{width:110px;height:110px;flex-shrink:0;border-radius:10px;overflow:hidden;/* Esto oculta cualquier exceso de la imagen */
  box-shadow:0 4px 12px rgba(0,0,0,0.1);display:flex;align-items:center;justify-content:center}
/* Regla estricta para que la imagen NUNCA se salga del marco */
.img-box img,.img-box svg{width:100%;height:100%;object-fit:cover;/* Llena el cuadro recortando sobrantes sin deformar */
  display:block;max-width:100%;max-height:100%}
.repro-box{flex:1 1 260px;padding:0;min-width:0}
.repro-box2{flex:1 1 280px;padding:0;min-width:0}
.repro-box3{flex:0 0 auto;margin-left:auto;padding:0}
/* Adaptabilidad para pantallas móviles */
@media (max-width:768px){#radio1{padding:16px;border-width:3px}.caja-box{flex-direction:column;align-items:stretch;gap:15px;text-align:center}.img-box{width:90px;height:90px;margin:0 auto;/* Centra la imagen en móviles */}.repro-box,.repro-box2{width:100%;flex:1 1 100%}.repro-box3{margin-left:0;margin:0 auto}}

Paso 2: Añadir el código HTML en la entrada

En la sección Vista HTML de tu publicación, pega el siguiente bloque donde deseas que aparezca el reproductor:

<div id="radio1">
  <div class="caja-box">
    <div class="img-box">
      <img src="URL-IMAGEN" alt="Portada Radio" loading="lazy" />
    </div>
    <div class="repro-box2">
      <iframe src="URL-RADIO" title="Reproductor de Radio" height="90" width="100%" frameborder="0" scrolling="no" allow="autoplay"></iframe>
    </div>
  </div>
</div>

⚠️ ADVERTENCIA IMPORTANTE

Reemplaza URL-IMAGEN por un enlace de tu imagen radial (se recomienda usar una imagen pequeña de 125 x 125 píxeles) y cambia URL-RADIO por el enlace de transmisión de tu estación. Si deseas que no se inicie automaticamente el reproductor elimina allow="autoplay"