Cara Membuat Widget Musik Player Melayang dah Menghilang di blog

Sudah banyak tutorial buat atau pasang musik di blog, tapi bagaimana kalau pasang atau buat musik dengan player tersembunyi di blog kita.

Seperti pada blog saya ini semua lagu berdasarkan lagu favorite yang saya suka, temen-temen juga bisa sekalian request Lagunya hehehe.

Sesuai Janji saya untuk posting tutorial ini yang di request salah satu sahabat blogger Ahmad Taufiq Labera, Yaitu cara membuat player musik tersembunyi.

Langkah Pertama adalah membuat Player Tersembunyi

Masuk Pada Bagian Templete Blog, dan cari kode </body> atau mudahnya tekan Ctrl+F masukan kata tersebut. Lalu paste script di bawah ini yang saya ambil dari yahoo media player diatas kode </body>

Source Script

<script src="http://mediaplayer.yahoo.com/latest" type="text/javascript"></script>

Setelah itu jangan lupa save.

Langkah kedua adalah membuat List Musiknya.

List Musik bisa kita simpan dalam berbagai cara, bisa di templete, entry posting, maupun di widgets.

Jika List musik akan di pasang di entry post kode scriptnya cukup seperti di bawah ini:

Source Script

<a href="URL Lagu 1.mp3">Judul Lagu 1</a><br/>
<a href="URL Lagu 2.mp3">Judul Lagu 2</a><br/>
<a href="URL Lagu 3.mp3">Judul Lagu 3</a><br/>

Nah bagaimana Caranya Jika List musiknya ingin di sembunyikan juga.?

Gampang, saya gunakan saja script yang biasa di gunakan untuk membuat shoutmix tersembunyi.

Kira kira kodenya seperti di bawah ini :

Source Script

<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('http://i999.photobucket.com/albums/af115/spsc66/music.png') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #3300FF;
background:#ffffff;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id="gb">
<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">
<div style="overflow: scroll; width: ; height: 400px;">

<a href="URL Lagu 1.mp3">Judul Lagu 1</a><br/>
<a href="URL Lagu 2.mp3">Judul Lagu 2</a><br/>
<a href="URL Lagu 3.mp3">Judul Lagu 3</a><br/>

</div></div></div><div><br />

<div style="text-align:right">
<a href="javascript:showHideGB()">
[close]
</a>
</div>
</div>

<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>

Silahkan Kode script di atas di widget blog sobat.
Dan saya kira tutorialnya cukup sampai disini, jika tidak berkenan mohon berikan komentar atau ingin menyumbangkan ide ide menarik lainya di blog ini.

Posted in: Editting Blog