Di blog, rata-rata widget yang ditambahkan adalah Buku Tamu melayang/tersembunyi yang akan keluar jika tombolnya diklik. Nah, berbekal sedikit pengetahuan dan pengalaman, kali ini saya akan menyebarluaskan (cailah) kode untuk membuat Music Player Melayang. Jadi, ada tombol di sebelah kiri halaman yang akan mengeluarkan music player jika diklik. Kenapa harus di kiri??? Iya soalnya kode yang saya pakai ini bisa bentrok dengan kode buku tamu yang ada di blog sobat (kalo ada) jika ditaruh di kanan. Oke langsung aja kita capcusss……..
Langkah 1
Dapatkan kode pemutar lagu di videokeman.com
- Pergi ke situs videokeman.com. Ini adalah situs populer yang menyediakan banyak pilihan lagu untuk dipasang di blogmu. Buffering-nya cepat, lho. Jadi tidak memberatkan saat kita memutar lagu.
- Pilih lagu yang kamu suka.
- Di sidebar ‘Rock ‘n Share!’ klik ‘copy’ lalu paste-kan ke notepad.
- Kodenya akan tampak seperti ini:
<img style=”visibility:hidden;width:0px;height:0px;” border=0 width=0 height=0 src=”http://c.gigcount.com/wildfire/IMP/CXNID=2000002.0NXC/bT*xJmx*PTEzNDgxMDU2MTI4NzUmcHQ9MTM*ODEwNTY5MzkzMiZwPTI5MzMzMSZkPSZnPTEmbz1hMDE*ZGYxOTBjZmQ*YTUxOWNk/MjQzZTkyNGQ1YTY4MSZvZj*w.gif” /><center><a target=”_blank” href=”http://videokeman.com”><img border=”0″ src=”http://i39.photobucket.com/albums/e159/normanski/players/ewualizer.gif” alt=”videokeman mp3″ /></a><br /><a target=”_blank” href=”http://videokeman.com/john-lennon/imagine-john-lennon/”>Imagine – John Lennon Song Lyrics</a><br /></center>
- Kalau sobat tidak ingin musiknya diputar otomatis, ganti aja tulisan merah dengan ‘no’ (tanpa tanda petik).
Sekarang kita sudah memiliki kode penting yang kita butuhkan 😀
Langkah 2
Masukkan kode ke HTML blog
- Pergi ke editor HTML blog kamu atau Dreamweaver (bagi yang menggunakannya). Untuk pengguna Blogger, pergi ke Template –> Edit HTML –> Lanjutkan –> Centang di Expand Template Widget. Untuk pengguna Dreamweaver, ubah tampilan ke Code.
- Untuk pengguna Dreamweaver, copy-paste kode berikut di antara tag <body> dan </body>. Untuk pengguna Blogger,bisa dengan menambahkan dulu widget berupa Teks/HTML lalu isi dengan kode berikut.
<!– left hidden music START –>
<style>
#hcr {
position:fixed;
top:50px;
z-index:+1000;
}
* html #hcr {position:relative;}
.hcrtab {
height:100px;
width:30px;
float: right;
cursor:pointer;
background:url(‘http://2.bp.blogspot.com/-aRy64ywqzJI/UB-BjI5erzI/AAAAAAAAADQ/vQrM9sgKmPI/s1600/tabs_music.png‘) no-repeat;
}
.hcrcontent {
float: right;
border:2px solid #003e82;
background:#f3f6f7;
padding:10px;
}
.hc-credit {font-size:9px}
.hc-credit a {text-decoration:none}
</style>
<script type=”text/javascript”>
function showHidehcr(){
var hcr = document.getElementById(“hcr”);
var w = hcr.offsetWidth;
hcr.opened ? movehcr(0, 30-w) : movehcr(20-w, 0);
hcr.opened = !hcr.opened;
}
function movehcr(x0, xf){
var hcr = document.getElementById(“hcr”);
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
hcr.style.left = x.toString() + “px”;
if(x0!=xf){setTimeout(“movehcr(“+x+”, “+xf+”)”, 10);}
}
</script>
<div id=”hcr”>
<div class=”hcrtab” onClick=”showHidehcr()”> </div>
<div class=”hcrcontent”>Isi dengan kode Videokeman sobat
<br />
<div class=”hc-credit”>
<span style=”float:left”></span>
</div>
</div>
</div>
<script type=”text/javascript”>
var hcr = document.getElementById(“hcr”);
hcr.style.left = (30-hcr.offsetWidth).toString() + “px”;
</script>
<!– left hidden music END –>
- Tulisan berwarna kuning menunjukkan jarak tombol dari atas (dalam satuan piksel). Tulisan merah merupakan URL gambar yang akan dijadikan ‘tombol’. Ganti tulisan hijau dengan kode dari Videokeman.com yang sudah sobat dapatkan tadi.
- Selesai
Horee… Selamat mencoba dan semoga beruntung ya guys… !!!
Baca juga:
Berbagi Ilmu 
ari, aku reshare yang ini
makasi 😉
yoa silahkan 😀