Selamat sore para blogger semua... karena kebetulan saya bikin tutorial ini disore hari, kali ini saya akan coba bahas tentang Cara Menambah Embed Audio dengan Skin Tablet Landscape dan saya tujukan tutor ini bagi para blogger semua yang sukan dengan posting yang berisi file audio musik untuk dibagkan bagi teman-teman sesama blogger.
Mungkin bentuk tampilan dari Embed Audio ini sedikit aneh dan lucu, karena bermotif tablet yang digunakan dalam posisi landscape. Beberapa susunan tombol berjejer apik pada bagian sisi kanan motif tablet ini, mulai dari play, pause, link1 dan link2.
Langsung saja pada tahapan proses penerapan dan penempatan embed audio ini pada web/blog anda.
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.
Kode CSS satu dengan dominan warna biru.
/* Audio Responsive */
.skin {display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2zpbOpNlJhXti0fgcOBpz4DErihGxcacjk5aemuTB-di4rYaHpT-vuVr33bNDpuZowEOAUNta9t6feyMTaTOk7i-4trDp5dDQ8RcTO736Ne2yPwsQTYUmeMQ9lXkfY-9vmZuha4tKfcU/s1600/Player100.png) center no-repeat;max-width:308px;padding:55px;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:4px}
.play {position:relative;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2cPAmLIrC4CNgJA6pc7wiRkVA3IX5Q5OaTSRYwTRSyM-VANU6w5FboGkeN6fvot5z8sQxREIhpxuPFaQ68Ll870W3EH2pFqCvjYRvMBBZYYkZDgwLBhdKaRJpmNw7c1rqri_5W2xMNfY/s1600/Play_11.png) center no-repeat;max-width:0px;padding:22px 22px;bottom:31px}
.pause {position:relative;display: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:22px 22px;bottom:31px}
.download {position:relative;display: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:22px 22px;bottom:31px}
.play:hover {position:relative;display: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:22px 22px;bottom:31px}
.pause:hover {position:relative;display: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:22px 22px;bottom:31px}
.download:hover {position:relative;display: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:22px 22px;bottom:31px}
.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:right;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/AVvXsEhldESHnbbHv3xG_E6SeMRpmqDZWazkwHPKDCvQFU-OEj6oY3hqpxzAsn8wqleibF0gC-xV72gh6pqBMNFRkrkoh5tHTNYdl68sJw088FMh0FR0yVessh74ZaO3o9IXGRfhH_BCGnyN1RY/s1600/Player101.png) center no-repeat;max-width:308px;padding:55px;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:4px}
.play {position:relative;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2cPAmLIrC4CNgJA6pc7wiRkVA3IX5Q5OaTSRYwTRSyM-VANU6w5FboGkeN6fvot5z8sQxREIhpxuPFaQ68Ll870W3EH2pFqCvjYRvMBBZYYkZDgwLBhdKaRJpmNw7c1rqri_5W2xMNfY/s1600/Play_11.png) center no-repeat;max-width:0px;padding:22px 22px;bottom:31px}
.pause {position:relative;display: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:22px 22px;bottom:31px}
.download {position:relative;display: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:22px 22px;bottom:31px}
.play:hover {position:relative;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHrKoxnvHSAKy99yaZhDZyc0PbOKDN4SyzFbnmcHlzKxLhRQ7T4CI_-yw1McJSs9Q3cY3KMeU46BHDCKZIuf02i3TM9nSnr-3Y80pGrh3vrIcpw2w8u8qFCKYb1X2qfhsaRzTVDx9uMIo/s1600/Play_13.png) center no-repeat;max-width:0px;padding:22px 22px;bottom:31px}
.pause:hover {position:relative;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqV-xI3LadnOxzF_mBBW16vSNn2u6oErOKeo7dM2vO05d_SQR9Rc3QATzCIx_MHuh84uG9IeNwW8dsdyDzAC_VcfWCQtVmslU0we1qC-Vam265J39TMt1v07X_RUUCa43eoIGBa56_L5A/s1600/Pause_13.png) center no-repeat;max-width:0px;padding:22px 22px;bottom:31px}
.download:hover {position:relative;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYOsKaZuDcWiBFXu4e1gQkJjmKXtJs-6cGLn7lwwwFFWwVq4tq_BLFqSvC2w_o_miZzliBeQdRHmRPVOlGxeZ7L6ukIilZm92yCppl_JrnmGm7nH7tbzEIL2G8N3irGXvAlQ_iCg_n4Zg/s1600/Download_13.png) center no-repeat;max-width:0px;padding:22px 22px;bottom:31px}
.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:right;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/AVvXsEjfSmRo00a7XRuiI4XngcthXhNQ7jma61jFlsWQBn30-nAjDQ2N-O5YK12fzN5fr7c7oSG_RQMIsMUnhXRX4oPao73y7hnSlQm5vLA5G4asrStLiP8ZuMWcjSetZhgk3gnOgGB4IQ9q7Dg/s1600/Player102.png) center no-repeat;max-width:308px;padding:55px;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:4px}
.play {position:relative;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2cPAmLIrC4CNgJA6pc7wiRkVA3IX5Q5OaTSRYwTRSyM-VANU6w5FboGkeN6fvot5z8sQxREIhpxuPFaQ68Ll870W3EH2pFqCvjYRvMBBZYYkZDgwLBhdKaRJpmNw7c1rqri_5W2xMNfY/s1600/Play_11.png) center no-repeat;max-width:0px;padding:22px 22px;bottom:31px}
.pause {position:relative;display: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:22px 22px;bottom:31px}
.download {position:relative;display: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:22px 22px;bottom:31px}
.play:hover {position:relative;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-Y-qQnFDc1Us65JmTdS7ZfgZZ0HyS9JvmtKoUTbB15hecaNTPE8_r3CxAHYDm0qX0pj69g2FyZMKd_wFSRN5jLu3Tca1B1Bcp2B1QQtaA_qJ3e2pU67CPN6y1SumhMHvXyS8hLl3M6dA/s1600/Play_14.png) center no-repeat;max-width:0px;padding:22px 22px;bottom:31px}
.pause:hover {position:relative;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjsWsksl9FoFqjN2eHj182hpA2KQL-2wBSUvJEO8qT6rXoofkrJfwW0rtkVuVM5oRvMbp97YlKQeWPe-OuNQCdb1utWpmA_FxqwPdOYs50mB8v2O9rPs_2Xx3V1ISZHFpAMA3RtQg8mkw/s1600/Pause_14.png) center no-repeat;max-width:0px;padding:22px 22px;bottom:31px}
.download:hover {position:relative;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiX1JGgOkhpX7TOQFYLEv7cXFsb9oRasqRYXFJU_dfZkjXZb-nQaBss_7ybHdoB8-9spZWOBOPGkPp7WSxuEoEvUy3LGNv5ex9U3rIXcoCfQC1kc0V7eYK5kjynJomfDELSO4UfHfD9wYk/s1600/Download_14.png) center no-repeat;max-width:0px;padding:22px 22px;bottom:31px}
.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:right;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/AVvXsEjJ6bDf6_CGDrS1GVZzecsIufwQ7iRhlcxrdbaeZzzMekdg49TyGiBDauQkQe5pcMB-TsSltg8BVXm8YT-KfSFGdLlA4D8oWN9gsZVHmdn_-DZtUnUdAXT5n3WgdSGWJkSZrovTslmp0Fk/s1600/Player103.png) center no-repeat;max-width:308px;padding:55px;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:4px}
.play {position:relative;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2cPAmLIrC4CNgJA6pc7wiRkVA3IX5Q5OaTSRYwTRSyM-VANU6w5FboGkeN6fvot5z8sQxREIhpxuPFaQ68Ll870W3EH2pFqCvjYRvMBBZYYkZDgwLBhdKaRJpmNw7c1rqri_5W2xMNfY/s1600/Play_11.png) center no-repeat;max-width:0px;padding:22px 22px;bottom:31px}
.pause {position:relative;display: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:22px 22px;bottom:31px}
.download {position:relative;display: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:22px 22px;bottom:31px}
.play:hover {position:relative;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjE7Nqea1eA1oJ4_e1vc8xVOxAr_2PDD1RL2qohvZAqjAHoREz2HyXcZbTjkkURSDlhsUrbSgDJr7n_BNYJHMBfsl3Bfz6vNUlAHKa3mqJoH-sc0DveppsmXjvPw9MmQw6rZWUR1-wdOM/s1600/Play_15.png) center no-repeat;max-width:0px;padding:22px 22px;bottom:31px}
.pause:hover {position:relative;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUDrAqtsyZwgB3O2svj0VoI14h4My038R9PCgWFBo__EJTYG4NteX8DUXcMX5mLgxc-D76JllRx5NJ23cd1L9UukWyXFu0TWE7n-IGtb61MuMlQ7d7G8iOay4so6UdA480dR_KLD6Rx2o/s1600/Pause_15.png) center no-repeat;max-width:0px;padding:22px 22px;bottom:31px}
.download:hover {position:relative;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdESf3l7LZLeLc1oRyosBKzY9w3Ce1RDFlatV1GnVDeE1xr0Fkq9s71TfKjvfEHjweGiKsvqWaLDou0V6n5Z0j2vDJSmUq9w8K8jg2_yG7s4l2WI8fCl6K7dIV4T5biKLt8NdcowdofkM/s1600/Download_15.png) center no-repeat;max-width:0px;padding:22px 22px;bottom:31px}
.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:right;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/AVvXsEipLmGi55i7fzjtvZGgxKh8-PZE_NT7JLIFnI74S1e-gY3yB30mO96ZAjWmrwubmxzKusopZFqZW0KaEEb70F7_c_bQF2HvQpgbx2YwmiNAtpGXYwdFdlr8Ndvbdd8B6Umb_8-TSo_QdHk/s1600/Player104.png) center no-repeat;max-width:308px;padding:55px;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:4px}
.play {position:relative;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2cPAmLIrC4CNgJA6pc7wiRkVA3IX5Q5OaTSRYwTRSyM-VANU6w5FboGkeN6fvot5z8sQxREIhpxuPFaQ68Ll870W3EH2pFqCvjYRvMBBZYYkZDgwLBhdKaRJpmNw7c1rqri_5W2xMNfY/s1600/Play_11.png) center no-repeat;max-width:0px;padding:22px 22px;bottom:31px}
.pause {position:relative;display: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:22px 22px;bottom:31px}
.download {position:relative;display: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:22px 22px;bottom:31px}
.play:hover {position:relative;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsSUtNG8TLeA5OAtkfZY18O5F3rpt74rTEkLVSqkB9magZuS8ObACLRlZGp38wrN6fLRuRmNt-SX7qfw94A8FjoshmaLJWgfAD_be-XorAs7LIFnFvwjchTnQWObBetVF66nm7ctmQ6YQ/s1600/Play_16.png) center no-repeat;max-width:0px;padding:22px 22px;bottom:31px}
.pause:hover {position:relative;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHtXHsGzzB9zSnoJ1ND_FRVS6nhNjfoOYxiR_ec5PdhLpHALZ2nlmUy2-5wLjGCklXpcGAmmHwBUHvNpOJ7kvsz17cdItBLdRAJh2b9icDaIVNMPuDGsKEPFIIvbHJklXBQRwrpbHcNmk/s1600/Pause_16.png) center no-repeat;max-width:0px;padding:22px 22px;bottom:31px}
.download:hover {position:relative;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlZx0qG-zyYLmRochevqsw3iTtxRYPHYKP9v3PysomA1BhMRrBwrDmcAhycYYBMzztdMccFwBh6C7QFIRdZ6bOKVayGMzEyoBvxaM__Feh9EiQYzcDwXAKz1zwff7WFl8Wvtf9x_-oxig/s1600/Download_16.png) center no-repeat;max-width:0px;padding:22px 22px;bottom:31px}
.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:right;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/AVvXsEhrGe76fcK2UU-gNmkPJGlqfrASeBxCCmodaA_jvmYroQwlNY2vbei1bYsfjnGv1LFAHRcj_2gVNnyB6r4n5Oiblt665NxmDuHscZTgET3-8HniHTFi1wzq_QAVZXxea24Ds0eU_HlK8cs/s1600/Player105.png) center no-repeat;max-width:308px;padding:55px;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:#af5d9c;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:4px}
.play {position:relative;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2cPAmLIrC4CNgJA6pc7wiRkVA3IX5Q5OaTSRYwTRSyM-VANU6w5FboGkeN6fvot5z8sQxREIhpxuPFaQ68Ll870W3EH2pFqCvjYRvMBBZYYkZDgwLBhdKaRJpmNw7c1rqri_5W2xMNfY/s1600/Play_11.png) center no-repeat;max-width:0px;padding:22px 22px;bottom:31px}
.pause {position:relative;display: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:22px 22px;bottom:31px}
.download {position:relative;display: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:22px 22px;bottom:31px}
.play:hover {position:relative;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOd9Emr0yXBTAJx4zzsfNjQxGhpfCBQW3kkmqSiQdxiXV3VBn5FKXfIZkbv9Z8JrVU-mbyh0ECPutMgX0UfzzW_V-Wkd_HuiuGXbQU0gKVs8QVy5W1dhL4TarhZYUW48H37c49AYSTUeQ/s1600/Play_17.png) center no-repeat;max-width:0px;padding:22px 22px;bottom:31px}
.pause:hover {position:relative;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixI_IPSWIiL9IyjgS94oGMzbRnP4l4ZMeaCykAWgFKHsKdakWU1qE8ng5vsSDi_lZRxNMdyBQtd98qTIWlSvWLOoeLbx41kSbBSJoIKDvM-NEWUHngkKeN3eH0Ylo0stzYfss8M7plqjY/s1600/Pause_17.png) center no-repeat;max-width:0px;padding:22px 22px;bottom:31px}
.download:hover {position:relative;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWedtEFrfh_jqrf2CcRLbdWIOdw6wjihXPYjK7rfETGYyGMGQ2xrP1HEr2XalW77WcFgqcChMeNvDfpqLS6SUi3KTYcx0rQKDux9bjfYF1hp33Dy7LOZZL38ZeKyLR1JYEVk0Wyj_rblk/s1600/Download_17.png) center no-repeat;max-width:0px;padding:22px 22px;bottom:31px}
.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:right;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/AVvXsEitwz0Durf5Y3vMiHM3jPpWVnTgLrmnAd3ipSVFXsPh5U2dSd2l46pHvNnrOE8lqvKREUJtQ-sVeJsZ9Mp8ZtM36lJjTR2ko5FNbbtorYQfFvuJBRqyxvzLlJkZaseI2xVMvR1pZh_Kk6M/s1600/Player106.png) center no-repeat;max-width:308px;padding:55px;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:#f09450;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:4px}
.play {position:relative;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2cPAmLIrC4CNgJA6pc7wiRkVA3IX5Q5OaTSRYwTRSyM-VANU6w5FboGkeN6fvot5z8sQxREIhpxuPFaQ68Ll870W3EH2pFqCvjYRvMBBZYYkZDgwLBhdKaRJpmNw7c1rqri_5W2xMNfY/s1600/Play_11.png) center no-repeat;max-width:0px;padding:22px 22px;bottom:31px}
.pause {position:relative;display: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:22px 22px;bottom:31px}
.download {position:relative;display: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:22px 22px;bottom:31px}
.play:hover {position:relative;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggXbcRQI1taCGvcmB2Zuw6ttDDNRRaY3kC2JGtF02gmJAhtoCiszcGu3uiDqGQuaBl6MOa_czOzM14XnATb6yFyIm039yeGsj3smCEP9KcFJ5AMKTCmzxfV4BzInWo7xL2-NpDG5YCSS8/s1600/Play_18.png) center no-repeat;max-width:0px;padding:22px 22px;bottom:31px}
.pause:hover {position:relative;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhr0dTdFCA1bdWDeUvSA340lcNsqDPLLrlh80_N8xxZ4i3_GRWhcEe_FNiVpwVvNPwa5E0ld8z3nozIkbkZROs_E5eS6RJIbDWhrTmUzJS4QuSnV76lyQ3U2xwEioo4K_nR8d_pa3rfNKg/s1600/Pause_18.png) center no-repeat;max-width:0px;padding:22px 22px;bottom:31px}
.download:hover {position:relative;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXKfJNrH2Th0WY1A30P2VeXk7-XhlmIlS14_VQYsM-X4SVl1No_VVDpxUwGJWKtdL0g65JTOgJ1TZ9BuZ-VygQ03nspvJDEVMFkGNY-Ke3XvvtuZTPPnVIsj6FGwiRbGiy_pAwVFx9jHw/s1600/Download_18.png) center no-repeat;max-width:0px;padding:22px 22px;bottom:31px}
.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:right;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/AVvXsEiC5_8v3CODsEO-_eU9vItKMkptEQyDgSAFv4XQenI4zqdzPAgR9ayRIfU4AeuTjcqMRtckWzWGQMhnI-xr9U2bDGHEHSQbJhKfhNN1qmIIi9ok5q9mof0cSRmquwtnimRKiFQJczjOnQU/s1600/Player107.png) center no-repeat;max-width:308px;padding:55px;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:4px}
.play {position:relative;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2cPAmLIrC4CNgJA6pc7wiRkVA3IX5Q5OaTSRYwTRSyM-VANU6w5FboGkeN6fvot5z8sQxREIhpxuPFaQ68Ll870W3EH2pFqCvjYRvMBBZYYkZDgwLBhdKaRJpmNw7c1rqri_5W2xMNfY/s1600/Play_11.png) center no-repeat;max-width:0px;padding:22px 22px;bottom:31px}
.pause {position:relative;display: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:22px 22px;bottom:31px}
.download {position:relative;display: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:22px 22px;bottom:31px}
.play:hover {position:relative;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4DCNfA_gjS7mzKeIW93IXCM7LvQne2HTJ2snoGe0Zm8bdxisVXkvmwH_bDUpn0GZTT1xBXNjRAOAS397GzkTUCEPASz7S4hbKHbNodGiqWp-jpFBqHO_-JU1k1ONsaG8wug0ICgvtjdI/s1600/Play_19.png) center no-repeat;max-width:0px;padding:22px 22px;bottom:31px}
.pause:hover {position:relative;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrOOiAJgP4z7YTdfPNCfTYVLuD8iHjt4LP0OtsO2iN_q-HHIH8UAp68o0UrdYqAb9iP6JXV-q9IXLcM_WJ-R1v_ya8wUoP1KhyphenhyphenvcnjKUzVj4qrcCzuQml8BHMRRwTCk4EUvHVjkxxtjNw/s1600/Pause_19.png) center no-repeat;max-width:0px;padding:22px 22px;bottom:31px}
.download:hover {position:relative;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0liWUURFlX7mJPm1-q6twlV-b6pMgBubpiSDc3y6IDvK6co7jtcUTgIPc36B_V2Dwcq5K8CqhUXsWqaSIp0D0kLWIZKuUVFHSjY4onw1fkeNMm_DacPLurQ-GoNuPOmUnXg3zUREPi3w/s1600/Download_19.png) center no-repeat;max-width:0px;padding:22px 22px;bottom:31px}
.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:right;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/AVvXsEi5p2oQKnbwcIuTH__FWMeCijMOjnLocVJb_oGdHqVq2AJDHTTjoscZ5qu6DbDmwT9u5qU1s_80j8ZYRj2uCUn6gWxYZ0i5bySIaMaYd5HlSAF6JEHZbmlmP7lIEX5ejdvCPprKRlTPWZw/s1600/Player108.png) center no-repeat;max-width:308px;padding:55px;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:4px}
.play {position:relative;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2cPAmLIrC4CNgJA6pc7wiRkVA3IX5Q5OaTSRYwTRSyM-VANU6w5FboGkeN6fvot5z8sQxREIhpxuPFaQ68Ll870W3EH2pFqCvjYRvMBBZYYkZDgwLBhdKaRJpmNw7c1rqri_5W2xMNfY/s1600/Play_11.png) center no-repeat;max-width:0px;padding:22px 22px;bottom:31px}
.pause {position:relative;display: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:22px 22px;bottom:31px}
.download {position:relative;display: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:22px 22px;bottom:31px}
.play:hover {position:relative;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSTqJnSKV_E3xS3396ftVwRgm0JD3rY6DpUe0IwFqq2RSIkaRs2MkyGu97Q0q_TOqstF1xD_MZpENeZFbQrNKqeUZjcHwzum6y-wzmiOmMU48g-sUkJDWcwyqkobcA7Enm3J2n3mXHXuQ/s1600/Play_20.png) center no-repeat;max-width:0px;padding:22px 22px;bottom:31px}
.pause:hover {position:relative;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZC0-Jk62uqVrIpTwMFSZPXC2JYaEfaN-_v8SDZtB6tmbtOD3DVVpq1goS36HLqVtIgcT1bTNiYzxnh9-Uaw-unjZWK9d99kJVQ7sVfDzNNwdTh5nchB1RTzkBpAAhTexgcd2io37E9kA/s1600/Pause_20.png) center no-repeat;max-width:0px;padding:22px 22px;bottom:31px}
.download:hover {position:relative;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFqS_0NqM-jNffG-RcvEulbi-I1vg44QkXVXmwk6S3cP7TEVHOxvy-vXykG2lZFDCeYElNPkSELly-QroZCPxsnLVyx3kw3uP5sK6eulXPHbbVTBDv5LmJGNPpvp6ggJX93bqdX2pw67M/s1600/Download_20.png) center no-repeat;max-width:0px;padding:22px 22px;bottom:31px}
.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:right;padding:0;margin:0 auto 0px auto;text-align:center;bottom:31px}
Sesuaikan nilai semua CSS diatas 30 dengan kondisi dan posisi posting.
Menambahkan class pada entri posting seperti contoh berikut:
<div class="skin">
<audio id="skindesign">
<source src="XX" type="audio/mpeg"></source>
Your browser does not support the audio element.
</audio>
<div class="box2">
<alt="Network Info" title="Network Info"/><a class="play3"></a>
</div>
<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.
Demikian pembahasan sederhana tentang Cara Menambah Embed Audio dengan Skin Tablet Landscape. Komen, saran, kritik dan masukan selalu saya tunggu, karena takkan banyak yang bisa dilakukan kalau sedang dalam keadaan sendiri dan hanya berdiam, terima kasih.
Show Parser Hide Parser