Jquery Music Player

Jquery Music Player 

Contoh music player yang dimaksudkan :

BEFORE.

AFTER.

So, I just give this tutorial tittle as Jquery Music Player memandangkan kesannya smooth gitu, haha. Pandai-pandai je aku ni -,-

FOR DENIM TEMPLATE

1) Log In blog anda.
2) Template > Edit HTML > Proceed.

3) By using your CTRL+F/F3 function, search code : 

]]></b:skin> 

4) Then, copy code ni dan paste kat ATAS code tu :

.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;}

5) Preview and SAVE.
6) Next, Layout > Add A Gadget > Choose HTML/Javascript.
7) Copy code ni dan paste kat ruangan HTML/Javascript tu :

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

8) Save and let's view your blog!

FOR BLOGSKIN

1) Baca bismillah dulu ye. By the way, untuk blogskin, Lina tak jamin jadi sebab code setiap blogskin lain-lain.
2) Next, Dashboard > Template.
3) By using your CTRL+F/F3 function, search for this code : 

</style>

4) Then, copy code ni dan paste kat ATAS code tersebut :

.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;}

5) After that, search code ni pulak : 

</body> 

6) Copy code ni dan paste kat ATAS code tersebut :

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

7) Preview and SAVE!

NOTES :

ABC : Benda alah tu amira ikut kesesuaian blog amira , so kalau rasa tak sesuai dengan blog hangpa, tukarlah ape yang patut. Kalau taknak pening, tak payah tukar :)
ABC : Position music player tu, LEFT/RIGHT.
ABC : Warna background. VIEW THIS COLOUR CHART.
ABC : Embed code MUSIC PLAYER tu, kalau taktahu boleh REFER TUTORIAL ini.
ABC : URL IMAGE yang comel lote, korang boleh cari kat  Glitter Graphics. But, ni amira ada jumpa yang amira rasa comel, kalau nak ambik, just copy the code :)

http://sl.glitter-graphics.net/pub/439/439087zf2mcug0by.gif

http://sl.glitter-graphics.net/pub/122/122842r9l2jjtjaf.gif

http://sl.glitter-graphics.net/pub/1058/1058243z9at8ciu09.gif

http://dl4.glitter-graphics.net/pub/994/994264zaow639gzm.gif

http://dl5.glitter-graphics.net/pub/220/220645u9r9sjvsfp.gif

Phewww, letih buat tutorial ni. CREDIT me ye if you use this tutorial. Penat gile duk Google-ing, but I forget where I got the code, terlupa nak bookmark pulak dah. Last-last, view code sendiri. Semoga berjaya!