Embed audio yang biasa ditambahkan pada sebuah halaman posting blog untuk menambahkan fasilitas berupa alat pemutar audio musik. Pada kesempatan kali ini akan saya coba membagikan sedikit cara menambahkab embed audio yang ditambahkan skin berupa box dengan display dibagian atas.
Mungkin di beberapa situs web terkenal seperti kompiajaib.com, arlinadzgn.com, idntheme.com, gigapurbalingga.net, inilah.com/, mayangkaranews.com/, antaranews.com/, jawapos.com/, metrotvnews.com/, sindonews.com/, inipasti.com/, suara.com/, okezone.com/, merdeka.com/, kapanlagi.com/, liputan6.com/, kompas.com/, detik.com/, tribunnews.com/, www.tempo.co/, www.bola.net/, www.viva.co.id/, www.republika.co.id/, jalantikus.com/ tidak akan membahas hal-hal kecil seperti ini, karena hal ini merupakan hal sepele atau jarang peminat namun kali ini saya coba untuk praktek sendiri. Saya mulai dari yang paling awal yaitu:
Letakkan kode 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>
Pilih salah satu CSS/style dibawah dan letakkan pada bagian style posting.
1. CSS/style dengan dominan warna biru.
/* Audio Responsive */
.skin {display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiujrViUIUvgL6_lai6Kof2a90pQ3znzYH6SBKNTqcPpJdPhVN1AY_cZMJjeAqYqrE2BFP1iBPBLAuCAJdn7DPfD9WsXpfUFVDQBNcYpgnnSemy6eDgZ4aaycr1OrQ9o1sCLNHDeTtI-hw/s1600/Player61.png) center no-repeat;max-width:700px;padding:120px;margin:0 auto 0px auto;text-align:center}
.display {position:relative;display:inline-block;background-color:transparent;width:350px;height:80px;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;}
.play {position:relative;display:inline-block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbSouPpM7Gsqc6KYc-mzX_5Gen7mwTQ-L20fg12SCHQIPz5B0qEt8-0VUXAqAqnuwsJSAEmgJfHi7WW7vaJovo39m85j-m2OFNKhhXlVIEAamEbCXp8aVHw6oynJnMqYHMDDA04_D49Lk/s1600/Play1.png) center no-repeat;max-width:0px;padding:18px 24px;top:25px}
.pause {position:relative;display:inline-block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_VvneHuGK1ykb2Nk9y9xurAd6UFSNslEBKMi4S0JQlkQqHF4CIxxlwpyIJ94U-5SSuVPrcg2dXm0dwVqD3nHR1mcBE1QSwK_8FPIYwacmcfVlPU9Sdw4rGQ-B8izmesLue-wkRsA4ySw/s1600/Pause1.png) center no-repeat;max-width:0px;padding:18px 24px;top:25px}
.display1 {position:relative;display:inline-block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilc0oWdJ-754S7kIrvUIbo8qFESa2YTBq6cAvaBhcXTS8NmsoOL9rvvh39jxqAiKrN09vYNybPPRoSPvmK1FdKRe21XTvm2YrHf8Q3OiaAiqYskVE5M9AlnIIiEx-0KBnm1mRTmKn3cZs/s1600/dispaly1.png) center no-repeat;max-width:0px;padding:18px 24px;top:25px}
.link1 {position:relative;display:inline-block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkHpaDU_ug68JGXNNhEZ6Mi4I34maSUdUsZ2cAc-tP8CxQQGEnVQAwxubCCsJxng3qXaLzGrv202tVKaKrlUp7nL-WAvN6BlXIbV4RXBO8nR8czs20vOQREE-FdZWmRbc4ko3BkYBiDIg/s1600/link1.png) center no-repeat;max-width:0px;padding:18px 24px;top:25px}
.link2 {position:relative;display:inline-block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSFd0nqByW4NuK3n2m6LrgBtQgKDk94m2ZOxnkNLf_c77RrkdkyHNPDKWboGiR-ZSVf07iBnDilJQsagnYZ5Esh4QVC3YTWUj3xEAoDJ0G2oTRCNhl3H1YcNtjAiPU5SAXFysYMbF4aog/s1600/link21.png) center no-repeat;max-width:0px;padding:18px 24px;top:25px}
.play:hover {position:relative;display:inline-block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYWi20tH359NhKBvPK3q2Y2eSk4r1fK1uucmk6v9neeGlLQND96UgvccssSZp9PdMkjspnnsoiXwgf_yd6_sFDxWTbELrZkpHyAHpe48JAMCVR1zNRRv_xiWXOlhTwdOY_-1z0NBPuPck/s1600/Play2.png) center no-repeat;max-width:0px;padding:18px 24px;top:25px}
.pause:hover {position:relative;display:inline-block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkD_O6lsTlTqb9mHm6P36FKM1VCH3LVjXChIEpk-j-wJ8PM9k0Yb1lqjm4kaduZhRyNuzXgGa2PqUSVUeLLyJJzEzqRC3JzCDq1wAZMHaX8z_4b4ECDu3WfQK1SW9vgFoxv-VG0mfHCnk/s1600/Pause2.png) center no-repeat;max-width:0px;padding:18px 24px;top:25px}
.display1:hover {position:relative;display:inline-block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisdHDUwqCgRmByk0xu7xh3Ov17gtFYwR6dq8t-sAnSUkz_cpQ1fsfZjjMHDsyXPTncXip9k_GIvHlK0SwE0jvrATOcY2h81kWgfztwuSuwDTQkCZrZivaeFjnv-FJ_agKawsK5qx38DWg/s1600/dispaly2.png) center no-repeat;max-width:0px;padding:18px 24px;top:25px}
.link1:hover {position:relative;display:inline-block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZp2zu2WUi6c26YlUEBYOmvBrg1MYjAuyhKMjkc3Et6KrDaeX2nYB-CAWIgMg9xsHjoQy0Af-JyhC05qTz6g6O24VB6AFA66UTf6UAVLvMM0Nw9auZX4Ndsxv76ltGZ2AVNN9xPTSuqA8/s1600/link2.png) center no-repeat;max-width:0px;padding:18px 24px;top:25px}
.link2:hover {position:relative;display:inline-block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgApTQpxtjjGNwFx4knXtVXIXipQlY221fjs7mA7aj49Ws50aEhWlB-9LPDmQtgGDhGc6yMiH1ZFwASM39Ta9Gt6jxEDMTIS9ho7JKgP2Amksnc5bxWdyuMrQbNUYcT0f3dn2NT02xtRlU/s1600/link22.png) center no-repeat;max-width:0px;padding:18px 24px;top:25px}
2. CSS/style dengan dominan warna hijau.
/* Audio Responsive */
.skin {display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiujrViUIUvgL6_lai6Kof2a90pQ3znzYH6SBKNTqcPpJdPhVN1AY_cZMJjeAqYqrE2BFP1iBPBLAuCAJdn7DPfD9WsXpfUFVDQBNcYpgnnSemy6eDgZ4aaycr1OrQ9o1sCLNHDeTtI-hw/s1600/Player61.png) center no-repeat;max-width:700px;padding:120px;margin:0 auto 0px auto;text-align:center}
.display {position:relative;display:inline-block;background-color:transparent;width:350px;height:80px;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;}
.play {position:relative;display:inline-block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbSouPpM7Gsqc6KYc-mzX_5Gen7mwTQ-L20fg12SCHQIPz5B0qEt8-0VUXAqAqnuwsJSAEmgJfHi7WW7vaJovo39m85j-m2OFNKhhXlVIEAamEbCXp8aVHw6oynJnMqYHMDDA04_D49Lk/s1600/Play1.png) center no-repeat;max-width:0px;padding:18px 24px;top:25px}
.pause {position:relative;display:inline-block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_VvneHuGK1ykb2Nk9y9xurAd6UFSNslEBKMi4S0JQlkQqHF4CIxxlwpyIJ94U-5SSuVPrcg2dXm0dwVqD3nHR1mcBE1QSwK_8FPIYwacmcfVlPU9Sdw4rGQ-B8izmesLue-wkRsA4ySw/s1600/Pause1.png) center no-repeat;max-width:0px;padding:18px 24px;top:25px}
.display1 {position:relative;display:inline-block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilc0oWdJ-754S7kIrvUIbo8qFESa2YTBq6cAvaBhcXTS8NmsoOL9rvvh39jxqAiKrN09vYNybPPRoSPvmK1FdKRe21XTvm2YrHf8Q3OiaAiqYskVE5M9AlnIIiEx-0KBnm1mRTmKn3cZs/s1600/dispaly1.png) center no-repeat;max-width:0px;padding:18px 24px;top:25px}
.link1 {position:relative;display:inline-block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkHpaDU_ug68JGXNNhEZ6Mi4I34maSUdUsZ2cAc-tP8CxQQGEnVQAwxubCCsJxng3qXaLzGrv202tVKaKrlUp7nL-WAvN6BlXIbV4RXBO8nR8czs20vOQREE-FdZWmRbc4ko3BkYBiDIg/s1600/link1.png) center no-repeat;max-width:0px;padding:18px 24px;top:25px}
.link2 {position:relative;display:inline-block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSFd0nqByW4NuK3n2m6LrgBtQgKDk94m2ZOxnkNLf_c77RrkdkyHNPDKWboGiR-ZSVf07iBnDilJQsagnYZ5Esh4QVC3YTWUj3xEAoDJ0G2oTRCNhl3H1YcNtjAiPU5SAXFysYMbF4aog/s1600/link21.png) center no-repeat;max-width:0px;padding:18px 24px;top:25px}
.play:hover {position:relative;display:inline-block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEik6VDwgcGQ4DxrSHj-cZR2PvAuL8Ob4mwCMqC6XTojd-jozwxof5W_q4BS26mNKDqzhyphenhyphenh7IZhGyn6kq9dIo4vbLCSMS2Imy6qalO1q3f1lT0514Zh9bmhLipocsodNX08enNzLSsKP1Iw/s1600/Play3.png) center no-repeat;max-width:0px;padding:18px 24px;top:25px}
.pause:hover {position:relative;display:inline-block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi83EpCtzbTUS6iqpZjVcDj1HtLEdubqvUmBmg408SxZcMy1w6ZLw-_o-OgeUArLvMNcspBACu-9r7fRRrtPY339Fz_ZtxEKcjTPVuuBuPhJ-Hxz5la5KnfoL3q_PRqrfY-vxg5db_sytY/s1600/Pause3.png) center no-repeat;max-width:0px;padding:18px 24px;top:25px}
.display1:hover {position:relative;display:inline-block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLmGgUVAi8fhKamyvgGbAZ1Lih7Un4l45qmCRlN1vhqXZH73bKK-4GWOEG46zd01cF39NswXH443-j60Ov0RYZ9Vu-xtpbT8UFCuy9QA4iH2hXsEzh-2mF6nFnKk96WamXnCYxT3rGnv8/a1600/dispaly3.png) center no-repeat;max-width:0px;padding:18px 24px;top:25px}
.link1:hover {position:relative;display:inline-block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9hbF6gdRE9mnwR0CD77wgtBUrsuq1XZcRMpDyQKR2zEEFMzBou9DoJieN1jUnrmrvRbn-5-h459laEGaPYZf5wqyr9Puyj4PMbW1gMdgcYIdyqiQglbgzQd8NsAoMPsFDGLiKzF4NGoQ/s1600/link3.png) center no-repeat;max-width:0px;padding:18px 24px;top:25px}
.link2:hover {position:relative;display:inline-block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJhxyd-MAQtCZmAP-XBYA8nFJHdeaPeX7Jy_3a5k5AY9cxFxIgvjBPXDlbLN2nGW-QPm3xZutpbUFS-ZCNvZoWN_O1bl-b5A-6NHGDLqJi8G9CGeJWX4Sw4VJJ3B1dwolQZV2WRS2k9i0/s1600/link23.png) center no-repeat;max-width:0px;padding:18px 24px;top:25px}
3. CSS/style dengan dominan warna kuning.
/* Audio Responsive */
.skin {display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiujrViUIUvgL6_lai6Kof2a90pQ3znzYH6SBKNTqcPpJdPhVN1AY_cZMJjeAqYqrE2BFP1iBPBLAuCAJdn7DPfD9WsXpfUFVDQBNcYpgnnSemy6eDgZ4aaycr1OrQ9o1sCLNHDeTtI-hw/s1600/Player61.png) center no-repeat;max-width:700px;padding:120px;margin:0 auto 0px auto;text-align:center}
.display {position:relative;display:inline-block;background-color:transparent;width:350px;height:80px;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;}
.play {position:relative;display:inline-block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbSouPpM7Gsqc6KYc-mzX_5Gen7mwTQ-L20fg12SCHQIPz5B0qEt8-0VUXAqAqnuwsJSAEmgJfHi7WW7vaJovo39m85j-m2OFNKhhXlVIEAamEbCXp8aVHw6oynJnMqYHMDDA04_D49Lk/s1600/Play1.png) center no-repeat;max-width:0px;padding:18px 24px;top:25px}
.pause {position:relative;display:inline-block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_VvneHuGK1ykb2Nk9y9xurAd6UFSNslEBKMi4S0JQlkQqHF4CIxxlwpyIJ94U-5SSuVPrcg2dXm0dwVqD3nHR1mcBE1QSwK_8FPIYwacmcfVlPU9Sdw4rGQ-B8izmesLue-wkRsA4ySw/s1600/Pause1.png) center no-repeat;max-width:0px;padding:18px 24px;top:25px}
.display1 {position:relative;display:inline-block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilc0oWdJ-754S7kIrvUIbo8qFESa2YTBq6cAvaBhcXTS8NmsoOL9rvvh39jxqAiKrN09vYNybPPRoSPvmK1FdKRe21XTvm2YrHf8Q3OiaAiqYskVE5M9AlnIIiEx-0KBnm1mRTmKn3cZs/s1600/dispaly1.png) center no-repeat;max-width:0px;padding:18px 24px;top:25px}
.link1 {position:relative;display:inline-block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkHpaDU_ug68JGXNNhEZ6Mi4I34maSUdUsZ2cAc-tP8CxQQGEnVQAwxubCCsJxng3qXaLzGrv202tVKaKrlUp7nL-WAvN6BlXIbV4RXBO8nR8czs20vOQREE-FdZWmRbc4ko3BkYBiDIg/s1600/link1.png) center no-repeat;max-width:0px;padding:18px 24px;top:25px}
.link2 {position:relative;display:inline-block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSFd0nqByW4NuK3n2m6LrgBtQgKDk94m2ZOxnkNLf_c77RrkdkyHNPDKWboGiR-ZSVf07iBnDilJQsagnYZ5Esh4QVC3YTWUj3xEAoDJ0G2oTRCNhl3H1YcNtjAiPU5SAXFysYMbF4aog/s1600/link21.png) center no-repeat;max-width:0px;padding:18px 24px;top:25px}
.play:hover {position:relative;display:inline-block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7xq_15bU2qujdJxQRVoACRSLdH3Llf-t_pujGtpvxIV0NeduFX6ENArlo49HFi6pHseHVTfNqgxwh52L4kzsZFatZ35fsl7vJDAo7DcZ0mU5p56nLFyW17DwcBiDGNiSHupStAOQ6E-A/s1600/Play4.png) center no-repeat;max-width:0px;padding:18px 24px;top:25px}
.pause:hover {position:relative;display:inline-block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhttQaMHb5LViBDVPZWsrbjUMaWim6lBM1umLoGqTqjCFe55wzoLPsR3Jfvsw7sbeZ9pHJxIeAPL3sbDCkzhjf2phQSp4aA3xvhiVGS3vCXk9P2g_lvneKL4dibO2aHv_luvgKQg4-zJYg/s1600/Pause4.png) center no-repeat;max-width:0px;padding:18px 24px;top:25px}
.display1:hover {position:relative;display:inline-block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgo8YKbptCqZhf2Seh_mxr7IrZssqixpRXm3WJJL8_8Vypc5mW0O0eptmsCjqr2PCwZLdWNvIUoEUQbvtkein-jWL4L3FUy9neuxM94zxrnx6qKyyoNM2Zj-mHrJbTaOQEjDEeOZaLX1jY/s1600/dispaly4.png) center no-repeat;max-width:0px;padding:18px 24px;top:25px}
.link1:hover {position:relative;display:inline-block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRRfzXPyVrQwTKQPzhcIl-vEiLdetbtVJy3PbKlysY84XECv-Y6g1QJhLmWm0MiCKa-aEumko-Idsz0ckl_OyDK0cVitDYxQfAL_oqwlGbktqQVD1r66aaUQ4EXK3RoAfcxHHbqYmCdgI/s1600/link4.png) center no-repeat;max-width:0px;padding:18px 24px;top:25px}
.link2:hover {position:relative;display:inline-block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMk8uqZtrwjFYp0zMwSNn_5hQqY0IPM354RG1qLF4HvekuKq7FbMHX_EvVBzx14gc3QIdeO9OwLUviKMsf1hs5mzvP7LZ4ESKBBbKCMZPq-ZEvJTtigIze2S02amQSJ0gb_XrhxNbS634/s1600/link24.png) center no-repeat;max-width:0px;padding:18px 24px;top:25px}
4. CSS/style dengan dominan warna merah.
/* Audio Responsive */
.skin {display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNRpSX2ahoeYr-ncDy_LmdVD5ekCQY8_rcc6JP21UfUrb5kVfwX-kuxyOD5gdhkfOgvhK6mGrhmK4ob9gzbLQMtxskodC_sXBz2IXaMgtDJ9ZqjVjwSLbymPzA7pMHHxLAR6e0XYyEj8c/s1600/Player64.png) center no-repeat;max-width:700px;padding:120px;margin:0 auto 0px auto;text-align:center}
.display {position:relative;display:inline-block;background-color:transparent;width:350px;height:80px;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;}
.play {position:relative;display:inline-block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbSouPpM7Gsqc6KYc-mzX_5Gen7mwTQ-L20fg12SCHQIPz5B0qEt8-0VUXAqAqnuwsJSAEmgJfHi7WW7vaJovo39m85j-m2OFNKhhXlVIEAamEbCXp8aVHw6oynJnMqYHMDDA04_D49Lk/s1600/Play1.png) center no-repeat;max-width:0px;padding:18px 24px;top:25px}
.pause {position:relative;display:inline-block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_VvneHuGK1ykb2Nk9y9xurAd6UFSNslEBKMi4S0JQlkQqHF4CIxxlwpyIJ94U-5SSuVPrcg2dXm0dwVqD3nHR1mcBE1QSwK_8FPIYwacmcfVlPU9Sdw4rGQ-B8izmesLue-wkRsA4ySw/s1600/Pause1.png) center no-repeat;max-width:0px;padding:18px 24px;top:25px}
.display1 {position:relative;display:inline-block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilc0oWdJ-754S7kIrvUIbo8qFESa2YTBq6cAvaBhcXTS8NmsoOL9rvvh39jxqAiKrN09vYNybPPRoSPvmK1FdKRe21XTvm2YrHf8Q3OiaAiqYskVE5M9AlnIIiEx-0KBnm1mRTmKn3cZs/s1600/dispaly1.png) center no-repeat;max-width:0px;padding:18px 24px;top:25px}
.link1 {position:relative;display:inline-block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkHpaDU_ug68JGXNNhEZ6Mi4I34maSUdUsZ2cAc-tP8CxQQGEnVQAwxubCCsJxng3qXaLzGrv202tVKaKrlUp7nL-WAvN6BlXIbV4RXBO8nR8czs20vOQREE-FdZWmRbc4ko3BkYBiDIg/s1600/link1.png) center no-repeat;max-width:0px;padding:18px 24px;top:25px}
.link2 {position:relative;display:inline-block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSFd0nqByW4NuK3n2m6LrgBtQgKDk94m2ZOxnkNLf_c77RrkdkyHNPDKWboGiR-ZSVf07iBnDilJQsagnYZ5Esh4QVC3YTWUj3xEAoDJ0G2oTRCNhl3H1YcNtjAiPU5SAXFysYMbF4aog/s1600/link21.png) center no-repeat;max-width:0px;padding:18px 24px;top:25px}
.play:hover {position:relative;display:inline-block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGlNGroSXcsBPs_hYSbrVUqVB0Xd5uJWdQe64iTHvt4DBxvjTR6OqNhjTJAVXAOJ5wGj7o0HHz3SnLOBjfGUfdbWfPNrXru77K3yWCS1IPRzOuKurjDlxjF-nJNm_xySo0vjLmTM4tfdY/s1600/Play5.png) center no-repeat;max-width:0px;padding:18px 24px;top:25px}
.pause:hover {position:relative;display:inline-block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEit4m94dbnyyh5qnXpmep2tDJXd-SVzk_Wn7ick5y4gYIF3-Mg6DPbeGgzFHFjMc_2BJ-N0aayPPhWz4U4TI0zt7pN59enWKYOYHYaf9MJhfCpKj6qU5b0kCLac7riBKr6MvmtBSLsIGdo/s1600/Pause5.png) center no-repeat;max-width:0px;padding:18px 24px;top:25px}
.display1:hover {position:relative;display:inline-block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNZUCRnr9gxK09m8_IPdl9gzocro2dPwt0KQpvkh9nBgHdfYkb9nxM1Zbj1G5JXMv2Lq8bDibHh36SKi1uWrNivyzrVUvrXhlq94lbGAvuF9gCd7sMaSoubot0FUVM5v_M4JIhv3dR0lM/s1600/dispaly5.png) center no-repeat;max-width:0px;padding:18px 24px;top:25px}
.link1:hover {position:relative;display:inline-block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9TSRrQHwhtbn8UvDmm_VFxAmq3ScJkvUBN8p-hWpW8KW9-jblemsdyAc2H7pKjWveev3vm4L7rqY7fPWc4a6Vt8cacsPCCy6QaEBEvkfgyq_YnGJRK1wxT_LfH460N0gcnmHMSHmnDq0/s1600/link5.png) center no-repeat;max-width:0px;padding:18px 24px;top:25px}
.link2:hover {position:relative;display:inline-block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPHqhRNPYGilCFS4GgTuRLCKQcjeLV_AOIBryYYaE-RAy63uSrfmc57JfwuKpDnE4YK7iEM6klFF2w8RAlZOsXF67k2pB-w7lk9cspvhwIs_HtO4LJk6utuYhHWzuWveC14y17ts5tUtY/s1600/link25.png) center no-repeat;max-width:0px;padding:18px 24px;top:25px}
5. CSS/style dengan dominan warna pink.
/* Audio Responsive */
.skin {display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUAZ1p2no1tDBlJanDxkaTi2ardKEXdrhF1pPNVTBk_Q35fJ-AB3hW-Q9G7bl8q0tJP0DkSNWlKmmlCaVK2YleYky9bFnzZp0njzVNSDue3b4htyjLyGOLj3S8TT0SUyxqd_JceIwPzzU/s1600/Player65.png) center no-repeat;max-width:700px;padding:120px;margin:0 auto 0px auto;text-align:center}
.display {position:relative;display:inline-block;background-color:transparent;width:350px;height:80px;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;}
.play {position:relative;display:inline-block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbSouPpM7Gsqc6KYc-mzX_5Gen7mwTQ-L20fg12SCHQIPz5B0qEt8-0VUXAqAqnuwsJSAEmgJfHi7WW7vaJovo39m85j-m2OFNKhhXlVIEAamEbCXp8aVHw6oynJnMqYHMDDA04_D49Lk/s1600/Play1.png) center no-repeat;max-width:0px;padding:18px 24px;top:25px}
.pause {position:relative;display:inline-block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_VvneHuGK1ykb2Nk9y9xurAd6UFSNslEBKMi4S0JQlkQqHF4CIxxlwpyIJ94U-5SSuVPrcg2dXm0dwVqD3nHR1mcBE1QSwK_8FPIYwacmcfVlPU9Sdw4rGQ-B8izmesLue-wkRsA4ySw/s1600/Pause1.png) center no-repeat;max-width:0px;padding:18px 24px;top:25px}
.display1 {position:relative;display:inline-block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilc0oWdJ-754S7kIrvUIbo8qFESa2YTBq6cAvaBhcXTS8NmsoOL9rvvh39jxqAiKrN09vYNybPPRoSPvmK1FdKRe21XTvm2YrHf8Q3OiaAiqYskVE5M9AlnIIiEx-0KBnm1mRTmKn3cZs/s1600/dispaly1.png) center no-repeat;max-width:0px;padding:18px 24px;top:25px}
.link1 {position:relative;display:inline-block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkHpaDU_ug68JGXNNhEZ6Mi4I34maSUdUsZ2cAc-tP8CxQQGEnVQAwxubCCsJxng3qXaLzGrv202tVKaKrlUp7nL-WAvN6BlXIbV4RXBO8nR8czs20vOQREE-FdZWmRbc4ko3BkYBiDIg/s1600/link1.png) center no-repeat;max-width:0px;padding:18px 24px;top:25px}
.link2 {position:relative;display:inline-block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSFd0nqByW4NuK3n2m6LrgBtQgKDk94m2ZOxnkNLf_c77RrkdkyHNPDKWboGiR-ZSVf07iBnDilJQsagnYZ5Esh4QVC3YTWUj3xEAoDJ0G2oTRCNhl3H1YcNtjAiPU5SAXFysYMbF4aog/s1600/link21.png) center no-repeat;max-width:0px;padding:18px 24px;top:25px}
.play:hover {position:relative;display:inline-block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1M3EIxdN6ZadCC7YqPzKMINDe6b7TJZzQTm9SvJH-ha-yPrblxOtGSMwQ-nYTWg3XyFs1Sa5B2VomynY91S02-3sk9hXgP7geP3_Zv22Bp2oLrKk-SYsjJeXqg0Fj-Vo5NDuNod44fnc/s1600/Play6.png) center no-repeat;max-width:0px;padding:18px 24px;top:25px}
.pause:hover {position:relative;display:inline-block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQO1Dq7mH1C3kdlxQnVwcod0LRryHkodE1Njh_DYqDiQC7uz4jnmqlGjJe-jIOW9mEWD-dlak2cfFYfdKwi2wpnCI2AL-ZiKqOAiR40YJKBR-hINNGlr6nDaQlEiZDqYIMnkyKXQmGJ_U/s1600/Pause6.png) center no-repeat;max-width:0px;padding:18px 24px;top:25px}
.display1:hover {position:relative;display:inline-block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPJEAfrsqJPaYn9UzRevRUcN7OjNyIVxIME_3lnwl2YjaL1EloL4TcBrHQOMKLmbk0nCWQsnJWVoG7rDA0KbcME4NgyfdVOoEnIHWxRHkDULyQ5QgS-SoXEbKGEusYWigJFcuUWPB84lM/s1600/dispaly6.png) center no-repeat;max-width:0px;padding:18px 24px;top:25px}
.link1:hover {position:relative;display:inline-block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP4Ns-EPidMnbIObJ990HRK431pWO-iX7u5QzW-MzThtV7uA5tLqhXAMcKQm6qT_RDZj8AZYHMuJhpOo5voLpB2yNCSyGDScdc_Jh_RpV30nF3eHbExIrkY5rH5h_uiP5V3XEzjviMy_I/s1600/link6.png) center no-repeat;max-width:0px;padding:18px 24px;top:25px}
.link2:hover {position:relative;display:inline-block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0vWfJkuy2RCayJfdOZjp9VfaAnc1sMigy0Yuoi6vHFV3B-zKZpJEEU3Z3rVmaprXFhFkFxm3-wywYSiWeS0QDAhqDe-Rou3QssaRv8KVCpfg-x8WqQrLeQwypseaTGbf4gsXwteRDiIM/s1600/link26.png) center no-repeat;max-width:0px;padding:18px 24px;top:25px}
6. CSS/style dengan dominan warna ungu.
/* Audio Responsive */
.skin {display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZNqwsYq1lEeHEugbP-Egmh4lj0eQZb4hxVbaHOGKlyCsBezRGmcVzlMyKLhMY08K9PavldyrPIMJTdWj3YVUrl6tUVh9aa9nzMZe4vib8hlhEm_K7570IO-TdjvBn-M1UFw4hbgk7oRs/s1600/Player66.png) center no-repeat;max-width:700px;padding:120px;margin:0 auto 0px auto;text-align:center}
.display {position:relative;display:inline-block;background-color:transparent;width:350px;height:80px;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;}
.play {position:relative;display:inline-block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbSouPpM7Gsqc6KYc-mzX_5Gen7mwTQ-L20fg12SCHQIPz5B0qEt8-0VUXAqAqnuwsJSAEmgJfHi7WW7vaJovo39m85j-m2OFNKhhXlVIEAamEbCXp8aVHw6oynJnMqYHMDDA04_D49Lk/s1600/Play1.png) center no-repeat;max-width:0px;padding:18px 24px;top:25px}
.pause {position:relative;display:inline-block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_VvneHuGK1ykb2Nk9y9xurAd6UFSNslEBKMi4S0JQlkQqHF4CIxxlwpyIJ94U-5SSuVPrcg2dXm0dwVqD3nHR1mcBE1QSwK_8FPIYwacmcfVlPU9Sdw4rGQ-B8izmesLue-wkRsA4ySw/s1600/Pause1.png) center no-repeat;max-width:0px;padding:18px 24px;top:25px}
.display1 {position:relative;display:inline-block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilc0oWdJ-754S7kIrvUIbo8qFESa2YTBq6cAvaBhcXTS8NmsoOL9rvvh39jxqAiKrN09vYNybPPRoSPvmK1FdKRe21XTvm2YrHf8Q3OiaAiqYskVE5M9AlnIIiEx-0KBnm1mRTmKn3cZs/s1600/dispaly1.png) center no-repeat;max-width:0px;padding:18px 24px;top:25px}
.link1 {position:relative;display:inline-block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkHpaDU_ug68JGXNNhEZ6Mi4I34maSUdUsZ2cAc-tP8CxQQGEnVQAwxubCCsJxng3qXaLzGrv202tVKaKrlUp7nL-WAvN6BlXIbV4RXBO8nR8czs20vOQREE-FdZWmRbc4ko3BkYBiDIg/s1600/link1.png) center no-repeat;max-width:0px;padding:18px 24px;top:25px}
.link2 {position:relative;display:inline-block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSFd0nqByW4NuK3n2m6LrgBtQgKDk94m2ZOxnkNLf_c77RrkdkyHNPDKWboGiR-ZSVf07iBnDilJQsagnYZ5Esh4QVC3YTWUj3xEAoDJ0G2oTRCNhl3H1YcNtjAiPU5SAXFysYMbF4aog/s1600/link21.png) center no-repeat;max-width:0px;padding:18px 24px;top:25px}
.play:hover {position:relative;display:inline-block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3LRuQ5x238xYHcRIu9K_rT8pNUpU0BSuL5RzPYdPY8ey5g6St6x-QiajwYSK9BKW4KWK8tlDA_yCEltIuWsoHmYX0Dmw9uKhx-sE_az-cZ2YERU2yeJeDs9RrW8ilkKd6II-J3OHJfeg/s1600/Play7.png) center no-repeat;max-width:0px;padding:18px 24px;top:25px}
.pause:hover {position:relative;display:inline-block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEic5bgeisQbr17UhyphenhyphenStDfsRVP_M3o_ECVxQpmXOIEzjwJgZJZaTy3sdM0YQdUoE3r4mCazOSaAs0681nz-hLsJV2IugaoCMjCiTVhYhMSYcr-twnmdwlhbUKb_wzlNQJa7ixfYtooI1JLo/s1600/Pause7.png) center no-repeat;max-width:0px;padding:18px 24px;top:25px}
.display1:hover {position:relative;display:inline-block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbAyjRFM9FZqNvvsp8HcnLN0yDoozqgUFL5KI_WJEWwdDQ18CyEUfsQaZWfM99u_bdQccPN7R5wnfqCrNaD5or6p_WhknPibpusQFb_JntXUwHEddNOJVVCb6l6bNnH8DwgW-T8an8Cgk/s1600/dispaly7.png) center no-repeat;max-width:0px;padding:18px 24px;top:25px}
.link1:hover {position:relative;display:inline-block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGbgJvzNszQUh0RAlAviFJSoo0mxNGuu9h6PTrXjCe_NWJtEE_kAE2x8cR9cmBtWTii3M9NOitvZSpTG3XdBvddGTtfLBjeB36GxYNnbd31RVvYAWdO4aKFwRKfpgmlUIPSmVhyh_yxDo/s1600/link7.png) center no-repeat;max-width:0px;padding:18px 24px;top:25px}
.link2:hover {position:relative;display:inline-block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPkUBHAVLJ-p2gfkLi_FX0TYjTs9a1Y9lZIyI9v8Nus5VSi5lhjJE8BGjAr3qfFjdkmX_WvPK2ll-vzNGVZiIGeh97FGIBpYPCj-f1i1S37BzRf4tZ4r-4y3zEgjGR3IZE5dw8NJJy0dk/s1600/link27.png) center no-repeat;max-width:0px;padding:18px 24px;top:25px}
7. CSS/style dengan dominan warna jingga.
/* Audio Responsive */
.skin {display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBFtUoELIxHM_pkl5Yej8NyBz0SYCWWLzv9qzHVCkuq2DeGnplE6s55ux430wDGM3f0ModkmZ9Agd4uWZxMoDHZ-YZ-6OXoNJ4ZxB2puv2SVWhYfjLBO1MBQvq8Ilht_EGps7LgYnL6cM/s1600/Player67.png) center no-repeat;max-width:700px;padding:120px;margin:0 auto 0px auto;text-align:center}
.display {position:relative;display:inline-block;background-color:transparent;width:350px;height:80px;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;}
.play {position:relative;display:inline-block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbSouPpM7Gsqc6KYc-mzX_5Gen7mwTQ-L20fg12SCHQIPz5B0qEt8-0VUXAqAqnuwsJSAEmgJfHi7WW7vaJovo39m85j-m2OFNKhhXlVIEAamEbCXp8aVHw6oynJnMqYHMDDA04_D49Lk/s1600/Play1.png) center no-repeat;max-width:0px;padding:18px 24px;top:25px}
.pause {position:relative;display:inline-block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_VvneHuGK1ykb2Nk9y9xurAd6UFSNslEBKMi4S0JQlkQqHF4CIxxlwpyIJ94U-5SSuVPrcg2dXm0dwVqD3nHR1mcBE1QSwK_8FPIYwacmcfVlPU9Sdw4rGQ-B8izmesLue-wkRsA4ySw/s1600/Pause1.png) center no-repeat;max-width:0px;padding:18px 24px;top:25px}
.display1 {position:relative;display:inline-block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilc0oWdJ-754S7kIrvUIbo8qFESa2YTBq6cAvaBhcXTS8NmsoOL9rvvh39jxqAiKrN09vYNybPPRoSPvmK1FdKRe21XTvm2YrHf8Q3OiaAiqYskVE5M9AlnIIiEx-0KBnm1mRTmKn3cZs/s1600/dispaly1.png) center no-repeat;max-width:0px;padding:18px 24px;top:25px}
.link1 {position:relative;display:inline-block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkHpaDU_ug68JGXNNhEZ6Mi4I34maSUdUsZ2cAc-tP8CxQQGEnVQAwxubCCsJxng3qXaLzGrv202tVKaKrlUp7nL-WAvN6BlXIbV4RXBO8nR8czs20vOQREE-FdZWmRbc4ko3BkYBiDIg/s1600/link1.png) center no-repeat;max-width:0px;padding:18px 24px;top:25px}
.link2 {position:relative;display:inline-block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSFd0nqByW4NuK3n2m6LrgBtQgKDk94m2ZOxnkNLf_c77RrkdkyHNPDKWboGiR-ZSVf07iBnDilJQsagnYZ5Esh4QVC3YTWUj3xEAoDJ0G2oTRCNhl3H1YcNtjAiPU5SAXFysYMbF4aog/s1600/link21.png) center no-repeat;max-width:0px;padding:18px 24px;top:25px}
.play:hover {position:relative;display:inline-block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg49vE289zmERyyg3BuP67sGg-nq_bfk4ka1Wwi5Z-GuJ3FEjVt-fyKg8OYwsYTK2pGjjPlOZESQ0-rrSrhE06ZM-KiLAQK9AgKwIT6jSpDcD3XqksetZYIoMTnmqGk_bjs7ZlCy_oG070/s1600/Play8.png) center no-repeat;max-width:0px;padding:18px 24px;top:25px}
.pause:hover {position:relative;display:inline-block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxhqC3xF4sGMJnieYsK3pmccrZ3zsBqStBgBSiD_ZRquJhpGTU-7gMdVsKtaWEZxN-xFH6n31LJgsiXc-i0S7xj2OEWAlgmiHBJ1fT2rT2sCMlc2ZyGpKA_XxtP2d0CnX4VEniwLYNiPA/s1600/Pause8.png) center no-repeat;max-width:0px;padding:18px 24px;top:25px}
.display1:hover {position:relative;display:inline-block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggM3PeZGqiCkm4RWq2WaKx7kh3N0LW9uTWgVUB9t-hiNqMDdIvjg4kmRY3h6dE6GvHse_kdEnB0-P7TlMA_wNa2BvWglaWmXeqSItdMXSuhOL94VbILttNpOKtjT5cx0jk3Ny3lDz5ZUU/s1600/dispaly8.png) center no-repeat;max-width:0px;padding:18px 24px;top:25px}
.link1:hover {position:relative;display:inline-block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhrUX8Eaw5JahZSLuJq88E-Hku_kK_VNNmsPj0m5lDE8ZNpXC4fnjmukj9OvtsR0GdmuKYc1rpZq82KRPBQ2wqbmguaBQfP5cXziZyBUEQG0_7aGYg727cDyiZ99omDkIxZ6JZ17T0suA/s1600/link8.png) center no-repeat;max-width:0px;padding:18px 24px;top:25px}
.link2:hover {position:relative;display:inline-block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqMcGpz9qofIT5x3o00JbJ-f4HCfJVKWe-OOfJErGoAUCSkvB0qfLSsvEbasacZR8nGrkI0MEX8kfUC6GZ_exK3h-4ARmDCfBtMSCbJEusdHPna7ab7-vZrKr_lSfCc-iNqH-MRWWYFWY/s1600/link28.png) center no-repeat;max-width:0px;padding:18px 24px;top:25px}
8. CSS/style dengan dominan warna merah muda.
/* Audio Responsive */
.skin {display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjQstpzAEtoCduLyAQl4xHibFbDG6xsaYtXvin3QgE1oB5wEpBOcXL0lIw7qbsUggeSFNG4JYhe17OHKNim_8MVqjG6E-kkAHV3464U1BQm0O-ZGcPEYcPXTlpvvrjch8v6JB4Ckg1UNg/s1600/Player68.png) center no-repeat;max-width:700px;padding:120px;margin:0 auto 0px auto;text-align:center}
.display {position:relative;display:inline-block;background-color:transparent;width:350px;height:80px;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;}
.play {position:relative;display:inline-block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbSouPpM7Gsqc6KYc-mzX_5Gen7mwTQ-L20fg12SCHQIPz5B0qEt8-0VUXAqAqnuwsJSAEmgJfHi7WW7vaJovo39m85j-m2OFNKhhXlVIEAamEbCXp8aVHw6oynJnMqYHMDDA04_D49Lk/s1600/Play1.png) center no-repeat;max-width:0px;padding:18px 24px;top:25px}
.pause {position:relative;display:inline-block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_VvneHuGK1ykb2Nk9y9xurAd6UFSNslEBKMi4S0JQlkQqHF4CIxxlwpyIJ94U-5SSuVPrcg2dXm0dwVqD3nHR1mcBE1QSwK_8FPIYwacmcfVlPU9Sdw4rGQ-B8izmesLue-wkRsA4ySw/s1600/Pause1.png) center no-repeat;max-width:0px;padding:18px 24px;top:25px}
.display1 {position:relative;display:inline-block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilc0oWdJ-754S7kIrvUIbo8qFESa2YTBq6cAvaBhcXTS8NmsoOL9rvvh39jxqAiKrN09vYNybPPRoSPvmK1FdKRe21XTvm2YrHf8Q3OiaAiqYskVE5M9AlnIIiEx-0KBnm1mRTmKn3cZs/s1600/dispaly1.png) center no-repeat;max-width:0px;padding:18px 24px;top:25px}
.link1 {position:relative;display:inline-block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkHpaDU_ug68JGXNNhEZ6Mi4I34maSUdUsZ2cAc-tP8CxQQGEnVQAwxubCCsJxng3qXaLzGrv202tVKaKrlUp7nL-WAvN6BlXIbV4RXBO8nR8czs20vOQREE-FdZWmRbc4ko3BkYBiDIg/s1600/link1.png) center no-repeat;max-width:0px;padding:18px 24px;top:25px}
.link2 {position:relative;display:inline-block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSFd0nqByW4NuK3n2m6LrgBtQgKDk94m2ZOxnkNLf_c77RrkdkyHNPDKWboGiR-ZSVf07iBnDilJQsagnYZ5Esh4QVC3YTWUj3xEAoDJ0G2oTRCNhl3H1YcNtjAiPU5SAXFysYMbF4aog/s1600/link21.png) center no-repeat;max-width:0px;padding:18px 24px;top:25px}
.play:hover {position:relative;display:inline-block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgboCgKkmtoSh6REq8qoDsf-1epRJzlnw9xO9uv4d7WdGR2kiIDzhB5x9thIwAKEG4OQ4o3xUxWjx0KGH08E5hyXg7mAyNjnsQL5IYV2Y65qOQHFh4oWLaRG3_gneqkvSprfDLbR-sHUH8/s1600/Play9.png) center no-repeat;max-width:0px;padding:18px 24px;top:25px}
.pause:hover {position:relative;display:inline-block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9_5oe6hJ_DJ91I4fjmPG7N6sN9GwmPmvYxEkbk_02um8RJtxYBM4T-HZhk7I-KEPJnbtalDjJS0SEzCDISrwjuKVoPnx0RW-uiiB5pczlbYonMRRCWD94ZY0P-eJlgWFWjxIhAhwlkKk/s1600/Pause9.png) center no-repeat;max-width:0px;padding:18px 24px;top:25px}
.display1:hover {position:relative;display:inline-block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4DMIPgYj8vWC1HzeTOJeLkoy0OIhdPaysQVf4Tv796CUD_-ETd_yS1yeqi2smfih7hwrDOOr5apA7acMFR5RdTgW-bZKhGDiYa9zPfzQj7Coctp6pP02mMK5iJcKThZtHqF1BvWzaDdc/s1600/dispaly9.png) center no-repeat;max-width:0px;padding:18px 24px;top:25px}
.link1:hover {position:relative;display:inline-block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVsTUJPvC7fM45DRkHehmnATxRl4On-zn35Ybr7nv3URXxpPnmjLfRtD4xB8mBOROXF3VsVn0BTrhJyeCxPl-8UM061gOBSXCaLeY3Otjgdhj3BWi5jlIr1c2RyS2dsEs_5ndqjrQ3drs/s1600/link9.png) center no-repeat;max-width:0px;padding:18px 24px;top:25px}
.link2:hover {position:relative;display:inline-block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6rmRpMTffZiais2WAJ_eGnoUOEie6WquPP9GvAl7fhmt3b_Z5fRVJVG_d4HwMs4XRRzcIwIIAHjHKCpqjU0uimYV3fFSgADcsSWZm0A86KvG5bgur5EtUrzE0BcKXQKxp7VFzRnNsCb8/s1600/link29.png) center no-repeat;max-width:0px;padding:18px 24px;top:25px}
9. CSS/style dengan dominan warna coklat.
/* Audio Responsive */
.skin {display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3kQUr2u48qi4OZv9odbGm8mMIsU3CGlqgwIYCQB9yEtvNLn__6XK2xFEhnIXX1a6VTqw3eoCMqPpnqWIQ1sCpvKSeqp3J9dBtWMjhK8qMwMwTGro1R4V9zYrJdlJROmn5ifAg6wdhrXA/s1600/Player69.png) center no-repeat;max-width:700px;padding:120px;margin:0 auto 0px auto;text-align:center}
.display {position:relative;display:inline-block;background-color:transparent;width:350px;height:80px;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;}
.play {position:relative;display:inline-block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbSouPpM7Gsqc6KYc-mzX_5Gen7mwTQ-L20fg12SCHQIPz5B0qEt8-0VUXAqAqnuwsJSAEmgJfHi7WW7vaJovo39m85j-m2OFNKhhXlVIEAamEbCXp8aVHw6oynJnMqYHMDDA04_D49Lk/s1600/Play1.png) center no-repeat;max-width:0px;padding:18px 24px;top:25px}
.pause {position:relative;display:inline-block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_VvneHuGK1ykb2Nk9y9xurAd6UFSNslEBKMi4S0JQlkQqHF4CIxxlwpyIJ94U-5SSuVPrcg2dXm0dwVqD3nHR1mcBE1QSwK_8FPIYwacmcfVlPU9Sdw4rGQ-B8izmesLue-wkRsA4ySw/s1600/Pause1.png) center no-repeat;max-width:0px;padding:18px 24px;top:25px}
.display1 {position:relative;display:inline-block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilc0oWdJ-754S7kIrvUIbo8qFESa2YTBq6cAvaBhcXTS8NmsoOL9rvvh39jxqAiKrN09vYNybPPRoSPvmK1FdKRe21XTvm2YrHf8Q3OiaAiqYskVE5M9AlnIIiEx-0KBnm1mRTmKn3cZs/s1600/dispaly1.png) center no-repeat;max-width:0px;padding:18px 24px;top:25px}
.link1 {position:relative;display:inline-block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkHpaDU_ug68JGXNNhEZ6Mi4I34maSUdUsZ2cAc-tP8CxQQGEnVQAwxubCCsJxng3qXaLzGrv202tVKaKrlUp7nL-WAvN6BlXIbV4RXBO8nR8czs20vOQREE-FdZWmRbc4ko3BkYBiDIg/s1600/link1.png) center no-repeat;max-width:0px;padding:18px 24px;top:25px}
.link2 {position:relative;display:inline-block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSFd0nqByW4NuK3n2m6LrgBtQgKDk94m2ZOxnkNLf_c77RrkdkyHNPDKWboGiR-ZSVf07iBnDilJQsagnYZ5Esh4QVC3YTWUj3xEAoDJ0G2oTRCNhl3H1YcNtjAiPU5SAXFysYMbF4aog/s1600/link21.png) center no-repeat;max-width:0px;padding:18px 24px;top:25px}
.play:hover {position:relative;display:inline-block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgATw_E1_SzghejuNDyE5glJbgWkp2MhFi7VXVg5Y56jPWjmCzbL5lyamFA48Zj5AgtKflOnNVHEHP3AvBrqOi50qA3Eki_ujqIfdqG66DhMqc0EX-SwieEJf-GYFlXRpfnpYNt2M9CQvE/s1600/Play10.png) center no-repeat;max-width:0px;padding:18px 24px;top:25px}
.pause:hover {position:relative;display:inline-block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivNwf6yO2dBlz28ZE-uS6wfv_8KDnneqKXc_cC0tlUy_viyJiU0IOylVbkBg5jZ_I4gxPIHzXbvlN9MQErTZV3IUUHHXMdmii6-c52FsLjC_Qpeah45Hz86yFH9ewpBA2jcrP1uluYW9I/s1600/Pause10.png) center no-repeat;max-width:0px;padding:18px 24px;top:25px}
.display1:hover {position:relative;display:inline-block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGuu5MsltPI58lQs9De00g22bbyJ0MPcPX3rT4Uxp8cyY2BTpEt4M9bssPUu5-aeuMR16KcWZxJ14EjUcIk1INrRAB3earDLnJkizsplmRoleLReM8BFArKydceBZV9XURa5HkwslSEqs/s1600/dispaly10.png) center no-repeat;max-width:0px;padding:18px 24px;top:25px}
.link1:hover {position:relative;display:inline-block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrmTvUorWIZ_N1orBefpvdNhYmQkjmSRTEYuG53uHYNqE7kYKnxQpG_j4bBhHbBXVE-ugHapMvUvZQ9XzSljVMkgRSaHlrZliXEY_jywWeeARtqBsZF3-gsMhD-5PqvlXO8Ph8WjR4yFk/s1600/link10.png) center no-repeat;max-width:0px;padding:18px 24px;top:25px}
.link2:hover {position:relative;display:inline-block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgz_fVwJNgo4OFNnZCCRbfTKBdCRSovbaAMDlvU0m1a3AaAA1T7GbLhDBDG8gwn48vKJEsawFpPaAGIEPzdDpx8aSmy-mi2QQ5x2yABk4YRVoCJ1xjTL9sfU985KF7W93TQMm5YWx52RhI/s1600/link210.png) center no-repeat;max-width:0px;padding:18px 24px;top:25px}
Setelah selasai klik SAVE template.
Tambahkan class pada entri posting blog kita seperti contoh dibawah ini:
<div class="skin">
<audio id="skindesign">
<source src="XX"></source>
Your browser does not support the audio element.
</audio>
<div class="display">[ Judul : XXX ] [ Artis : XXX ]<br />[ Album : XXX ] [ Genre : XXX ]</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="Display" title="Display"/><a class="display1"></a>
<alt="Download 1" title="Download 1"/><a class="link1" href="XXXX"></a>
<alt="Download 2" title="Download 2"/><a class="link2" href="XXXXX"></a>
</alt></alt></alt></alt></div>
</div>
Ganti kode XXX dengan deskripsi file mp3 kita yang dibagikan.
Ganti Kode XXXX dengan link file mp3 download 1.
Ganti Kode XXXXX dengan link file mp3 download 2.
Setelah semua selesai kemudian klik PUBLISH dan lihat hasilnya.
Demikian pembahasan singkat tentang Cara Menambah Embed Audio dengan Skin Box Display Responsive. Mudah-mudahan akan memberikan manfaat bagi kita semua, jangan lupa masukan berupa saran, kritik atau sekedar komen selalu saya tunggu dan tak lupa selalu saya ucapkan terima kasih.
Show Parser Hide Parser