Widget Radio Online Multi Channel

Ada beberapa kawan blogger ;) yang menanyakan script dan cara pasang widget radio online di blog, pada komentar yang dimasukkan pada post Radio Online, namun script yang digunakan disana tidak bisa diakses langsung dari blog lain, akhirnya Warung Bebas membuatkan script khusus untuk dipakai para kawan blogger yang ingin menambah aksesori blognya dengan widget radio multi channel. Widget bisa dipasang di postingan atau bisa di sidebar, bisa untuk blog wordpress maupun blogspot.

Tampilannya seperti disamping kanan, itu juga diakses menggunakan script yang di share ini. Anda bisa mencoba mendengarkannya dengan memilih salah satu channel. Dan CSSnya bagi yang mengerti style silahkan dioprek-oprek, jika tidak diedit maka persis seperti disamping kanan itu tampilannya. Cara pasangnya berikut ini:

Tambahkan kode dibawah ini pada postingan atau pada widget (Text/HTML/Javascript). Kalau dalam postingan, masukkan dalam MODE HTML.

<script src="http://javascript-share.googlecode.com/files/wb.js"></script><script src="http://javascript-share.googlecode.com/files/wb_radio_online.js"></script><div id="wb_radio_wrap"><div id="wb_r_widget_cap"></div><div id="wb_radio"><div id="wb_radio_caption"></div><div id="wb_radio_player"><a href="http://www.warungbebas.com" id="wb_radioauth">Radio Online Warung Bebas</a></div><div id="wb_radio_channel"></div></div></div><style type='text/css'>#wb_radio_wrap,#wb_radioauth{display:none}#wb_r_widget_cap{background:#678FC2 url(http://dns.warungbebas.com/public/images/music_favicon.ico) no-repeat center right;border:1px solid #678FC2;color:#fff;font-weight:bold;padding:2px 5px}#wb_radio{padding:5px;border:1px solid #678FC2;background:#fff url(http://2.bp.blogspot.com/-fQcDmQFTu7I/TvIA46KqC6I/AAAAAAAABhU/oTKAljGNyOQ/s1600/bg_wb_radio.png) no-repeat center center}#wb_radio_player{background:url(http://static.ak.connect.facebook.com/images/loaders/indicator_white_large.gif) no-repeat center center;overflow:hidden;margin:5px 0}#wb_radio_channel{font-size:95%}#wb_radio_channel select{font-size:95%;background: #E8E8FF;border:1px solid #bbb}#wb_radio_channel select .channel{border-top:1px dashed #bbb}</style><script type="text/javascript">wb.radio.$();</script>

Kode berwarna hijau diatas adalah stylenya, bisa Anda edit warna dll.

Untuk mengganti ukuran lebarnya Anda bisa menambahkan parameter berikut ini:

wb.radio.c.w = 250;

Ubah angka warna merah diatas sesuai keinginan, khususnya jika menyesuaikan dengan lebar sidebar blog. Cara menambahkan parameter jika digabungkan pada semua kode akan terlihat seperti dibawah ini:

<script src="http://javascript-share.googlecode.com/files/wb.js"></script><script src="http://javascript-share.googlecode.com/files/wb_radio_online.js"></script><div id="wb_radio_wrap"><div id="wb_r_widget_cap"></div><div id="wb_radio"><div id="wb_radio_caption"></div><div id="wb_radio_player"><a href="http://www.warungbebas.com" id="wb_radioauth">Radio Online Warung Bebas</a></div><div id="wb_radio_channel"></div></div></div><style type='text/css'>#wb_radio_wrap,#wb_radioauth{display:none}#wb_r_widget_cap{background:#678FC2 url(http://dns.warungbebas.com/public/images/music_favicon.ico) no-repeat center right;border:1px solid #678FC2;color:#fff;font-weight:bold;padding:2px 5px}#wb_radio{padding:5px;border:1px solid #678FC2;background:#fff url(http://2.bp.blogspot.com/-fQcDmQFTu7I/TvIA46KqC6I/AAAAAAAABhU/oTKAljGNyOQ/s1600/bg_wb_radio.png) no-repeat center center}#wb_radio_player{background:url(http://static.ak.connect.facebook.com/images/loaders/indicator_white_large.gif) no-repeat center center;overflow:hidden;margin:5px 0}#wb_radio_channel{font-size:95%}#wb_radio_channel select{font-size:95%;background: #E8E8FF;border:1px solid #bbb}#wb_radio_channel select .channel{border-top:1px dashed #bbb}</style><script type="text/javascript">wb.radio.c.w=250;wb.radio.$();</script>

Perhatikan, parameter dimasukkan sebelum kode:

wb.radio.$();

Sampai sini selesai sudah pemasangan widget. Silahkan lihat muncul atau tidak radionya di blog Anda. Penjelasan lanjutan dibawah ini adalah untuk memudahkan saja dalam edit CSS maupun penambahan parameter.

Berikut ini beberapa parameter lain, yang mungkin ingin Anda sesuaikan:

wb.radio.c.w = 250;
wb.radio.c.h = 65;
wb.radio.c.l = ["Radio Online", "Pilih Channel Disini"];
wb.radio.c.auto = false; //=> auto play saat load (default false)

Parameter diatas adalah untuk mengatur lebar dan tinggi windows media playernya, juga mungkin jika Anda ingin mengubah nama widget dan kata-kata pada pilihan channel, Anda juga bisa set auto play ke true jika ingin langsung terdengar radio saat widget dibuka. Cara menyisipkannya sama dengan yang diatas itu.

Kode diatas sudah dicompress, untuk lebih jelasnya dari semua kode termasuk penambahan parameter, lihat kode dalam model memanjang kebawah berikut ini:

<script src="http://javascript-share.googlecode.com/files/wb.js"></script>
<script src="http://javascript-share.googlecode.com/files/wb_radio_online.js"></script>
<div id="wb_radio_wrap">
  <div id="wb_r_widget_cap"></div>
  <div id="wb_radio">
    <div id="wb_radio_caption"></div>
    <div id="wb_radio_player">
      <a href="http://www.warungbebas.com" id="wb_radioauth">Radio Online Warung Bebas</a>
    </div>
    <div id="wb_radio_channel"></div>
  </div>
</div>
<style type='text/css'>
#wb_radio_wrap,#wb_radioauth{
  display:none;
}
#wb_r_widget_cap{
  background:#678FC2 url(http://dns.warungbebas.com/public/images/music_favicon.ico) no-repeat center right;
  border:1px solid #678FC2;
  color:#fff;
  font-weight:bold;
  padding:2px 5px;
}
#wb_radio{padding:5px;
  border:1px solid #678FC2;
  background:#fff url(http://2.bp.blogspot.com/-fQcDmQFTu7I/TvIA46KqC6I/AAAAAAAABhU/oTKAljGNyOQ/s1600/bg_wb_radio.png) no-repeat center center;
}
#wb_radio_player{
  background:url(http://static.ak.connect.facebook.com/images/loaders/indicator_white_large.gif) no-repeat center center;
  overflow:hidden;
  margin:5px 0;
}
#wb_radio_channel{
  font-size:95%;
}
#wb_radio_channel select{
  font-size:95%;
  background: #E8E8FF;
  border:1px solid #bbb;
}
#wb_radio_channel select .channel{
  border-top:1px dashed #bbb;
}
</style>
<script type="text/javascript">
  wb.radio.c.w = 250;
  wb.radio.c.h = 65;
  wb.radio.c.l = ["Radio Online", "Pilih Channel Disini"];
  wb.radio.c.auto = false;
  wb.radio.$();
</script>

Tetap direkomendasikan menggunakan kode yang sudah menjadi satu baris (1 line) yang sudah dicompress diatas, selain lebih kecil ukurannya, juga lebih jarang error, khususnya jika dimasukkan pada postingan wordpress. Jadi meskipun menambah parameter, usahakan dijadikan satu baris. Semoga bermanfaat.

Note: Jika Anda mendapatkan sebuah channel radio baru (lengkap dengan URL streamingnya) yang tidak ada dalam widget diatas, silahkan diinformasikan dikomentar, nanti akan diupdate data channelnya, tanpa harus mengganti kode dan channel akan bertambah otomatis.