Memasang Widget Music Playlist Pada Blog

Opick Weblog - Memasang Widget Pemutar Musik Pada Blog - Pada kesempatan kali ini saya ingin memberikan widget pemutar musik keren untuk blog sobat. Mungkin sudah banyak Pemutar Musik yang beredar di berbagai blog, tetapi widget ini sedikit berbeda dengan pemutar musik pada umumnya. Sedikit tambahan, pemutar musik ini bukan lah autoplay sehingga tidak akan mengganggu pengunjung dengan suara yang tiba-tiba muncul. Pemutar musik ini akan bekerja ketika pengunjung mengklik play, sehingga semuanya diserahkan kepada pengunjung yang ingin mendengarkan atau tidak.

Pemutar musik yang ingin saya tampilkan ada dalam dua bentuk.

1. Widget Pemutar Musik Pada Sidebar

Untuk memasang widget ini, silahkan copy kode berikut pada add widget.

<style type="text/css">
.opickweblogmusic {border:2px solid#4eabff;background:#0089a8;color:#fff;color:#000;border-radius: 8px; width:100%; height:137px}
.opickweblogxpmusic {background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijjApLWxjT3KFQRXmnJmEGSzsAu4UKxw_NS73T7NqSAkm-Uff25v2WAhVIpcx7AvpOVZqi5av11ktjftc9bS_W-krcCy4dKY2aeu_z4cS-kXCK7dv7dYY2D7t2hngl6QhIMddHNTsi6pI/w130-h93-no/have+a+nice+day+opick.png") no-repeat top right;border-radius: 8px;
}
</style>
<div class='opickweblogmusic'>
<div class='opickweblogxpmusic'>
<div style='font-weight:bold; color:#333333; font-size:15px; padding:11px 5px 5px 10px;'>
<img alt='small rss opickweblog' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_6V1_4pKYrLXWoSjFtgYwmOKyiL5j_Kky6f2meVAFPCmrOAxhZfFn6Cp5HbyHhxLdsAFMpkCVjulK9TyxoqYvSPduJSC3JmS0RfBGo4gj-mfOhjEWvhUmaG5Z1f0l00JxtUJqijvQiCw/s20-no/Music+Icon.png' title='Music'/> Music MP3</div>
<div style='font-weight:bold;font-size:13px; padding:10px 10px;'>
Last Child - Tak Pernah Ternilai</div>
<div style='font-weight:bold;font-size:11px;color:#eee; padding:0 10px;'>
Album : - </div>
<div style='font-weight:bold; padding:15px 0;'>
<audio controls>
<source src="http://f.cl.ly/items/272f1a3H031G1i3m201c/Last%20Child-Tak%20Pernah%20Ternilai.mp3" />
</source></audio>
<div style='padding-right:5px;float:right;font-size:11px'><a href='http://wajahilmu.blogspot.com/2015/04/memasang-widget-pemutar-musik-pada-blog.html' target='_blank'>get widget</a></div>
</div>
</div></div>

Keterangan :

• Silahkan ganti Last Child - Tak Pernah Ternilai dengan judul lagu sobat.
• Ganti Album : - dengan album lagu sobat.
• Ganti http://f.cl.ly/items/272f1a3H031G1i3m201c/Last%20Child-Tak%20Pernah%20Ternilai.mp3 dengan url lagu sobat.

2. Widget Pemutar Musik Show Hide

Untuk memasang widget ini, silahkan copy kode berikut pada add widget.

<script type="text/javascript">
//<!--
$(document).ready(function() {$(".floatinglikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-305"}, "medium");}, 500);});
//-->
</script>
<style type="text/css">
.floatinglikebox{
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh946CeueNEatZDI5kZHTY3GLviNk5KNnChOjp9H3c2_iRTTCp2jvs27GA43tsL41Sb_kyV-bu8fW6-1Ahht4I6BI49zzunw3T6NTZE_P897eWwGuoJwMINK56dUEjTHnn4NERjsi6CiPM/w41-h137-no/Music+Play.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 137px;padding: 0 5px 0 40px;width: 300px;z-index: 99999;position:fixed;right:-305px;top:40%;
}
.floatinglikebox div{
border:none;position:relative;display:block;
}
.floatinglikebox span{
bottom: 10px;font: 10px tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;
}
.floatinglikebox span a{
color: #808080;text-decoration:none;
}
.floatinglikebox span a:hover{
text-decoration:underline;
}
.opickweblogmusic {border:2px solid#4eabff;background:#0089a8;color:#fff;color:#000;border-radius: 8px; width:100%; height:137px}
.opickweblogxpmusic {background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijjApLWxjT3KFQRXmnJmEGSzsAu4UKxw_NS73T7NqSAkm-Uff25v2WAhVIpcx7AvpOVZqi5av11ktjftc9bS_W-krcCy4dKY2aeu_z4cS-kXCK7dv7dYY2D7t2hngl6QhIMddHNTsi6pI/w130-h93-no/have+a+nice+day+opick.png") no-repeat top right;border-radius: 8px;
}
</style>
<div class="floatinglikebox" style="">
<div>
<div class='opickweblogmusic'>
<div class='opickweblogxpmusic'>
<div style='font-weight:bold; color:#333333; font-size:15px; padding:11px 5px 5px 10px;'>
<img alt='small rss opickweblog' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_6V1_4pKYrLXWoSjFtgYwmOKyiL5j_Kky6f2meVAFPCmrOAxhZfFn6Cp5HbyHhxLdsAFMpkCVjulK9TyxoqYvSPduJSC3JmS0RfBGo4gj-mfOhjEWvhUmaG5Z1f0l00JxtUJqijvQiCw/s20-no/Music+Icon.png' title='Music'/> Music MP3</div>
<div style='font-weight:bold;font-size:13px; padding:10px 10px;'>
Last Child - Tak Pernah Ternilai</div>
<div style='font-weight:bold;font-size:11px;color:#eee; padding:0 10px;'>
Album : - </div>
<div style='font-weight:bold; padding:15px 0;'>
<audio controls>
<source src="http://f.cl.ly/items/272f1a3H031G1i3m201c/Last%20Child-Tak%20Pernah%20Ternilai.mp3" />
</source></audio>
<div style='padding-right:5px;float:right;font-size:11px'><a href='http://wajahilmu.blogspot.com/2015/04/memasang-widget-pemutar-musik-pada-blog.html' target='_blank'>get widget</a></div>
</div>
</div>
</div>
</div>
</div>

Keterangan Seperti Sebelumnya.

Music MP3

Motohiro Hata - Himawari no Yakusoku

OST Stand By Me Doraemon

Bagikan Artikel ini