Como Implementar un Reproductor de Radio Online para Blogger

Reproductor de Radio online para Blogger generalmente existen paginas internet que distribuyen contenido de música y ondas radiales ya sea strems (En Vivo) o contenido de audio grabado en secuencia de forma gratuita, estas paginas son muy concurridas por los usuarios que navegan en internet, una forma de atrapar ese trafico es crear una pagina radial en vivo, en esta oportunidad vamos aprender a como agregar un reproductor de radio online para nuestro blog en blogger, totalmente personalizado y listo para usar.

Paginas especializadas en Servidores de Radio: Existen muchas paginas 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 intentar venderles algún paquete Premium de transmisión online. Sin embargo, son una buena alternativa para comenzar. Algunos ejemplos de estas paginas. 👇

1º Listen2myradio

2º Myradiostream

3º Caster.FM

4º Zeno.FM

1º Entrar a Blogger Tema / Editar HTML aquí debemos buscar ]]></b:skin>  o  </style> y colocar el siguiente código CSS en la parte de arriba.

 

#radio1 {color: #03222d;margin: 0 0 2px;overflow: hidden;padding: 15px; background:#ff9200; border: solid 10px #000; border-radius:5px;}
#radio {direction: ltr;margin: 0 0 2px;/*27px*/ min-height: 180px; width: 100%;}
.caja-box { float: left; margin: 0; text-align: left; width: 100%;}
.img-box { float: left; margin: 0 10px 0 0;width:120px}
.repro-box {  padding: 12px 0 0;width:350px;float:left}
.repro-box2 {  padding: 12px 0 0;width:400px;float:left}
.repro-box3 { padding: 12px 0 0;width: 100px;float: right; } /*padding: 12px 0 0;width:100px;float:left*/

2º Para usar el reproductor en nuestras entradas o paginas de blogger vamos a colocar el siguiente código html en la sección VISTA HTML.

 

<div id="radio1">
<div class="img-box"><div class="separator" style="clear: both;"><img border="0" src="URL-IMAGEN" /></div>
</div>
  
<div class="repro-box2">
<iframe allowtransparency="true" frameborder="0" height="90" marginheight="0" marginwidth="0" scrolling="No" src="URL-RADIO" style="background: transparent;" width="100%" wmode="transparent">
</iframe>
</div>
</div><div>
<br />

Debemos reemplazar URL-IMAGEN por un enlace de nuestra imagen radial (Se recomienda usar una imagen pequeña 125 x 125 pixeles), también reemplazar la URL-RADIO por la estación de su radio online php.