Kali ini saya coba berbagi untuk teman-teman yang sangat hobi dengan musik dan mempunyai keinginan membuat sebuah halaman blog yang didalamnya berisi file audio, baik difungsikan sebagai pelengkap maupun yang lebih khusus pada pemanfaatan halaman blog untuk berbagi file audio yang bisa didownload.
Tampilan embed audio yang saya bagikan ini sangat sederhana hanya dibalut dengan image vektor dengan bentuk smartphone dalam pososi portrait dan dilengkapi dengan beberapa tombol pintasan seperti: Play, Pause, Link 1, Link 2 dan merupakan fungsi yang terhubung langsung dengan file audio yang dibagikan.
Langkah penempatan embed audio ini sangat mudah dan tidak perlu pengetahuan khusus, cukup ikuti langkah-langkah sederhana dibawah ini.
Letakkan kode script dibawah ini tepat diatas kode </footer>.
<script>
var x = document.getElementById("skindesign");
function playAudio(){x.play();}
function pauseAudio(){x.pause();}
function stopAudio(){x.stop();}
</script>
Kemudian pilih salah satu CSS/style dibawah ini yang sesuai dengan warna dasar template dan letakkan pada bagian style sebelum kode </head>..
Kode CSS satu dengan dominan warna biru.
/* Audio Responsive */
.skin {display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUocrdI7s3pFKrsj_whf9EXKmy_iFd5uw1IKUR-W78h-ARtok9Kt823GbqsOt88HEatmo90JF32gFaquqeOKjs0WxGrzxMfMn5SVG8PepJEM7iBT1Ue8bibtDdvnHTHbog2PfGLq8OZOI/s1600/Player100.png) center no-repeat;max-width:350px;padding:120px;margin:0 auto 0px auto;text-align:center}
.display {position:relative;display:inline-block;background-color:transparent;width:180px;height:110px;padding:0px 8px;color:#00a8ec;font-weight:700;font-size:10px;text-align:center;text-transform:uppercase;letter-spacing:0.5px;margin:auto;border:0px solid #fff;border-radius:1px;overflow:hidden;transition:all .3s;top:30px}
.play {position:relative;display:inline-block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2cPAmLIrC4CNgJA6pc7wiRkVA3IX5Q5OaTSRYwTRSyM-VANU6w5FboGkeN6fvot5z8sQxREIhpxuPFaQ68Ll870W3EH2pFqCvjYRvMBBZYYkZDgwLBhdKaRJpmNw7c1rqri_5W2xMNfY/s1600/Play_11.png) center no-repeat;max-width:0px;padding:18px 18px;top:77px}
.pause {position:relative;display:inline-block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMhjFVjWEP2w5M47o3rmLxTVJ_L0Zb5avj3CJig6sw2_Rpab11LJ5qPAAQYcZBzBX_kD7MRxLcbbWAal1fWuv3fPY8j0jg4Ot8G_Uj0DxJDJVrbiTe4G4qPmT21KeTFvd6XQTXEp6vKAE/s1600/Pause_11.png) center no-repeat;max-width:0px;padding:18px 18px;top:77px}
.download {position:relative;display:inline-block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgh6AaGZUsa9FNxwtidaRaxqpM6HwPAJm10lwL4BE-6F_nZMSjsTprOSybN05tBLlGdo1gUSpo-6v-Rc2lajf0pjVg71jxVIgKNdBz88IvVJfyXYUdlqr9txOnyBycA8YBhcadso-xd0w/s1600/Download_11.png) center no-repeat;max-width:0px;padding:18px 18px;top:77px}
.play:hover {position:relative;display:inline-block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNpN_GjvLPQMAZD3H_yE7ZpKdt781psU8-O698Pgc_y7SHGz3huhC8kPJpRcFdiJ9qKdWrpZgyTrdY6W5ZPBLZqUfzSwQM89txOTLynsMca23LFITfDftJyuBNb_gPF7mn4USt8tETizM/s1600/Play_12.png) center no-repeat;max-width:0px;padding:18px 18px;top:77px}
.pause:hover {position:relative;display:inline-block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2wCq3YXU9VlkEd3M7B-Jy8nIIashl0x7RNZ67ELUlJygHR8nj436F9_wMqgooGLfjZXs9pMnUrVkOKNXehbU_ja_WEH3PIDcH44mvpd3jWpkGlTgLea8BXJ-e1UFBBrKYF36EBVEPmdg/s1600/Pause_12.png) center no-repeat;max-width:0px;padding:18px 18px;top:77px}
.download:hover {position:relative;display:inline-block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiC4J2SArIFgXSImHfdgf0S3T1qNWEtTiuFNQZIER4TPgdIQ6e81yHIu_04gqRjS8_YwZBP10N-d6Q5F9gtoCpsBe-JAyao5qPOZx7YxIlogGSgeVeVCQmrX-TJc8TxbH6WY0s6CFQm468/s1600/Download_12.png) center no-repeat;max-width:0px;padding:18px 18px;top:77px}
.play3 {position:relative;display:block;background:url() center no-repeat;max-width:0px;padding:22px 22px;bottom:31px}
.box1 {display:inline-block;float:left;padding:0;margin:0 auto 0px auto;text-align:center;bottom:31px}
.box2 {display:inline-block;position:relative;padding:0;margin:0 auto 0px auto;text-align:center}
.box3 {display:inline-block;float:center;padding:0;margin:0 auto 0px auto;text-align:center;bottom:31px}
Kode CSS dua dengan dominan warna hijau.
/* Audio Responsive */
.skin {display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtXf_Wsuh_vk5tB05cniYE6ROBU0WTebQgAkqvxvlEydT27lSKWXmlDaLYOIWtD3M0FFklfk-9O7oYUgb3WCY8VFZAUwDpsVX86d7XZUt37IH0AW9QbKyGWZoIoykOCiMT0FHU9ljuHH0/s1600/Player101.png) center no-repeat;max-width:350px;padding:120px;margin:0 auto 0px auto;text-align:center}
.display {position:relative;display:inline-block;background-color:transparent;width:180px;height:110px;padding:0px 8px;color:#009f3c;font-weight:700;font-size:10px;text-align:center;text-transform:uppercase;letter-spacing:0.5px;margin:auto;border:0px solid #fff;border-radius:1px;overflow:hidden;transition:all .3s;top:30px}
.play {position:relative;display:inline-block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2cPAmLIrC4CNgJA6pc7wiRkVA3IX5Q5OaTSRYwTRSyM-VANU6w5FboGkeN6fvot5z8sQxREIhpxuPFaQ68Ll870W3EH2pFqCvjYRvMBBZYYkZDgwLBhdKaRJpmNw7c1rqri_5W2xMNfY/s1600/Play_11.png) center no-repeat;max-width:0px;padding:18px 18px;top:77px}
.pause {position:relative;display:inline-block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMhjFVjWEP2w5M47o3rmLxTVJ_L0Zb5avj3CJig6sw2_Rpab11LJ5qPAAQYcZBzBX_kD7MRxLcbbWAal1fWuv3fPY8j0jg4Ot8G_Uj0DxJDJVrbiTe4G4qPmT21KeTFvd6XQTXEp6vKAE/s1600/Pause_11.png) center no-repeat;max-width:0px;padding:18px 18px;top:77px}
.download {position:relative;display:inline-block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgh6AaGZUsa9FNxwtidaRaxqpM6HwPAJm10lwL4BE-6F_nZMSjsTprOSybN05tBLlGdo1gUSpo-6v-Rc2lajf0pjVg71jxVIgKNdBz88IvVJfyXYUdlqr9txOnyBycA8YBhcadso-xd0w/s1600/Download_11.png) center no-repeat;max-width:0px;padding:18px 18px;top:77px}
.play:hover {position:relative;display:inline-block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVNujTKKb5ae4WgAm1I1Lpx9nvI6qOPcQw4jP4HJwgg7O0IJghgZL3cV5d-k-VjuBd5NuM4zI-Xs9HzvlBmz6ACF5nBVcOLZidSLZ375Cs3bzWyeu9dsRyFWjtX7WxgyuWn2e-Ur_g_Jw/s1600/Play_13.png) center no-repeat;max-width:0px;padding:18px 18px;top:77px}
.pause:hover {position:relative;display:inline-block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzBkaOPid1i-uteWkEhAOcyxUXPh6nPYBBoQlFTnTUZpPfS80s1STt-pUiDqaT5STAZ7KdvjnvjSC624tHBX59RA6I4xzQtL0IQmoiAI80ZjPthyy8aQGo9pCeygI68kg9DHbet3lyy94/s1600/Pause_13.png) center no-repeat;max-width:0px;padding:18px 18px;top:77px}
.download:hover {position:relative;display:inline-block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPrlFesa7Ln8GdHXr_LDrPW4xOcqOsQCcBjA6DcRYHKg9eKb1cbdTZo9NuZow6wFc2wW8ki0102YtGdQ9du7ge-NLr3x0eSLz8nNIXDpfat6iH1SpnQF8NL2v9-qCKn5yk6OCoJNQnDdM/s1600/Download_13.png) center no-repeat;max-width:0px;padding:18px 18px;top:77px}
.play3 {position:relative;display:block;background:url() center no-repeat;max-width:0px;padding:22px 22px;bottom:31px}
.box1 {display:inline-block;float:left;padding:0;margin:0 auto 0px auto;text-align:center;bottom:31px}
.box2 {display:inline-block;position:relative;padding:0;margin:0 auto 0px auto;text-align:center}
.box3 {display:inline-block;float:center;padding:0;margin:0 auto 0px auto;text-align:center;bottom:31px}
Kode CSS tiga dengan dominan warna kuning.
/* Audio Responsive */
.skin {display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvUx8waCR_pov6sF1q20IletuNkwy7LgoINLE8-dAy3bdMtCZNgOMRV29S7PML53324Vzk2RAF7deSCNHzLtVzxEaAkA5inqnkCDtmb6LkccevFAJyUerLf4M22YfKZzDNHbPRohyphenhyphen2HW4/s1600/Player102.png) center no-repeat;max-width:350px;padding:120px;margin:0 auto 0px auto;text-align:center}
.display {position:relative;display:inline-block;background-color:transparent;width:180px;height:110px;padding:0px 8px;color:#ffff00;font-weight:700;font-size:10px;text-align:center;text-transform:uppercase;letter-spacing:0.5px;margin:auto;border:0px solid #fff;border-radius:1px;overflow:hidden;transition:all .3s;top:30px}
.play {position:relative;display:inline-block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2cPAmLIrC4CNgJA6pc7wiRkVA3IX5Q5OaTSRYwTRSyM-VANU6w5FboGkeN6fvot5z8sQxREIhpxuPFaQ68Ll870W3EH2pFqCvjYRvMBBZYYkZDgwLBhdKaRJpmNw7c1rqri_5W2xMNfY/s1600/Play_11.png) center no-repeat;max-width:0px;padding:18px 18px;top:77px}
.pause {position:relative;display:inline-block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMhjFVjWEP2w5M47o3rmLxTVJ_L0Zb5avj3CJig6sw2_Rpab11LJ5qPAAQYcZBzBX_kD7MRxLcbbWAal1fWuv3fPY8j0jg4Ot8G_Uj0DxJDJVrbiTe4G4qPmT21KeTFvd6XQTXEp6vKAE/s1600/Pause_11.png) center no-repeat;max-width:0px;padding:18px 18px;top:77px}
.download {position:relative;display:inline-block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgh6AaGZUsa9FNxwtidaRaxqpM6HwPAJm10lwL4BE-6F_nZMSjsTprOSybN05tBLlGdo1gUSpo-6v-Rc2lajf0pjVg71jxVIgKNdBz88IvVJfyXYUdlqr9txOnyBycA8YBhcadso-xd0w/s1600/Download_11.png) center no-repeat;max-width:0px;padding:18px 18px;top:77px}
.play:hover {position:relative;display:inline-block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilDj4M3zTDAqy1ByonlTixbdfJgx_SB-VW5mm3yKBIPXYKq1rBvFapVkY1HTT78Xs8j7jxGdEDU_GryB71C1TGjPWcX190YdUNKuxqBU2_KNQoGxDQgINwdfopW7i8LxIWW0RP09a9x7c/s1600/Play_14.png) center no-repeat;max-width:0px;padding:18px 18px;top:77px}
.pause:hover {position:relative;display:inline-block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMyi3An9Y6FJH7hhJMadEHZUVHOSdItuZS6jiyScSsEjVW9PQdwRrNYXrZa9-Ia3iAdg89V5EYDsEovBs-p8pFTxO6dSrw1tHPwufKMfnjcpznb06fndxrPGptiUmBYHba6HGCBZBuzXU/s1600/Pause_14.png) center no-repeat;max-width:0px;padding:18px 18px;top:77px}
.download:hover {position:relative;display:inline-block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4Rlk2iqKBZ11K2Dn4NheyHpaJ3cAD_5JWpnAAb7bBJ0ACSRDhW5crmdVWMiZRAB4CL4PYgz8RvqsxSPc1L4g9vbPVX5q9y3HKaLjvNq3FvVi1JhSZVAIcM-P1rppCALHEEpGXB0bpVfA/s1600/Download_14.png) center no-repeat;max-width:0px;padding:18px 18px;top:77px}
.play3 {position:relative;display:block;background:url() center no-repeat;max-width:0px;padding:22px 22px;bottom:31px}
.box1 {display:inline-block;float:left;padding:0;margin:0 auto 0px auto;text-align:center;bottom:31px}
.box2 {display:inline-block;position:relative;padding:0;margin:0 auto 0px auto;text-align:center}
.box3 {display:inline-block;float:center;padding:0;margin:0 auto 0px auto;text-align:center;bottom:31px}
Kode CSS empat dengan dominan warna merah.
/* Audio Responsive */
.skin {display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiceZsKeJg7Y7LrBXmik8VFHFsuMVn4mgYcf0cKpcdHI5rhlCTOc5CpU0VlqpUQG1geFRits1SVGBhT9eK95ZdXCWeTVzVqoWXzxB3445NlKSHnkJggprlW0SLxSjBg1L791oD7Yk3PrrM/s1600/Player103.png) center no-repeat;max-width:350px;padding:120px;margin:0 auto 0px auto;text-align:center}
.display {position:relative;display:inline-block;background-color:transparent;width:180px;height:110px;padding:0px 8px;color:#ff0000;font-weight:700;font-size:10px;text-align:center;text-transform:uppercase;letter-spacing:0.5px;margin:auto;border:0px solid #fff;border-radius:1px;overflow:hidden;transition:all .3s;top:30px}
.play {position:relative;display:inline-block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2cPAmLIrC4CNgJA6pc7wiRkVA3IX5Q5OaTSRYwTRSyM-VANU6w5FboGkeN6fvot5z8sQxREIhpxuPFaQ68Ll870W3EH2pFqCvjYRvMBBZYYkZDgwLBhdKaRJpmNw7c1rqri_5W2xMNfY/s1600/Play_11.png) center no-repeat;max-width:0px;padding:18px 18px;top:77px}
.pause {position:relative;display:inline-block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMhjFVjWEP2w5M47o3rmLxTVJ_L0Zb5avj3CJig6sw2_Rpab11LJ5qPAAQYcZBzBX_kD7MRxLcbbWAal1fWuv3fPY8j0jg4Ot8G_Uj0DxJDJVrbiTe4G4qPmT21KeTFvd6XQTXEp6vKAE/s1600/Pause_11.png) center no-repeat;max-width:0px;padding:18px 18px;top:77px}
.download {position:relative;display:inline-block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgh6AaGZUsa9FNxwtidaRaxqpM6HwPAJm10lwL4BE-6F_nZMSjsTprOSybN05tBLlGdo1gUSpo-6v-Rc2lajf0pjVg71jxVIgKNdBz88IvVJfyXYUdlqr9txOnyBycA8YBhcadso-xd0w/s1600/Download_11.png) center no-repeat;max-width:0px;padding:18px 18px;top:77px}
.play:hover {position:relative;display:inline-block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuga2t_o9_e85bIKgvI9wHB1N51WXdSN7PMtFjQ-LD1pAC9lsPudv23LjZ_NSJDa9wkuTUv2MQFw1cPAg11T6qrfoII6RUAS4wvy0cJ0sZzpsudQlQiklkUtUnvBwQFSAHqWvWpdAPzOY/s1600/Play_15.png) center no-repeat;max-width:0px;padding:18px 18px;top:77px}
.pause:hover {position:relative;display:inline-block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgU6Mcc_DMHkV195c5Enz94IVi2K4laRSwsbKTfNyE-fh1hc_WU-1tj4PSy3zyCHX8TImBKflkAMUIhTAE6IKZwtk32bXXo_rNrNEGpW-_zU25RB0tUBUIhzVMTDvmaJOmZf0i5QANJHug/s1600/Pause_15.png) center no-repeat;max-width:0px;padding:18px 18px;top:77px}
.download:hover {position:relative;display:inline-block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKnXLSZLNc5S_UzE_YOQ4Hxbz88nRNdQyItoCoNg-d6msPwkJq1M_bab8xqSFX_Z6irp2CCHzzN0wRSSOL1S-_QtJOPnckwPWA5B3_sCEz05uqR7ZSz4bik8wOq11Ni-VwADZCdmZrz3Y/s1600/Download_15.png) center no-repeat;max-width:0px;padding:18px 18px;top:77px}
.play3 {position:relative;display:block;background:url() center no-repeat;max-width:0px;padding:22px 22px;bottom:31px}
.box1 {display:inline-block;float:left;padding:0;margin:0 auto 0px auto;text-align:center;bottom:31px}
.box2 {display:inline-block;position:relative;padding:0;margin:0 auto 0px auto;text-align:center}
.box3 {display:inline-block;float:center;padding:0;margin:0 auto 0px auto;text-align:center;bottom:31px}
Kode CSS empat dengan dominan warna pink.
/* Audio Responsive */
.skin {display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguyCSQQXrEpxm2QNdCKbvHVkNhXWQjDFHVj-Ob47attQi_ls3M4B176pvI05AEMDGADxSUWup-pIRfPiHcnEtXMjAJwABrTV1c8rS_akqvuJE9boAxPOvDI9IpWTK1oXu6vwj0HmG8Pbc/s1600/Player104.png) center no-repeat;max-width:350px;padding:120px;margin:0 auto 0px auto;text-align:center}
.display {position:relative;display:inline-block;background-color:transparent;width:180px;height:110px;padding:0px 8px;color:#ff00ff;font-weight:700;font-size:10px;text-align:center;text-transform:uppercase;letter-spacing:0.5px;margin:auto;border:0px solid #fff;border-radius:1px;overflow:hidden;transition:all .3s;top:30px}
.play {position:relative;display:inline-block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2cPAmLIrC4CNgJA6pc7wiRkVA3IX5Q5OaTSRYwTRSyM-VANU6w5FboGkeN6fvot5z8sQxREIhpxuPFaQ68Ll870W3EH2pFqCvjYRvMBBZYYkZDgwLBhdKaRJpmNw7c1rqri_5W2xMNfY/s1600/Play_11.png) center no-repeat;max-width:0px;padding:18px 18px;top:77px}
.pause {position:relative;display:inline-block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMhjFVjWEP2w5M47o3rmLxTVJ_L0Zb5avj3CJig6sw2_Rpab11LJ5qPAAQYcZBzBX_kD7MRxLcbbWAal1fWuv3fPY8j0jg4Ot8G_Uj0DxJDJVrbiTe4G4qPmT21KeTFvd6XQTXEp6vKAE/s1600/Pause_11.png) center no-repeat;max-width:0px;padding:18px 18px;top:77px}
.download {position:relative;display:inline-block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgh6AaGZUsa9FNxwtidaRaxqpM6HwPAJm10lwL4BE-6F_nZMSjsTprOSybN05tBLlGdo1gUSpo-6v-Rc2lajf0pjVg71jxVIgKNdBz88IvVJfyXYUdlqr9txOnyBycA8YBhcadso-xd0w/s1600/Download_11.png) center no-repeat;max-width:0px;padding:18px 18px;top:77px}
.play:hover {position:relative;display:inline-block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgL824hVmFEKO_j5aOaiO6rVIWKVAhKIoM4LkZRfwUdpstdgF_dMmqO06-knU364txKs618GMRZ2l8wOPOfxc4CZRNlT9Aa-uuZoLvGAgDMoz1d3UNiMUsAygP2QteTNV5flCgKXKsaTbg/s1600/Play_16.png) center no-repeat;max-width:0px;padding:18px 18px;top:77px}
.pause:hover {position:relative;display:inline-block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibWMao2HAtWwc0xdwZ2ovb9xx0XisTVQWuI1Qzct0mewrp-mq-lU2ryJWks8rwJfbQwLuD5m-PgS8TBnRBGGO6EWe2uIwj2TwU26w5MhmMJmqKp_Uk3FKmtfGmzt4BC_EgPDrPAt0UX88/s1600/Pause_16.png) center no-repeat;max-width:0px;padding:18px 18px;top:77px}
.download:hover {position:relative;display:inline-block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKuJSqBmQ7F1I3pI47ifdQqvpTkemA8PTTYs3gRLktQNs_i0VXntB68EZoX7-EjqG7oxN3ZNoQEpHl8QTSloOImcmEaTm6Nf-sN1VvGqLd-FromLBrAxAWXLXMgIRJNPxD5sXR8VC0yKQ/s1600/Download_16.png) center no-repeat;max-width:0px;padding:18px 18px;top:77px}
.play3 {position:relative;display:block;background:url() center no-repeat;max-width:0px;padding:22px 22px;bottom:31px}
.box1 {display:inline-block;float:left;padding:0;margin:0 auto 0px auto;text-align:center;bottom:31px}
.box2 {display:inline-block;position:relative;padding:0;margin:0 auto 0px auto;text-align:center}
.box3 {display:inline-block;float:center;padding:0;margin:0 auto 0px auto;text-align:center;bottom:31px}
Kode CSS empat dengan dominan warna merah muda.
/* Audio Responsive */
.skin {display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgm1ITjF3Hn3h7ioNQux3gtyCj61YaVE2sGn6JBdWJdOc50j3xVF9iKdWuxOkYoiJYAyn24HyJgn6eEm004gsu3sDDPykqlvkIx215KgI6s_HyLmSde7Ust5vIHaoW05yztMZ7P-t2NN5o/s1600/Player107.png) center no-repeat;max-width:350px;padding:120px;margin:0 auto 0px auto;text-align:center}
.display {position:relative;display:inline-block;background-color:transparent;width:180px;height:110px;padding:0px 8px;color:#f49e9c;font-weight:700;font-size:10px;text-align:center;text-transform:uppercase;letter-spacing:0.5px;margin:auto;border:0px solid #fff;border-radius:1px;overflow:hidden;transition:all .3s;top:30px}
.play {position:relative;display:inline-block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2cPAmLIrC4CNgJA6pc7wiRkVA3IX5Q5OaTSRYwTRSyM-VANU6w5FboGkeN6fvot5z8sQxREIhpxuPFaQ68Ll870W3EH2pFqCvjYRvMBBZYYkZDgwLBhdKaRJpmNw7c1rqri_5W2xMNfY/s1600/Play_11.png) center no-repeat;max-width:0px;padding:18px 18px;top:77px}
.pause {position:relative;display:inline-block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMhjFVjWEP2w5M47o3rmLxTVJ_L0Zb5avj3CJig6sw2_Rpab11LJ5qPAAQYcZBzBX_kD7MRxLcbbWAal1fWuv3fPY8j0jg4Ot8G_Uj0DxJDJVrbiTe4G4qPmT21KeTFvd6XQTXEp6vKAE/s1600/Pause_11.png) center no-repeat;max-width:0px;padding:18px 18px;top:77px}
.download {position:relative;display:inline-block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgh6AaGZUsa9FNxwtidaRaxqpM6HwPAJm10lwL4BE-6F_nZMSjsTprOSybN05tBLlGdo1gUSpo-6v-Rc2lajf0pjVg71jxVIgKNdBz88IvVJfyXYUdlqr9txOnyBycA8YBhcadso-xd0w/s1600/Download_11.png) center no-repeat;max-width:0px;padding:18px 18px;top:77px}
.play:hover {position:relative;display:inline-block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEituGjTgS69WLtPAFeey0NIhrSq3Hl6Y23uQz-xyLTNY76wjsF_l5Flza0lVplSGgWwMXCx1tpsOh1rBt75-eG4jqJpPPpujwsYBs-_i1miKt6oG-AXhZDftVJsN_lJbf7sDqk6YOa3PVs/s1600/Play_19.png) center no-repeat;max-width:0px;padding:18px 18px;top:77px}
.pause:hover {position:relative;display:inline-block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBCW2AQ9Z_1udOd-yKotDD_-2te3K7vfGWw2mgfvwMDwpmcyGLCxLAiDVO8wwYDDF2tWYOjvivzWHYFBuv3W5yTFWZ2UdSbkdKTxP1dX7QebsvOZsQ6RrgZ9f-rJcB9RVDkx1er37xUQs/s1600/Pause_19.png) center no-repeat;max-width:0px;padding:18px 18px;top:77px}
.download:hover {position:relative;display:inline-block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgffpI2Pbv21FVgjaPFeQ3zkGUe8lshDs7PmNuM4lTSFOGZCeyGt66dWofRJpGFC-5JCYMM5zngtooG2Qu35j3mDiycbDLA1hr0xgR0VqVXwPJFSFz27j3GAJCoygUukBwJgD2audzZXyc/s1600/Download_19.png) center no-repeat;max-width:0px;padding:18px 18px;top:77px}
.play3 {position:relative;display:block;background:url() center no-repeat;max-width:0px;padding:22px 22px;bottom:31px}
.box1 {display:inline-block;float:left;padding:0;margin:0 auto 0px auto;text-align:center;bottom:31px}
.box2 {display:inline-block;position:relative;padding:0;margin:0 auto 0px auto;text-align:center}
.box3 {display:inline-block;float:center;padding:0;margin:0 auto 0px auto;text-align:center;bottom:31px}
Kode CSS empat dengan dominan warna coklat.
/* Audio Responsive */
.skin {display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBVu2Ftu7xQL4pfA3QwHObukvRwHsRra1hKtIqaUm-ITqF641mIz9JP7Shn0K8jbAIi0OTkEfIrlXCVneMPJO_XMSJOONr67KbtU1g7wWDBW5HS0ooP4A6ZnAgXJ8kM7rYo68oYGabEMA/s1600/Player108.png) center no-repeat;max-width:350px;padding:120px;margin:0 auto 0px auto;text-align:center}
.display {position:relative;display:inline-block;background-color:transparent;width:180px;height:110px;padding:0px 8px;color:#724c21;font-weight:700;font-size:10px;text-align:center;text-transform:uppercase;letter-spacing:0.5px;margin:auto;border:0px solid #fff;border-radius:1px;overflow:hidden;transition:all .3s;top:30px}
.play {position:relative;display:inline-block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2cPAmLIrC4CNgJA6pc7wiRkVA3IX5Q5OaTSRYwTRSyM-VANU6w5FboGkeN6fvot5z8sQxREIhpxuPFaQ68Ll870W3EH2pFqCvjYRvMBBZYYkZDgwLBhdKaRJpmNw7c1rqri_5W2xMNfY/s1600/Play_11.png) center no-repeat;max-width:0px;padding:18px 18px;top:77px}
.pause {position:relative;display:inline-block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMhjFVjWEP2w5M47o3rmLxTVJ_L0Zb5avj3CJig6sw2_Rpab11LJ5qPAAQYcZBzBX_kD7MRxLcbbWAal1fWuv3fPY8j0jg4Ot8G_Uj0DxJDJVrbiTe4G4qPmT21KeTFvd6XQTXEp6vKAE/s1600/Pause_11.png) center no-repeat;max-width:0px;padding:18px 18px;top:77px}
.download {position:relative;display:inline-block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgh6AaGZUsa9FNxwtidaRaxqpM6HwPAJm10lwL4BE-6F_nZMSjsTprOSybN05tBLlGdo1gUSpo-6v-Rc2lajf0pjVg71jxVIgKNdBz88IvVJfyXYUdlqr9txOnyBycA8YBhcadso-xd0w/s1600/Download_11.png) center no-repeat;max-width:0px;padding:18px 18px;top:77px}
.play:hover {position:relative;display:inline-block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXK81oGcq4PSrcsAcA60Km2JAGINULvw7f-6MJ-PViMNTo9Bc42r4X9jEPua1FZkkpELFN96JlMfmOUz4mLuJYyRIDowlgisSmdWDYuLiqM0vNjCgCOS0cj8UN8uSQIu85IlIbqQIrVDk/s1600/Play_20.png) center no-repeat;max-width:0px;padding:18px 18px;top:77px}
.pause:hover {position:relative;display:inline-block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8yMd0S8jK9oKbO-rtsPJL7XMuegI0kWvo7EEBa-jHSVlU5bNFM2FOKmebKVOlLCIAPrvdDD5Yv2ZzoGcVXyDI6TpTdDtkarr9bT-2sLjoD7EMyoNOcz324xjNCZf1d2WESB2WCRmedU4/s1600/Pause_20.png) center no-repeat;max-width:0px;padding:18px 18px;top:77px}
.download:hover {position:relative;display:inline-block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW-l5VQae59INHZYTCCjzye5DWBOynXgAxmx-uEzx4DlkW9-aX39dBYJzh3s91Xqcpmsu65DXuQYw2lomvKEqWLNNmQQVEF-gFJOJSX6a2VtHBaYQTKN_VsWUbtBdq6vNam9rFxavW5sE/s1600/Download_20.png) center no-repeat;max-width:0px;padding:18px 18px;top:77px}
.play3 {position:relative;display:block;background:url() center no-repeat;max-width:0px;padding:22px 22px;bottom:31px}
.box1 {display:inline-block;float:left;padding:0;margin:0 auto 0px auto;text-align:center;bottom:31px}
.box2 {display:inline-block;position:relative;padding:0;margin:0 auto 0px auto;text-align:center}
.box3 {display:inline-block;float:center;padding:0;margin:0 auto 0px auto;text-align:center;bottom:31px}
Kode CSS empat dengan dominan warna jingga.
/* Audio Responsive */
.skin {display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiQhJqn1DG8rASNgRSgXfrT0cG59QWhUA9PolAnchV7Dry70hwkT25sR0kLbH5gJVa0LSLC3K9qvc4eFHJbWVL7fj4q_JFJKXgC6rEfx8ubvE2rgfeTlypRaug8uBZ61gnO9pVeIu9wUc/s1600/Player106.png) center no-repeat;max-width:350px;padding:120px;margin:0 auto 0px auto;text-align:center}
.display {position:relative;display:inline-block;background-color:transparent;width:180px;height:110px;padding:0px 8px;color:#e8641b;font-weight:700;font-size:10px;text-align:center;text-transform:uppercase;letter-spacing:0.5px;margin:auto;border:0px solid #fff;border-radius:1px;overflow:hidden;transition:all .3s;top:30px}
.play {position:relative;display:inline-block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2cPAmLIrC4CNgJA6pc7wiRkVA3IX5Q5OaTSRYwTRSyM-VANU6w5FboGkeN6fvot5z8sQxREIhpxuPFaQ68Ll870W3EH2pFqCvjYRvMBBZYYkZDgwLBhdKaRJpmNw7c1rqri_5W2xMNfY/s1600/Play_11.png) center no-repeat;max-width:0px;padding:18px 18px;top:77px}
.pause {position:relative;display:inline-block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMhjFVjWEP2w5M47o3rmLxTVJ_L0Zb5avj3CJig6sw2_Rpab11LJ5qPAAQYcZBzBX_kD7MRxLcbbWAal1fWuv3fPY8j0jg4Ot8G_Uj0DxJDJVrbiTe4G4qPmT21KeTFvd6XQTXEp6vKAE/s1600/Pause_11.png) center no-repeat;max-width:0px;padding:18px 18px;top:77px}
.download {position:relative;display:inline-block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgh6AaGZUsa9FNxwtidaRaxqpM6HwPAJm10lwL4BE-6F_nZMSjsTprOSybN05tBLlGdo1gUSpo-6v-Rc2lajf0pjVg71jxVIgKNdBz88IvVJfyXYUdlqr9txOnyBycA8YBhcadso-xd0w/s1600/Download_11.png) center no-repeat;max-width:0px;padding:18px 18px;top:77px}
.play:hover {position:relative;display:inline-block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6i-J4jTnC00uGsTz6nV5pGxd6pfzBz_ifjsRH_mM8t7waYmPeVvX_yh6eLh1njKDuwu-dkBZqC0foCApoJ5b5LSuiYCvy8MsrNfFT0VZzm9N36J4zjymLPcKToE4MQ-ds7hOXFC4W-aM/s1600/Play_18.png) center no-repeat;max-width:0px;padding:18px 18px;top:77px}
.pause:hover {position:relative;display:inline-block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZkuwelW0b5NzCmsfhfm02LPMcmPTBMIgqvj_RdFPqPge0jKTfMEiQo0MQfcIKmYgjRC_GeS61PEY1Yv2iIfWiU87Xp4m9kJFRHa5VVi7N-4IkkGB_g2AVpyWbsTujkCE1ZSRnFyrByko/s1600/Pause_18.png) center no-repeat;max-width:0px;padding:18px 18px;top:77px}
.download:hover {position:relative;display:inline-block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzpvIKWXVuDZucVwhGqzhAYxcm-Twy7uYaJynC-ER346-lURN40dBhGwHT1yh7vMa9JAe7aQwfFhV6hzPuZa4Bt3WJ-FaPWD-TdTGwY868hWfE4wGX_8vuvYnAzsn1-ugxUXuT2zlb5y0/s1600/Download_18.png) center no-repeat;max-width:0px;padding:18px 18px;top:77px}
.play3 {position:relative;display:block;background:url() center no-repeat;max-width:0px;padding:22px 22px;bottom:31px}
.box1 {display:inline-block;float:left;padding:0;margin:0 auto 0px auto;text-align:center;bottom:31px}
.box2 {display:inline-block;position:relative;padding:0;margin:0 auto 0px auto;text-align:center}
.box3 {display:inline-block;float:center;padding:0;margin:0 auto 0px auto;text-align:center;bottom:31px}
Kode CSS empat dengan dominan warna ungu.
/* Audio Responsive */
.skin {display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCpmNKXZpHCxMCpRlkqIqPnGj__B1m4fA2K-x5LHOeIEdBrR3aYx4o7CkvBEIM51G4VtpBGgFy1D-BZDsGTpTuXgTdRp0aLGen0dpNSiLgVuFalwcnydGLlQjyNyrJU9eDm612iledSD8/s1600/Player105.png) center no-repeat;max-width:350px;padding:120px;margin:0 auto 0px auto;text-align:center}
.display {position:relative;display:inline-block;background-color:transparent;width:180px;height:110px;padding:0px 8px;color:#91007b;font-weight:700;font-size:10px;text-align:center;text-transform:uppercase;letter-spacing:0.5px;margin:auto;border:0px solid #fff;border-radius:1px;overflow:hidden;transition:all .3s;top:30px}
.play {position:relative;display:inline-block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2cPAmLIrC4CNgJA6pc7wiRkVA3IX5Q5OaTSRYwTRSyM-VANU6w5FboGkeN6fvot5z8sQxREIhpxuPFaQ68Ll870W3EH2pFqCvjYRvMBBZYYkZDgwLBhdKaRJpmNw7c1rqri_5W2xMNfY/s1600/Play_11.png) center no-repeat;max-width:0px;padding:18px 18px;top:77px}
.pause {position:relative;display:inline-block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMhjFVjWEP2w5M47o3rmLxTVJ_L0Zb5avj3CJig6sw2_Rpab11LJ5qPAAQYcZBzBX_kD7MRxLcbbWAal1fWuv3fPY8j0jg4Ot8G_Uj0DxJDJVrbiTe4G4qPmT21KeTFvd6XQTXEp6vKAE/s1600/Pause_11.png) center no-repeat;max-width:0px;padding:18px 18px;top:77px}
.download {position:relative;display:inline-block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgh6AaGZUsa9FNxwtidaRaxqpM6HwPAJm10lwL4BE-6F_nZMSjsTprOSybN05tBLlGdo1gUSpo-6v-Rc2lajf0pjVg71jxVIgKNdBz88IvVJfyXYUdlqr9txOnyBycA8YBhcadso-xd0w/s1600/Download_11.png) center no-repeat;max-width:0px;padding:18px 18px;top:77px}
.play:hover {position:relative;display:inline-block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibOVy3JMoQMwwkEPMwTKoJ1M3xng0pNGIrBZ9NHDRfSHvxUoO9S5IssXf3B1ZzZsriMDzzs5mS6NXIlbPaH0T71RB5YSVi6ytexhT-MmHlcqAnYL16WObH1wUDyceP28Nu2HUESwjerNw/s1600/Play_17.png) center no-repeat;max-width:0px;padding:18px 18px;top:77px}
.pause:hover {position:relative;display:inline-block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiePx8W0x11-iMudWMcbip0WyXFwx9wyDLx83Ag9KPrM3CafzQH0ddPeERfNHQyK-QSjmNFDoOTGwfhKp4kDHDR74r0QcPTmtxsJzl7eGh6n4bAGCumrQP1Rfj__hxG35_WzJcsLXbfMQY/s1600/Pause_17.png) center no-repeat;max-width:0px;padding:18px 18px;top:77px}
.download:hover {position:relative;display:inline-block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifecKN1VfmEGX2yB0n4h0sdU5_vg_umlqn-RaSwX7SktQcQWRE_bpG5GETECFjfvOkrN1ZXbsrWeI8SO4jowbcFPYJ_RnAri11SqTN83o9Gb5HY3ZAU99gTnJyH-1J8WEz1x1pjgpwd9k/s1600/Download_17.png) center no-repeat;max-width:0px;padding:18px 18px;top:77px}
.play3 {position:relative;display:block;background:url() center no-repeat;max-width:0px;padding:22px 22px;bottom:31px}
.box1 {display:inline-block;float:left;padding:0;margin:0 auto 0px auto;text-align:center;bottom:31px}
.box2 {display:inline-block;position:relative;padding:0;margin:0 auto 0px auto;text-align:center}
.box3 {display:inline-block;float:center;padding:0;margin:0 auto 0px auto;text-align:center;bottom:31px}
Sesuaikan nilai semua CSS diatas 30 dengan kondisi dan posisi posting.
Kemudian klik SAVE template dan langsung buat entri posting.
Menambahkan class pada entri posting seperti contoh berikut:
<div class="skin">
<audio id="skindesign">
<source src="XX"></source>
Your browser does not support the audio element.
</audio>
<div class="display">
<alt="Music Info" title="Music Info">Judul : XXXXX<br />Artis : XXXXX<br />Album : XXXXX<br />Genre : XXXXX
</alt></div>
<div class="box3">
<alt="Play Audio" title="Play Audio"/><a class="play" button onclick="playAudio()"></a>
<alt="Pause Audio" title="Pause Audio"/><a class="pause" button onclick="pauseAudio()"></a>
<alt="Download 1" title="Download 1"/><a class="download" href="XXX"></a>
<alt="Download 2" title="Download 2"/><a class="download" href="XXXX"></a>
</alt></alt></alt></alt></div>
</div>
Ganti kode XX dengan link file mp3 kita yang sudah dirubah menjadi link download.
Ganti Kode XXX dengan link file mp3 yang diupload pada media penyimpanan online pertama.
Ganti Kode XXXX dengan link file mp3 yang diupload pada media penyimpanan online kedua.
Ganti Kode XXXXX dengan deskripsi file Mp3 yang di bagikan.
Setelah selesai mengganti beberapa kode diatas kemudian klik PUBLISH, segeralah lihat hasilnya dan selamat mencoba.
Demikian pembahasan sederhana Cara Menambah Embed Audio dengan Skin Gadget Portrait. Komen, saran, kritik dan masukan selalu saya tunggu karena takkan banyak yang bisa dilakukan kalau tak ada interaksi yang terhubung, selalu saya sampaikan banyak terima kasih atas kunjungan anda.
Show Parser Hide Parser