Tutorial Jquery Music Player

hey hey korang apa khabar? ha nina nak ajar tuto macam mana nak buat jquery music player. ala macam nina punya tu. yang ada bentuk love dekat tepi tu kan. bila korang letak cursor dekat situ nanti benda tu jatuh. 

hehe ok ikut step ni pasti korang boleh buat juga :)

untuk pengguna TEMPLATE LAIN

1. dashboard => design => edit html => tick expand widget

2. tekan ctrl+F untuk cari code ni

]]></b:skin>

3. then, copy code di bawah ni dan pastekan code dekat ATAS ]]></b:skin>

.music {

padding:12px;

border-bottom-right-radius:5px;

background:#ffffff;

}

#ytube {

text-align: center;

position:fixed;

left:43px;

top:-55px;

-webkit-transition: all .5s ease-in-out;

-moz-transition: all .5s ease-in-out;

-o-transition: all .5s ease-in-out;

z-index:999;

}

#ytube:hover {

top:-10px;

}

#pict {

height:35px;

background:#ffffff;

border-bottom-left-radius: 5px;

border-bottom-right-radius: 5px;

width: 50px;

align:center;

}

eh eh belum siap lagi. save yang tu lepas tu ikut step ni pula :)

4. pergi Dashboard => Design => Page Element => Add Gadget => HTML/JAVASCRIPT

5. Copy code dekat bawah ni dan pastekan dekat ruangan HTML/JAWASCRIPT tu tadi

<div id='ytube'>
<div class='music'>
CODE MUSIC ANDA</div>
<div id='pict'><br/><img src='http://dl5.glitter-graphics.net/pub/220/220645u9r9sjvsfp.gif'/></div></div>

6. PREVIEW dulu dan dah puas hati SAVE lah ye :)

untuk pengguna CLASSIC TEMPLATE/BLOGSKIN

1. dashboard --> template--> edit HTML

2. tekan CTRL+F untuk search code

</style>

3. jumpa? ok lepas tu korang copy code di bawah ni dan pastekan dekat ATAS code </style>

.music {
padding:12px;
border-bottom-right-radius:5px;
background:#ffffff;
}
#ytube {
text-align: center;
position:fixed;
left:43px;
top:-55px;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
z-index:999;
}
#ytube:hover {
top:-10px;
}
#pict {
height:35px;
background:#ffffff;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
width: 50px;
align:center;
}

4. eh belum lagi siapnya. lepas tu, search code </body>
5. dah jumpa? copy code di bawah ni dan pastekan dekat ATAS code </body>

<div id='ytube'>
<div class='music'>
CODE MUSIC ANDA</div>
<div id='pict'><br/><img src='http://dl5.glitter-graphics.net/pub/220/220645u9r9sjvsfp.gif'/></div></div>

6. PREVIEW dulu dan dah puas hati SAVE lah ye :)

warna ungu : background korang boleh ubah warna ikut kesukaan

warna biru : code music yang anda suka

warna merah : picture love yang macam nina punya tu. korang boleh tukar ikut kesukaan lah ye

cara lain untuk dapatkan link mp3 >> KLIK << sini !

korang tak nak tukar pun tak apa. nina dah buat ok dah ni :) selamat mencuba!