Tutorial - Jquery Music Player

Boleh nampak tak ? HAHA . Okey ini request dari dia . Tapi kali ini , ain nak ajar dua-dua , untuk DENIM and BLOGSKIN . So tengok betul-betul okey . 

Contoh music player yang dimaksudkan :

BEFORE.

AFTER.

DENIM TEMPLATE

1.dashboard - design - edit html

2.cari code ni : ]]></b:skin>

3.copy code di bawah dan paste di ATAS code ]]></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;}

4. pink , warna bacground . boleh cari di SINI .

5. merah , ikut suka hati korang nak tukar ker tak . Tapi ain rasa baik tak payah tukar , nanti korang pening .

6. dashboard - design - page element - html/javascript

7.copy code nei dan paste di dalam kotak html/javascript

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

8. pink , korang ambil EMBED  CODE di youtube . Tak tahu caranya CLICK situ .

9. biru , gambar jika slide nanti . korang boleh ambil di sini :

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

10. save !

BLOGSKIN TEMPLATE

1. dashboard - template

2. cari code nei : </style>

3.copy code nei dan paste di 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. pink , warna bacground . boleh cari di SINI .

5. merah , ikut suka hati korang nak tukar ker tak . Tapi ain rasa baik tak payah tukar , nanti korang pening .


6.cari code nei :  </body>


7.copy code nei dan paste di ATAS code </body>

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

8. pink , korang ambil EMBED  CODE di youtube . Tak tahu caranya CLICK situ .

9. biru , gambar jika slide nanti . korang boleh ambil di sini :

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

10. preview and save !

credit to : BUDAK BAIK

---

THANKS FOR READING THIS :) LIKE IF YOU LIKE ♥

---