Bagi teman-teman yang suka dengan membagikan musik kesukaan pada posting ini adalah alternatif player dan skin yang bisa dijadikan rujukan untuk diterapkan untuk menghiasai halaman anda.
Media player yang saya bagikan kali ini sudah termasuk didalamnya embed audio, tombol play, tombol pause dan tombol download, sehingga akan membuat mudah para visitor dalam menggunakannya.
Input audio pada player ini adalah file Mp3 yang sudah dihosting di media storage online seperti Google Drive atau DropBox.
Cara menempatkannya adalah dengan terlebih dahulu harus masuk Edit HTML pada Template, kemudian masukkan script dibawah ini sebelum kode </footer>.
<script src='https://cdn.rawgit.com/ardezign/js/d01329d8/a-player.js' type='text/javascript'/>
Kemudian pilih salah satu CSS/style dibawah ini yang sesuai dengan selera dan tepat diatas kode </head>.
CSS Pertama dengan kombinasi warna hijau dop.
/* Audio Responsive */
.skin {display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHa4Kr8R6yM0gTaDMNUwxBsG-rmvJ-ein7quBzQ2HtmlzcTcuWZ71bjD6iFIyiMw3SD7y7pFJLhIBj3M1ec94DBkGi0ci34_C9c975wxeCtSD_mG7iKKnwOLRMfteOvHg7eHztyhogBdg/s1600/Player16.png) center no-repeat;max-width:410px;padding:55px;margin:0 auto 0px auto;text-align:center}
.display {position:relative;display:inline-block;background-color:rgba(112, 128, 145,.50);width:180px;height:110px;padding:5px;color:#08b6ff;font-weight:700;font-size:10px;text-align:left;text-transform:uppercase;letter-spacing:0.5px;margin:auto;border:1px solid #303030;border-radius:1px;overflow:hidden;transition:all .3s}
.play {position:relative;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRLt_7vxYV57GlEB7Nwy1haQaceEFFzDLhsc_1PqxeoQzNUWdTgfhWc1-QZ4yCruVTdLyCCZDBk0XSBG9bCAF4GGyksH0sn5NNYTpNlXMYgLtx4gnWbWa6btM60LViC2hG3i366HXOdQw/s1600/Play_1.png) center no-repeat;max-width:0px;padding:22px 22px;}
.pause {position:relative;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh43QXo_MMfHKheFRO6IhlHNgMExVFygeZMIyUet_nd-Z9Nwar12RcIaJ9eTRbawVzxU2VYb041pFQMRiPyKc7_l29Xu84KoSWNxcl-fWqKMxMe0VdVR8ddgUINv1n1a05HFs-BdifpHOk/s1600/Pause_1.png) center no-repeat;max-width:0px;padding:22px 22px;}
.download {position:relative;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipJDN2mfVHnC8WVAqkAN16LHGwoOB44auQf1Xr7XHrb0yiSXhgllWY71_ezvM5rf-0n1pZ9_fVsxZhiJy84BmjQbgh7nBHc3PF2vYY3SVADXs4va8dmnO5Nd_FkmsM3pbF45zxPEl1pFA/s1600/Download_1.png) center no-repeat;max-width:0px;padding:22px 22px;}
.play:hover {position:relative;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6uelo2OlWUhflFJWEW5Ebhc8TxTVlR13GkU5yoOrBN7kfMl9r67B5bzIlsCXoDdzn3OPSF7WZ6dZZV0XdCMQ5bhb_1NQRoB1_ZvLcGglVeFLHhRjrnEBgEHNIxNtOWS1bybQ8zvCQlBA/s1600/Play_2.png) center no-repeat;max-width:0px;padding:22px 22px;}
.pause:hover {position:relative;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgF84u57e7LDUrsggc8m__wJLNUnplB7N9E29Bhl4gzwAmE4jZkdxpYSNV9ngPfCxYCJzEVp-jE3FIgI0dtzRZfA9I_Jjb7l3wv1GDBfbRuFDqrA6CUxAMNW5czp0e68hnVFIoJ9zTZPzY/s1600/Pause_2.png) center no-repeat;max-width:0px;padding:22px 22px;}
.download:hover {position:relative;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkVqGwQ3ZoZirrvCaQExDtzzDtej5HWtwvLUs3hmwjVDoC-IReh44caqYRCcukf-_DSo2t-xXerw3jYuNzBqwPw1F1-Ft8RJiuGXMzVfDE-mU61dCdZgfZpcoXZV9Kc2okAV6SIjQ5TD8/s1600/Download_2.png) center no-repeat;max-width:0px;padding:22px 22px;}
.box1 {display:inline-block;float:left;padding-left:55px;margin:7px auto 0px auto;text-align:center}
.box2 {display:inline-block;position:relative;padding:0;margin:0 auto 0px auto;text-align:center}
.box3 {display:inline-block;float:right;padding-right:55px;margin:7px auto 0px auto;text-align:center}
CSS Kedua dengan kombinasi warna kuning dop.
/* Audio Responsive */
.skin {display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDaRoCcrId8rFd6Szu8aAUlJhb8kZBhLB7vcjsFAI8MmcmozOORZ37o0HuiPZrT_WldUIX0yF6LW2cSFpCUZOMVOS1oP6AZSHO4HcWgrRCWvVagdesXWNC2IoNm2IsQ0Zh11-Y6HmtoK8/s1600/Player20.png) center no-repeat;max-width:410px;padding:55px;margin:0 auto 0px auto;text-align:center}
.display {position:relative;display:inline-block;background-color:rgba(112, 128, 145,.50);width:180px;height:110px;padding:5px;color:#08b6ff;font-weight:700;font-size:10px;text-align:left;text-transform:uppercase;letter-spacing:0.5px;margin:auto;border:1px solid #303030;border-radius:1px;overflow:hidden;transition:all .3s}
.play {position:relative;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRLt_7vxYV57GlEB7Nwy1haQaceEFFzDLhsc_1PqxeoQzNUWdTgfhWc1-QZ4yCruVTdLyCCZDBk0XSBG9bCAF4GGyksH0sn5NNYTpNlXMYgLtx4gnWbWa6btM60LViC2hG3i366HXOdQw/s1600/Play_1.png) center no-repeat;max-width:0px;padding:22px 22px;}
.pause {position:relative;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh43QXo_MMfHKheFRO6IhlHNgMExVFygeZMIyUet_nd-Z9Nwar12RcIaJ9eTRbawVzxU2VYb041pFQMRiPyKc7_l29Xu84KoSWNxcl-fWqKMxMe0VdVR8ddgUINv1n1a05HFs-BdifpHOk/s1600/Pause_1.png) center no-repeat;max-width:0px;padding:22px 22px;}
.download {position:relative;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipJDN2mfVHnC8WVAqkAN16LHGwoOB44auQf1Xr7XHrb0yiSXhgllWY71_ezvM5rf-0n1pZ9_fVsxZhiJy84BmjQbgh7nBHc3PF2vYY3SVADXs4va8dmnO5Nd_FkmsM3pbF45zxPEl1pFA/s1600/Download_1.png) center no-repeat;max-width:0px;padding:22px 22px;}
.play:hover {position:relative;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6uelo2OlWUhflFJWEW5Ebhc8TxTVlR13GkU5yoOrBN7kfMl9r67B5bzIlsCXoDdzn3OPSF7WZ6dZZV0XdCMQ5bhb_1NQRoB1_ZvLcGglVeFLHhRjrnEBgEHNIxNtOWS1bybQ8zvCQlBA/s1600/Play_2.png) center no-repeat;max-width:0px;padding:22px 22px;}
.pause:hover {position:relative;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgF84u57e7LDUrsggc8m__wJLNUnplB7N9E29Bhl4gzwAmE4jZkdxpYSNV9ngPfCxYCJzEVp-jE3FIgI0dtzRZfA9I_Jjb7l3wv1GDBfbRuFDqrA6CUxAMNW5czp0e68hnVFIoJ9zTZPzY/s1600/Pause_2.png) center no-repeat;max-width:0px;padding:22px 22px;}
.download:hover {position:relative;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkVqGwQ3ZoZirrvCaQExDtzzDtej5HWtwvLUs3hmwjVDoC-IReh44caqYRCcukf-_DSo2t-xXerw3jYuNzBqwPw1F1-Ft8RJiuGXMzVfDE-mU61dCdZgfZpcoXZV9Kc2okAV6SIjQ5TD8/s1600/Download_2.png) center no-repeat;max-width:0px;padding:22px 22px;}
.box1 {display:inline-block;float:left;padding-left:55px;margin:7px auto 0px auto;text-align:center}
.box2 {display:inline-block;position:relative;padding:0;margin:0 auto 0px auto;text-align:center}
.box3 {display:inline-block;float:right;padding-right:55px;margin:7px auto 0px auto;text-align:center}
CSS Ketiga dengan kombinasi warna hijau berpendar.
/* Audio Responsive */
.skin {display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-DWdh7ZACCY6FVdL3i-7qhFan57siDbPoTjdx3GY9mzpjXTI7C_s0EpgAQZ3fsyVepkHznpGVlANkXd8qARCRBVUgSDoE2VMhyphenhyphenOieiwhxTnbDjqnIpFaWfrQEBrCmJUIAjOlVz-XFhLg/s1600/Player8.png) center no-repeat;max-width:410px;padding:55px;margin:0 auto 0px auto;text-align:center}
.display {position:relative;display:inline-block;background-color:rgba(112, 128, 145,.50);width:180px;height:110px;padding:5px;color:#08b6ff;font-weight:700;font-size:10px;text-align:left;text-transform:uppercase;letter-spacing:0.5px;margin:auto;border:1px solid #303030;border-radius:1px;overflow:hidden;transition:all .3s}
.play {position:relative;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRLt_7vxYV57GlEB7Nwy1haQaceEFFzDLhsc_1PqxeoQzNUWdTgfhWc1-QZ4yCruVTdLyCCZDBk0XSBG9bCAF4GGyksH0sn5NNYTpNlXMYgLtx4gnWbWa6btM60LViC2hG3i366HXOdQw/s1600/Play_1.png) center no-repeat;max-width:0px;padding:22px 22px;}
.pause {position:relative;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh43QXo_MMfHKheFRO6IhlHNgMExVFygeZMIyUet_nd-Z9Nwar12RcIaJ9eTRbawVzxU2VYb041pFQMRiPyKc7_l29Xu84KoSWNxcl-fWqKMxMe0VdVR8ddgUINv1n1a05HFs-BdifpHOk/s1600/Pause_1.png) center no-repeat;max-width:0px;padding:22px 22px;}
.download {position:relative;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipJDN2mfVHnC8WVAqkAN16LHGwoOB44auQf1Xr7XHrb0yiSXhgllWY71_ezvM5rf-0n1pZ9_fVsxZhiJy84BmjQbgh7nBHc3PF2vYY3SVADXs4va8dmnO5Nd_FkmsM3pbF45zxPEl1pFA/s1600/Download_1.png) center no-repeat;max-width:0px;padding:22px 22px;}
.play:hover {position:relative;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6uelo2OlWUhflFJWEW5Ebhc8TxTVlR13GkU5yoOrBN7kfMl9r67B5bzIlsCXoDdzn3OPSF7WZ6dZZV0XdCMQ5bhb_1NQRoB1_ZvLcGglVeFLHhRjrnEBgEHNIxNtOWS1bybQ8zvCQlBA/s1600/Play_2.png) center no-repeat;max-width:0px;padding:22px 22px;}
.pause:hover {position:relative;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgF84u57e7LDUrsggc8m__wJLNUnplB7N9E29Bhl4gzwAmE4jZkdxpYSNV9ngPfCxYCJzEVp-jE3FIgI0dtzRZfA9I_Jjb7l3wv1GDBfbRuFDqrA6CUxAMNW5czp0e68hnVFIoJ9zTZPzY/s1600/Pause_2.png) center no-repeat;max-width:0px;padding:22px 22px;}
.download:hover {position:relative;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkVqGwQ3ZoZirrvCaQExDtzzDtej5HWtwvLUs3hmwjVDoC-IReh44caqYRCcukf-_DSo2t-xXerw3jYuNzBqwPw1F1-Ft8RJiuGXMzVfDE-mU61dCdZgfZpcoXZV9Kc2okAV6SIjQ5TD8/s1600/Download_2.png) center no-repeat;max-width:0px;padding:22px 22px;}
.box1 {display:inline-block;float:left;padding-left:55px;margin:7px auto 0px auto;text-align:center}
.box2 {display:inline-block;position:relative;padding:0;margin:0 auto 0px auto;text-align:center}
.box3 {display:inline-block;float:right;padding-right:55px;margin:7px auto 0px auto;text-align:center}
CSS Keempat dengan kombinasi warna kuning berpendar.
/* Audio Responsive */
.skin {display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_K1PiV8rMwT7f_f2SdfQq91SudhZm_LY1rwS7kp4udzYZ_uP3ackz3hHz9N4zZXqCySeffJgjEaneS3Z1icI-n1ZczDj8rzx9BPtMY40NyyopBepjvc4AWt5DeTiJqkatBXoDWCm6HJE/s1600/Player18.png) center no-repeat;max-width:410px;padding:55px;margin:0 auto 0px auto;text-align:center}
.display {position:relative;display:inline-block;background-color:rgba(112, 128, 145,.50);width:200px;height:110px;padding:0px 8px;color:#08b6ff;font-weight:700;font-size:10px;text-align:left;text-transform:uppercase;letter-spacing:0.5px;margin:auto;border:1px solid #303030;border-radius:1px;overflow:hidden;transition:all .3s}
.play {position:relative;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRLt_7vxYV57GlEB7Nwy1haQaceEFFzDLhsc_1PqxeoQzNUWdTgfhWc1-QZ4yCruVTdLyCCZDBk0XSBG9bCAF4GGyksH0sn5NNYTpNlXMYgLtx4gnWbWa6btM60LViC2hG3i366HXOdQw/s1600/Play_1.png) center no-repeat;max-width:0px;padding:22px 22px;}
.pause {position:relative;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh43QXo_MMfHKheFRO6IhlHNgMExVFygeZMIyUet_nd-Z9Nwar12RcIaJ9eTRbawVzxU2VYb041pFQMRiPyKc7_l29Xu84KoSWNxcl-fWqKMxMe0VdVR8ddgUINv1n1a05HFs-BdifpHOk/s1600/Pause_1.png) center no-repeat;max-width:0px;padding:22px 22px;}
.download {position:relative;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipJDN2mfVHnC8WVAqkAN16LHGwoOB44auQf1Xr7XHrb0yiSXhgllWY71_ezvM5rf-0n1pZ9_fVsxZhiJy84BmjQbgh7nBHc3PF2vYY3SVADXs4va8dmnO5Nd_FkmsM3pbF45zxPEl1pFA/s1600/Download_1.png) center no-repeat;max-width:0px;padding:22px 22px;}
.play:hover {position:relative;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6uelo2OlWUhflFJWEW5Ebhc8TxTVlR13GkU5yoOrBN7kfMl9r67B5bzIlsCXoDdzn3OPSF7WZ6dZZV0XdCMQ5bhb_1NQRoB1_ZvLcGglVeFLHhRjrnEBgEHNIxNtOWS1bybQ8zvCQlBA/s1600/Play_2.png) center no-repeat;max-width:0px;padding:22px 22px;}
.pause:hover {position:relative;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgF84u57e7LDUrsggc8m__wJLNUnplB7N9E29Bhl4gzwAmE4jZkdxpYSNV9ngPfCxYCJzEVp-jE3FIgI0dtzRZfA9I_Jjb7l3wv1GDBfbRuFDqrA6CUxAMNW5czp0e68hnVFIoJ9zTZPzY/s1600/Pause_2.png) center no-repeat;max-width:0px;padding:22px 22px;}
.download:hover {position:relative;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkVqGwQ3ZoZirrvCaQExDtzzDtej5HWtwvLUs3hmwjVDoC-IReh44caqYRCcukf-_DSo2t-xXerw3jYuNzBqwPw1F1-Ft8RJiuGXMzVfDE-mU61dCdZgfZpcoXZV9Kc2okAV6SIjQ5TD8/s1600/Download_2.png) center no-repeat;max-width:0px;padding:22px 22px;}
.box1 {display:inline-block;float:left;padding:0;margin:0 auto 0px auto;text-align:center}
.box2 {display:inline-block;position:relative;padding:0;margin:0 auto 0px auto;text-align:center}
.box3 {display:inline-block;float:right;padding:0;margin:0 auto 0px auto;text-align:center}
CSS Kelima dengan kombinasi warna biru berpendar.
/* Audio Responsive */
.skin {display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNHgpc2oRiEexxzqu8AIqMekuHrc6mNiQT4t1W6iDRpyH4E9v8WnPcbtF0JOsK3oxcCkM2PI-Fh7zWlgpAZldO5WSwo7Eu5P6L_Jw-uBVVHnK8xEnXmuXRZV7wI_ZKpLCygAHDFG1rKZM/s1600/Player4.png) center no-repeat;max-width:410px;padding:55px;margin:0 auto 0px auto;text-align:center}
.display {position:relative;display:inline-block;background-color:rgba(112, 128, 145,.50);width:180px;height:110px;padding:5px;color:#08b6ff;font-weight:700;font-size:10px;text-align:left;text-transform:uppercase;letter-spacing:0.5px;margin:auto;border:1px solid #303030;border-radius:1px;overflow:hidden;transition:all .3s}
.play {position:relative;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRLt_7vxYV57GlEB7Nwy1haQaceEFFzDLhsc_1PqxeoQzNUWdTgfhWc1-QZ4yCruVTdLyCCZDBk0XSBG9bCAF4GGyksH0sn5NNYTpNlXMYgLtx4gnWbWa6btM60LViC2hG3i366HXOdQw/s1600/Play_1.png) center no-repeat;max-width:0px;padding:22px 22px;}
.pause {position:relative;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh43QXo_MMfHKheFRO6IhlHNgMExVFygeZMIyUet_nd-Z9Nwar12RcIaJ9eTRbawVzxU2VYb041pFQMRiPyKc7_l29Xu84KoSWNxcl-fWqKMxMe0VdVR8ddgUINv1n1a05HFs-BdifpHOk/s1600/Pause_1.png) center no-repeat;max-width:0px;padding:22px 22px;}
.download {position:relative;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipJDN2mfVHnC8WVAqkAN16LHGwoOB44auQf1Xr7XHrb0yiSXhgllWY71_ezvM5rf-0n1pZ9_fVsxZhiJy84BmjQbgh7nBHc3PF2vYY3SVADXs4va8dmnO5Nd_FkmsM3pbF45zxPEl1pFA/s1600/Download_1.png) center no-repeat;max-width:0px;padding:22px 22px;}
.play:hover {position:relative;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6uelo2OlWUhflFJWEW5Ebhc8TxTVlR13GkU5yoOrBN7kfMl9r67B5bzIlsCXoDdzn3OPSF7WZ6dZZV0XdCMQ5bhb_1NQRoB1_ZvLcGglVeFLHhRjrnEBgEHNIxNtOWS1bybQ8zvCQlBA/s1600/Play_2.png) center no-repeat;max-width:0px;padding:22px 22px;}
.pause:hover {position:relative;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgF84u57e7LDUrsggc8m__wJLNUnplB7N9E29Bhl4gzwAmE4jZkdxpYSNV9ngPfCxYCJzEVp-jE3FIgI0dtzRZfA9I_Jjb7l3wv1GDBfbRuFDqrA6CUxAMNW5czp0e68hnVFIoJ9zTZPzY/s1600/Pause_2.png) center no-repeat;max-width:0px;padding:22px 22px;}
.download:hover {position:relative;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkVqGwQ3ZoZirrvCaQExDtzzDtej5HWtwvLUs3hmwjVDoC-IReh44caqYRCcukf-_DSo2t-xXerw3jYuNzBqwPw1F1-Ft8RJiuGXMzVfDE-mU61dCdZgfZpcoXZV9Kc2okAV6SIjQ5TD8/s1600/Download_2.png) center no-repeat;max-width:0px;padding:22px 22px;}
.box1 {display:inline-block;float:left;padding-left:55px;margin:7px auto 0px auto;text-align:center}
.box2 {display:inline-block;position:relative;padding:0;margin:0 auto 0px auto;text-align:center}
.box3 {display:inline-block;float:right;padding-right:55px;margin:7px auto 0px auto;text-align:center
CSS Keenam dengan kombinasi warna biru dop.
/* Audio Responsive */
.skin {display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhl9hnh8HJDsYdLh-Cj_Ux7q0vaTikYKQ_VP9zY_p0yeiJXK2AHVwkEKTiTXc0rOzEUFGTAYk-82r0vjf_yFRhKNRGPRoVXiKwP6iJjaxjkm-ADelUN7O0K0dHjWSKCtsoL3mVDJ9FTAZ8/s1600/Player10.png) center no-repeat;max-width:410px;padding:55px;margin:0 auto 0px auto;text-align:center}
.display {position:relative;display:inline-block;background-color:rgba(112, 128, 145,.50);width:180px;height:110px;padding:5px;color:#08b6ff;font-weight:700;font-size:10px;text-align:left;text-transform:uppercase;letter-spacing:0.5px;margin:auto;border:1px solid #303030;border-radius:1px;overflow:hidden;transition:all .3s}
.play {position:relative;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRLt_7vxYV57GlEB7Nwy1haQaceEFFzDLhsc_1PqxeoQzNUWdTgfhWc1-QZ4yCruVTdLyCCZDBk0XSBG9bCAF4GGyksH0sn5NNYTpNlXMYgLtx4gnWbWa6btM60LViC2hG3i366HXOdQw/s1600/Play_1.png) center no-repeat;max-width:0px;padding:22px 22px;}
.pause {position:relative;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh43QXo_MMfHKheFRO6IhlHNgMExVFygeZMIyUet_nd-Z9Nwar12RcIaJ9eTRbawVzxU2VYb041pFQMRiPyKc7_l29Xu84KoSWNxcl-fWqKMxMe0VdVR8ddgUINv1n1a05HFs-BdifpHOk/s1600/Pause_1.png) center no-repeat;max-width:0px;padding:22px 22px;}
.download {position:relative;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipJDN2mfVHnC8WVAqkAN16LHGwoOB44auQf1Xr7XHrb0yiSXhgllWY71_ezvM5rf-0n1pZ9_fVsxZhiJy84BmjQbgh7nBHc3PF2vYY3SVADXs4va8dmnO5Nd_FkmsM3pbF45zxPEl1pFA/s1600/Download_1.png) center no-repeat;max-width:0px;padding:22px 22px;}
.play:hover {position:relative;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6uelo2OlWUhflFJWEW5Ebhc8TxTVlR13GkU5yoOrBN7kfMl9r67B5bzIlsCXoDdzn3OPSF7WZ6dZZV0XdCMQ5bhb_1NQRoB1_ZvLcGglVeFLHhRjrnEBgEHNIxNtOWS1bybQ8zvCQlBA/s1600/Play_2.png) center no-repeat;max-width:0px;padding:22px 22px;}
.pause:hover {position:relative;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgF84u57e7LDUrsggc8m__wJLNUnplB7N9E29Bhl4gzwAmE4jZkdxpYSNV9ngPfCxYCJzEVp-jE3FIgI0dtzRZfA9I_Jjb7l3wv1GDBfbRuFDqrA6CUxAMNW5czp0e68hnVFIoJ9zTZPzY/s1600/Pause_2.png) center no-repeat;max-width:0px;padding:22px 22px;}
.download:hover {position:relative;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkVqGwQ3ZoZirrvCaQExDtzzDtej5HWtwvLUs3hmwjVDoC-IReh44caqYRCcukf-_DSo2t-xXerw3jYuNzBqwPw1F1-Ft8RJiuGXMzVfDE-mU61dCdZgfZpcoXZV9Kc2okAV6SIjQ5TD8/s1600/Download_2.png) center no-repeat;max-width:0px;padding:22px 22px;}
.box1 {display:inline-block;float:left;padding-left:55px;margin:7px auto 0px auto;text-align:center}
.box2 {display:inline-block;position:relative;padding:0;margin:0 auto 0px auto;text-align:center}
.box3 {display:inline-block;float:right;padding-right:55px;margin:7px auto 0px auto;text-align:center}
CSS Ketujuh dengan kombinasi warna pink berpendar.
/* Audio Responsive */
.skin {display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfGJxT9ssOWzshfbPILqNTIrTvRVVHyEHVtqPYAWJ0Zgj3GdSEmTm4yhM14N3-SsyoG7RYtHLVeNUHbMZjgbMkYef72cBYiSXScNi42jV5jxSRy42pP-5bTem5TbIt82zKLB2DIxA2npE/s1600/Player6.png) center no-repeat;max-width:410px;padding:55px;margin:0 auto 0px auto;text-align:center}
.display {position:relative;display:inline-block;background-color:rgba(112, 128, 145,.50);width:180px;height:110px;padding:5px;color:#08b6ff;font-weight:700;font-size:10px;text-align:left;text-transform:uppercase;letter-spacing:0.5px;margin:auto;border:1px solid #303030;border-radius:1px;overflow:hidden;transition:all .3s}
.play {position:relative;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRLt_7vxYV57GlEB7Nwy1haQaceEFFzDLhsc_1PqxeoQzNUWdTgfhWc1-QZ4yCruVTdLyCCZDBk0XSBG9bCAF4GGyksH0sn5NNYTpNlXMYgLtx4gnWbWa6btM60LViC2hG3i366HXOdQw/s1600/Play_1.png) center no-repeat;max-width:0px;padding:22px 22px;}
.pause {position:relative;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh43QXo_MMfHKheFRO6IhlHNgMExVFygeZMIyUet_nd-Z9Nwar12RcIaJ9eTRbawVzxU2VYb041pFQMRiPyKc7_l29Xu84KoSWNxcl-fWqKMxMe0VdVR8ddgUINv1n1a05HFs-BdifpHOk/s1600/Pause_1.png) center no-repeat;max-width:0px;padding:22px 22px;}
.download {position:relative;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipJDN2mfVHnC8WVAqkAN16LHGwoOB44auQf1Xr7XHrb0yiSXhgllWY71_ezvM5rf-0n1pZ9_fVsxZhiJy84BmjQbgh7nBHc3PF2vYY3SVADXs4va8dmnO5Nd_FkmsM3pbF45zxPEl1pFA/s1600/Download_1.png) center no-repeat;max-width:0px;padding:22px 22px;}
.play:hover {position:relative;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6uelo2OlWUhflFJWEW5Ebhc8TxTVlR13GkU5yoOrBN7kfMl9r67B5bzIlsCXoDdzn3OPSF7WZ6dZZV0XdCMQ5bhb_1NQRoB1_ZvLcGglVeFLHhRjrnEBgEHNIxNtOWS1bybQ8zvCQlBA/s1600/Play_2.png) center no-repeat;max-width:0px;padding:22px 22px;}
.pause:hover {position:relative;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgF84u57e7LDUrsggc8m__wJLNUnplB7N9E29Bhl4gzwAmE4jZkdxpYSNV9ngPfCxYCJzEVp-jE3FIgI0dtzRZfA9I_Jjb7l3wv1GDBfbRuFDqrA6CUxAMNW5czp0e68hnVFIoJ9zTZPzY/s1600/Pause_2.png) center no-repeat;max-width:0px;padding:22px 22px;}
.download:hover {position:relative;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkVqGwQ3ZoZirrvCaQExDtzzDtej5HWtwvLUs3hmwjVDoC-IReh44caqYRCcukf-_DSo2t-xXerw3jYuNzBqwPw1F1-Ft8RJiuGXMzVfDE-mU61dCdZgfZpcoXZV9Kc2okAV6SIjQ5TD8/s1600/Download_2.png) center no-repeat;max-width:0px;padding:22px 22px;}
.box1 {display:inline-block;float:left;padding-left:55px;margin:7px auto 0px auto;text-align:center}
.box2 {display:inline-block;position:relative;padding:0;margin:0 auto 0px auto;text-align:center}
.box3 {display:inline-block;float:right;padding-right:55px;margin:7px auto 0px auto;text-align:center}
CSS Kedelapan dengan kombinasi warna pink dop.
/* Audio Responsive */
.skin {display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgck3Wg_FeLPmJP2jCX0wNFEEVF_o8ALNV_waqFEZgdBD3_TZrDK-qlQR4ik7wPejo0cUAJO2ywdNcCMZlJ_6hg5w2zrNX8VtuQFd_sd6Iamq2OVq072Z9aYqlqCBW5E31wofzvLyKSfNM/s1600/Player14.png) center no-repeat;max-width:410px;padding:55px;margin:0 auto 0px auto;text-align:center}
.display {position:relative;display:inline-block;background-color:rgba(112, 128, 145,.50);width:180px;height:110px;padding:5px;color:#08b6ff;font-weight:700;font-size:10px;text-align:left;text-transform:uppercase;letter-spacing:0.5px;margin:auto;border:1px solid #303030;border-radius:1px;overflow:hidden;transition:all .3s}
.play {position:relative;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRLt_7vxYV57GlEB7Nwy1haQaceEFFzDLhsc_1PqxeoQzNUWdTgfhWc1-QZ4yCruVTdLyCCZDBk0XSBG9bCAF4GGyksH0sn5NNYTpNlXMYgLtx4gnWbWa6btM60LViC2hG3i366HXOdQw/s1600/Play_1.png) center no-repeat;max-width:0px;padding:22px 22px;}
.pause {position:relative;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh43QXo_MMfHKheFRO6IhlHNgMExVFygeZMIyUet_nd-Z9Nwar12RcIaJ9eTRbawVzxU2VYb041pFQMRiPyKc7_l29Xu84KoSWNxcl-fWqKMxMe0VdVR8ddgUINv1n1a05HFs-BdifpHOk/s1600/Pause_1.png) center no-repeat;max-width:0px;padding:22px 22px;}
.download {position:relative;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipJDN2mfVHnC8WVAqkAN16LHGwoOB44auQf1Xr7XHrb0yiSXhgllWY71_ezvM5rf-0n1pZ9_fVsxZhiJy84BmjQbgh7nBHc3PF2vYY3SVADXs4va8dmnO5Nd_FkmsM3pbF45zxPEl1pFA/s1600/Download_1.png) center no-repeat;max-width:0px;padding:22px 22px;}
.play:hover {position:relative;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6uelo2OlWUhflFJWEW5Ebhc8TxTVlR13GkU5yoOrBN7kfMl9r67B5bzIlsCXoDdzn3OPSF7WZ6dZZV0XdCMQ5bhb_1NQRoB1_ZvLcGglVeFLHhRjrnEBgEHNIxNtOWS1bybQ8zvCQlBA/s1600/Play_2.png) center no-repeat;max-width:0px;padding:22px 22px;}
.pause:hover {position:relative;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgF84u57e7LDUrsggc8m__wJLNUnplB7N9E29Bhl4gzwAmE4jZkdxpYSNV9ngPfCxYCJzEVp-jE3FIgI0dtzRZfA9I_Jjb7l3wv1GDBfbRuFDqrA6CUxAMNW5czp0e68hnVFIoJ9zTZPzY/s1600/Pause_2.png) center no-repeat;max-width:0px;padding:22px 22px;}
.download:hover {position:relative;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkVqGwQ3ZoZirrvCaQExDtzzDtej5HWtwvLUs3hmwjVDoC-IReh44caqYRCcukf-_DSo2t-xXerw3jYuNzBqwPw1F1-Ft8RJiuGXMzVfDE-mU61dCdZgfZpcoXZV9Kc2okAV6SIjQ5TD8/s1600/Download_2.png) center no-repeat;max-width:0px;padding:22px 22px;}
.box1 {display:inline-block;float:left;padding-left:55px;margin:7px auto 0px auto;text-align:center}
.box2 {display:inline-block;position:relative;padding:0;margin:0 auto 0px auto;text-align:center}
.box3 {display:inline-block;float:right;padding-right:55px;margin:7px auto 0px auto;text-align:center}
CSS Kesembilan dengan kombinasi warna merah dop.
/* Audio Responsive */
.skin {display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPyneHPHhUWZ2fXZTESRcdSjK3sVGo78bzTk6j3R8NRjUo4AdlwfvBYKTi7mYgWcL_4xiVzJWkUl4AFukCDdZnLsla8X2NOUlHWL-wA_lgVYGxi8FQ49JPBFi_ecikzGNUAi2fz7Ot6w4/s1600/Player12.png) center no-repeat;max-width:410px;padding:55px;margin:0 auto 0px auto;text-align:center}
.display {position:relative;display:inline-block;background-color:rgba(112, 128, 145,.50);width:180px;height:110px;padding:5px;color:#08b6ff;font-weight:700;font-size:10px;text-align:left;text-transform:uppercase;letter-spacing:0.5px;margin:auto;border:1px solid #303030;border-radius:1px;overflow:hidden;transition:all .3s}
.play {position:relative;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRLt_7vxYV57GlEB7Nwy1haQaceEFFzDLhsc_1PqxeoQzNUWdTgfhWc1-QZ4yCruVTdLyCCZDBk0XSBG9bCAF4GGyksH0sn5NNYTpNlXMYgLtx4gnWbWa6btM60LViC2hG3i366HXOdQw/s1600/Play_1.png) center no-repeat;max-width:0px;padding:22px 22px;}
.pause {position:relative;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh43QXo_MMfHKheFRO6IhlHNgMExVFygeZMIyUet_nd-Z9Nwar12RcIaJ9eTRbawVzxU2VYb041pFQMRiPyKc7_l29Xu84KoSWNxcl-fWqKMxMe0VdVR8ddgUINv1n1a05HFs-BdifpHOk/s1600/Pause_1.png) center no-repeat;max-width:0px;padding:22px 22px;}
.download {position:relative;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipJDN2mfVHnC8WVAqkAN16LHGwoOB44auQf1Xr7XHrb0yiSXhgllWY71_ezvM5rf-0n1pZ9_fVsxZhiJy84BmjQbgh7nBHc3PF2vYY3SVADXs4va8dmnO5Nd_FkmsM3pbF45zxPEl1pFA/s1600/Download_1.png) center no-repeat;max-width:0px;padding:22px 22px;}
.play:hover {position:relative;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6uelo2OlWUhflFJWEW5Ebhc8TxTVlR13GkU5yoOrBN7kfMl9r67B5bzIlsCXoDdzn3OPSF7WZ6dZZV0XdCMQ5bhb_1NQRoB1_ZvLcGglVeFLHhRjrnEBgEHNIxNtOWS1bybQ8zvCQlBA/s1600/Play_2.png) center no-repeat;max-width:0px;padding:22px 22px;}
.pause:hover {position:relative;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgF84u57e7LDUrsggc8m__wJLNUnplB7N9E29Bhl4gzwAmE4jZkdxpYSNV9ngPfCxYCJzEVp-jE3FIgI0dtzRZfA9I_Jjb7l3wv1GDBfbRuFDqrA6CUxAMNW5czp0e68hnVFIoJ9zTZPzY/s1600/Pause_2.png) center no-repeat;max-width:0px;padding:22px 22px;}
.download:hover {position:relative;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkVqGwQ3ZoZirrvCaQExDtzzDtej5HWtwvLUs3hmwjVDoC-IReh44caqYRCcukf-_DSo2t-xXerw3jYuNzBqwPw1F1-Ft8RJiuGXMzVfDE-mU61dCdZgfZpcoXZV9Kc2okAV6SIjQ5TD8/s1600/Download_2.png) center no-repeat;max-width:0px;padding:22px 22px;}
.box1 {display:inline-block;float:left;padding-left:55px;margin:7px auto 0px auto;text-align:center}
.box2 {display:inline-block;position:relative;padding:0;margin:0 auto 0px auto;text-align:center}
.box3 {display:inline-block;float:right;padding-right:55px;margin:7px auto 0px auto;text-align:center}
CSS Kesepuluh dengan kombinasi warna merah berpendar.
/* Audio Responsive */
.skin {display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheCXyIwK8rr0PT5J7PPK7tq3eEHWUMk7zsJGBP3rGVl7d7lOZx5UXb60bv-d6j2OOu6jvllLeoqipsrzQ3IbcvtZPMqR81QAjqMWNT85ykxp6rKiSEJWQENlP56xp9I0Mimnsk2HASqXA/s1600/Player2.png) center no-repeat;max-width:410px;padding:55px;margin:0 auto 0px auto;text-align:center}
.display {position:relative;display:inline-block;background-color:rgba(112, 128, 145,.50);width:180px;height:110px;padding:5px;color:#08b6ff;font-weight:700;font-size:10px;text-align:left;text-transform:uppercase;letter-spacing:0.5px;margin:auto;border:1px solid #303030;border-radius:1px;overflow:hidden;transition:all .3s}
.play {position:relative;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRLt_7vxYV57GlEB7Nwy1haQaceEFFzDLhsc_1PqxeoQzNUWdTgfhWc1-QZ4yCruVTdLyCCZDBk0XSBG9bCAF4GGyksH0sn5NNYTpNlXMYgLtx4gnWbWa6btM60LViC2hG3i366HXOdQw/s1600/Play_1.png) center no-repeat;max-width:0px;padding:22px 22px;}
.pause {position:relative;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh43QXo_MMfHKheFRO6IhlHNgMExVFygeZMIyUet_nd-Z9Nwar12RcIaJ9eTRbawVzxU2VYb041pFQMRiPyKc7_l29Xu84KoSWNxcl-fWqKMxMe0VdVR8ddgUINv1n1a05HFs-BdifpHOk/s1600/Pause_1.png) center no-repeat;max-width:0px;padding:22px 22px;}
.download {position:relative;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipJDN2mfVHnC8WVAqkAN16LHGwoOB44auQf1Xr7XHrb0yiSXhgllWY71_ezvM5rf-0n1pZ9_fVsxZhiJy84BmjQbgh7nBHc3PF2vYY3SVADXs4va8dmnO5Nd_FkmsM3pbF45zxPEl1pFA/s1600/Download_1.png) center no-repeat;max-width:0px;padding:22px 22px;}
.play:hover {position:relative;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6uelo2OlWUhflFJWEW5Ebhc8TxTVlR13GkU5yoOrBN7kfMl9r67B5bzIlsCXoDdzn3OPSF7WZ6dZZV0XdCMQ5bhb_1NQRoB1_ZvLcGglVeFLHhRjrnEBgEHNIxNtOWS1bybQ8zvCQlBA/s1600/Play_2.png) center no-repeat;max-width:0px;padding:22px 22px;}
.pause:hover {position:relative;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgF84u57e7LDUrsggc8m__wJLNUnplB7N9E29Bhl4gzwAmE4jZkdxpYSNV9ngPfCxYCJzEVp-jE3FIgI0dtzRZfA9I_Jjb7l3wv1GDBfbRuFDqrA6CUxAMNW5czp0e68hnVFIoJ9zTZPzY/s1600/Pause_2.png) center no-repeat;max-width:0px;padding:22px 22px;}
.download:hover {position:relative;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkVqGwQ3ZoZirrvCaQExDtzzDtej5HWtwvLUs3hmwjVDoC-IReh44caqYRCcukf-_DSo2t-xXerw3jYuNzBqwPw1F1-Ft8RJiuGXMzVfDE-mU61dCdZgfZpcoXZV9Kc2okAV6SIjQ5TD8/s1600/Download_2.png) center no-repeat;max-width:0px;padding:22px 22px;}
.box1 {display:inline-block;float:left;padding-left:55px;margin:7px auto 0px auto;text-align:center}
.box2 {display:inline-block;position:relative;padding:0;margin:0 auto 0px auto;text-align:center}
.box3 {display:inline-block;float:right;padding-right:55px;margin:7px auto 0px auto;text-align:center}
Kemudian klik tombol SAVE template.
Untuk penempatan pada entri posting bisa pakai kode dibawah ini.
<div class="skin">
<audio id="skindesign">
<source src="XX" type="audio/mpeg"></source>
Your browser does not support the audio element.
</audio>
<div class="box1">
<alt="Play Audio" title="Play Audio"/><a class="play" button onclick="playAudio()"></a><br />
<alt="Pause Audio" title="Pause Audio"/><a class="pause" button onclick="pauseAudio()"></a>
</div>
<div class="box2">
<alt="Music Info" title="Music Info"/><a class="display">Judul : XXXXX<br />Artis : XXXXX<br />Album : XXXXX<br />Genre : XXXXX</a>
</div>
<div class="box3">
<alt="Download 1" title="Download 1"/><a class="download" href="XXX"></a><br />
<alt="Download 2" title="Download 2"/><a class="download" href="XXXX"></a>
</div>
</div>
Pada teks box XX adalah link file Mp3 untuk player.
Pada teks box XXX adalah link file Mp3 untuk download 1.
Pada teks box XXXX adalah link file Mp3 untuk download 2.
Pada teks box XXXXX adalah deskripsi file Mp3.
Kemudian klik tombol publish dan jangan lupa untuk lihat hasilnya, selamat berkarya....
Saya sebagai penulis siap untuk menerima kritik, keluhan dan juga saran dari anda, kerena dengan begitu berarti keberadaan saya sudah dianggap bagian dari teman-teman semua, terima kasih atas kunjungannya.
Show Parser Hide Parser