Membuat Widget Playing Radio Streaming Pada Blog

Mungkin amat sangat banyak sekali widget-widget ataupun tutorial pada blog yang gunanya untuk memperindah blog bukan hanya dari segi tampilan visual tetapi juga dari audio, menambahkan playing audio berupa musik, alqur'an atau sebagainya dan tak kalah menariknya juga apabila menggunakan radio streaming sebagai audio bukan suatu hal yang baru bagi kalangan blogger banyak para blogger yang telah menggunakannya termasuk pada blog saya ini.

Pada tutorial kali ini akan dijelaskan bagaimana membuat Widget Radio Streaming pada blog yang khususnya saya akan membagi script radio "Gen FM|" seperti yang diterapkan pada blog ini. Apabila anda ingin menggunakan radio gelombang atau jenis lain anda bisa mencari scriptnya sendiri.hehe

Tak perlu namyak basa basi lagi Berikut langkah-langkah dalam membuat Widget Playing Radio Streaming Pada Blog :

Login ke Blog anda
Kemudian pilih Tata Letak >> Tambah Gadget sesuai letak yang anda inginkan
copy paste code dibawah ini kemudian Simpan.

Pilihan 1

<!doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script src="/files/js/flowplayer-3.2.4.min.js" type="text/javascript"></script>
<script type="text/javascript" src="/files/js/jquery-1.3.2.min.js"></script>
987GenFM.com - Suara Musik Terkini - Live Streaming
<script language="javascript">
	$(document).ready(function(){
		/*$.ajax({
			type : 'get',
			url : '/home/get_time',
			success: function(msg){
				$('#jam').html(msg);
				tick();
			}
		});*/
		update_program();
	});
		function update_program()
	{
			$.ajax({
			type : 'get',
			url : '/home/program',
			success: function(msg){
				var seg = msg.split('|');
				if(seg.length == 2)
				{
					$('#current_announcer').attr('src', '/uploads/avatar/' + seg[1]);					$('#current_announcer').attr('alt', seg[0]);
					$('#current_announcer').attr('title', seg[0]);
			//		$('#current_program').html(seg[0]);
				}
			}
		});
	}
	</script>
<style type="text/css">
body {margin:0; padding:0; font-family:Arial, Helvetica, sans-serif; color:#333; font-size:11px; background:green;}
.gen_stream{
 	width:360px;
	height:147px;
	background:url(/files/images/stream.png) top repeat-x;
	padding:15px;
	margin-top:10px;
	margin-left:10px;
}
.vs_img{ float:left; margin-right:10px;}
.online{ background-color:#ccc; padding:5px; width:230px; height:50px; float:left;}
.vs_list{ margin-top:3px;}
.vmt{ margin-top:10px;}
</style>
<div class="gen_stream">
	<div class="vs_img">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4_tyXrw7snZ1TmT67rRWH__geX39D-7Cz-u8K9UPIRXxXRZOvPNhfuPWW48btpc9s0bd1zMum8kz0sN1koUgEe5ru8vgw7Yym15fe7bmBXBVY0GVdo9QEB5yCnDUnwbHRsLrnXob4lqnh/s1600/AM.jpg" /></div>
<div class="online">
		<div class="judul">
987 Gen fm Radio Streaming</div>
Dengerin lagu-lagu terkini hanya di 987 Gen fm    </div>
<div class="vmt">
	<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like href="http://987gen.fm/streaming" show_faces="false" width="300"></fb:like>
	</div>
<div class="streaming" align="left">
	<iframe width="390" height="48" frameborder="0" src="http://www.sportku.com/iframe/987genfm.html" ></iframe>
    </div>
<div id="vid" style="display:block;width:350px;height:30px;overflow:hidden">
		<a class="player" id="live"></a> 
		</div>
<script type="text/javascript">
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-21080159-1']);
  _gaq.push(['_setDomainName', '.987genfm.com']);
  _gaq.push(['_trackPageview']);
  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
</script> 
</div>
</!doctype>

Akan tampil seperti dibawah ini

Pilihan 2 Apabila Space Widget tidak muat maka gunakan scrool copy paste script dibawah ini

<span><span style="font-style: italic;"><span style="font-style: italic;"><div style="height: 100px; width: 400px; font: 16px/26px Georgia,Garamond,Serif; overflow: scroll;">
<!doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script src="/files/js/flowplayer-3.2.4.min.js" type="text/javascript"></script>
<script type="text/javascript" src="/files/js/jquery-1.3.2.min.js"></script>
987GenFM.com - Suara Musik Terkini - Live Streaming
<script language="javascript">
	$(document).ready(function(){
		/*$.ajax({
			type : 'get',
			url : '/home/get_time',
			success: function(msg){
				$('#jam').html(msg);
				tick();
			}
		});*/
		update_program();
	});
		function update_program()
	{
			$.ajax({
			type : 'get',
			url : '/home/program',
			success: function(msg){
				var seg = msg.split('|');
				if(seg.length == 2)
				{
					$('#current_announcer').attr('src', '/uploads/avatar/' + seg[1]);					$('#current_announcer').attr('alt', seg[0]);
					$('#current_announcer').attr('title', seg[0]);
			//		$('#current_program').html(seg[0]);
				}
			}
		});
	}
	</script>
<style type="text/css">
body {margin:0; padding:0; font-family:Arial, Helvetica, sans-serif; color:#333; font-size:11px; background:green;}
.gen_stream{
 	width:360px;
	height:147px;
	background:url(/files/images/stream.png) top repeat-x;
	padding:15px;
	margin-top:10px;
	margin-left:10px;
}
.vs_img{ float:left; margin-right:10px;}
.online{ background-color:#ccc; padding:5px; width:230px; height:50px; float:left;}
.vs_list{ margin-top:3px;}
.vmt{ margin-top:10px;}
</style>
<div class="gen_stream">
	<div class="vs_img">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4_tyXrw7snZ1TmT67rRWH__geX39D-7Cz-u8K9UPIRXxXRZOvPNhfuPWW48btpc9s0bd1zMum8kz0sN1koUgEe5ru8vgw7Yym15fe7bmBXBVY0GVdo9QEB5yCnDUnwbHRsLrnXob4lqnh/s1600/AM.jpg" /></div>
<div class="online">
		<div class="judul">
987 Gen fm Radio Streaming</div>
Dengerin lagu-lagu terkini hanya di 987 Gen fm    </div>
<div class="vmt">
	<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like href="http://987gen.fm/streaming" show_faces="false" width="300"></fb:like>
	</div>
<div class="streaming" align="left">
	<iframe width="390" height="48" frameborder="0" src="http://www.sportku.com/iframe/987genfm.html" ></iframe>
    </div>
<div id="vid" style="display:block;width:350px;height:30px;overflow:hidden">
		<a class="player" id="live"></a> 
		</div>
<script type="text/javascript">
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-21080159-1']);
  _gaq.push(['_setDomainName', '.987genfm.com']);
  _gaq.push(['_trackPageview']);
  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
</script> 
</div>
</!doctype>
</div>
</span></span></span>

Pilihan 3 Apabila ingin Widget Streaming Radio Melayang disisi kanan blog, copy paste script dibawah ini

body {margin:0; padding:0; font-family:Arial, Helvetica, sans-serif; color:#333; font-size:11px; background:green;}

.gen_stream{
 	width:360px;
	height:147px;
	background:url(/files/images/stream.png) top repeat-x;
	padding:15px;
	margin-top:10px;
	margin-left:10px;
}
.vs_img{ float:left; margin-right:10px;}
.online{ background-color:#ccc; padding:5px; width:230px; height:50px; float:left;}
.vs_list{ margin-top:3px;}
.vmt{ margin-top:10px;}
</style>

<div class="gen_stream">
	<div class="vs_img">
<img src="/files/images/gen.png" /></div>
<div class="online">
		<div class="judul">
987 Gen fm Radio Streaming</div>
Dengerin lagu-lagu terkini hanya di 987 Gen fm    </div>
<div class="vmt">
	<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like href="http://987gen.fm/streaming" show_faces="false" width="300"></fb:like>
	</div>
<div class="streaming" align="left">
	<iframe width="390" height="48" frameborder="0" src="http://www.sportku.com/iframe/987genfm.html" ></iframe>
    </div>
<div id="vid" style="display:block;width:350px;height:30px;overflow:hidden">
			<a class="player" id="live"></a> 
		</div>
<script type="text/javascript">

var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-21080159-1']);
  _gaq.push(['_setDomainName', '.987genfm.com']);
  _gaq.push(['_trackPageview']);

(function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script> 
</div>
</!doctype>

</div>

Note:

Apabila menginginkan COPAS artikel ini tolong cantumkan sumber.
Apabila masih ada yang kurang jelas bisa ditanyakan pada kolom komentar.
Like anda sangat bearti buat saya, Terimakasih atas kunjunganya.

+ comments + 4 comments

Kang Rian

20 July 2013 at 23:03

sebelumnya thanks for sharing sob :) , bermanfaat banget .. biar blog kita gak sepi ya sob ..

bisa di ganti dengan saluran radio yang kita mau gak sob widget ini ?