March 09, 2012   Tutorial Blospot.

Widget Radio Online Multi Chanel.

Ada beberapa kawan blogger yang menanyakan script dan cara pasang widget radio online di blog, pada komentar yang dimasukkan pada post Ra...

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.

 Cara pasangnya berikut ini:

Tambahkan kode dibawah ini pada postingan atau pada widget (Text/HTML/Javascript).

<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://www.rumahlagu.com/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhD9RxaeBuXEiVYA1Jyjad9AanT6ptqcVUuijxS7kqJ4wtex6GLIqVotko2F92HRgHKn4H9C96ayiEm1rOYM9r6pK_6lwTrtKtxwRAEPz-ep1rnNWYYPehJ0U-bORYYncaFkQWlptmAMg/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>

---

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.

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.


Sumber : http://www.warungbebas.com/2011/12/widget-radio-online-multi-channel.html