Hai taman-teman blogger yang tercinta dan mencintai blogger, kali ini saya akan bagikan tips/tutor bagi temen-teman yang suka menambahkan file audio musik pada entri posting yang dibagikan dan di download oleh para visitor yang berkunjung pada blog kesayangan anda.
Embed audio yang di bagikan ini sudah saya gabungkan dengan skin yang berbentuk antik dan lucu dengan model active speaker dengan penempatan beberapa tombol dengan fungsi play, pause, link downlaod 1, link download 2 dan tampilan display sebagai media info deskripsi dari file Mp3 yang bagikan seperti judul, artis, genre dan lainnya.
Langkah penempatan embed audio ini sangat simple dan mudah.
Letakkan kode script dibawah ini tepat diatas kode </footer>.
<script src='https://cdn.rawgit.com/ardezign/js/d01329d8/a-player.js' type='text/javascript'/>
Kemudian pilih salah satu CSS/style dibawah ini yang sesuai dengan warna dasar template.
Kode CSS satu dengan dominan warna putih.
/* Audio Responsive 1 */
.skin {display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6LA70gwaE3PA9V_xB1FWMY_ixMRUD7uHvrZo2K8ORRYRNT9OWe2Hnw3aunEs1oiNT9tZzjt8_N8-FP4XB5dnb4enSk219DOXteuSMof5wPqrk-4z3Sr-Cy_thHjuS9iBx9Qcfbg0sAg0/s1600/Player26.png) center no-repeat;max-width:435px;padding:55px;margin:0 auto 0px auto;text-align:center}
.display {position:relative;display:inline-block;background-color:transparent;width:180px;height:110px;padding:5px;color:#08b6ff;font-weight:700;font-size:10px;text-align:center;text-transform:uppercase;letter-spacing:0.5px;margin:auto;border:0px solid #303030;border-radius:1px;overflow:hidden;transition:all .3s;top:30px}
.play {position:relative;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZ7xNBFvpijxEkdw3atEhOkOKAd3mrlm_1_dthgterKdjXI-7l-gDSHs2-mqHSgQyjkpCxqoXu3rSvOrt11fAB7oicJBRuyMi3Hs5jSMlSncBJZuZcXAn1U9JCptDBLFOdQLkvonDS80s/s1600/Play_3.png) center no-repeat;max-width:0px;padding:22px 22px;}
.pause {position:relative;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIQgvaPT4Fd6zR2Le5EpfdVoIiZ6pCFkRpk3Vd6moCfjhtGBd6wsk1J__VsibbTW4s8U5JYnxtawGJRx_i-1eiWp5ZQYmejWPeNyVaL2_AlIsvX-EhhgP1tlh_ve94oSOj540RKFJPH4Q/s1600/Pause_3.png) center no-repeat;max-width:0px;padding:22px 22px;}
.download {position:relative;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3VyySsriYEhG2nQPRW3KIWVCBHZgZtyRtCh74JQPscbXUwam6Fr-kG-6_Usb6fXVG9gQDxgJXa5dnoL6-_T7v-z1Gv0lMSrsAsI7J47d6zydaIW2hy8cx7pBwUBxuXy2FUZkcG7hJSeQ/s1600/Download_3.png) center no-repeat;max-width:0px;padding:22px 22px;}
.play:hover {position:relative;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6uelo2OlWUhflFJWEW5Ebhc8TxTVlR13GkU5yoOrBN7kfMl9r67B5bzIlsCXoDdzn3OPSF7WZ6dZZV0XdCMQ5bhb_1NQRoB1_ZvLcGglVeFLHhRjrnEBgEHNIxNtOWS1bybQ8zvCQlBA/s1600/Play_2.png) center no-repeat;max-width:0px;padding:22px 22px;}
.pause:hover {position:relative;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgF84u57e7LDUrsggc8m__wJLNUnplB7N9E29Bhl4gzwAmE4jZkdxpYSNV9ngPfCxYCJzEVp-jE3FIgI0dtzRZfA9I_Jjb7l3wv1GDBfbRuFDqrA6CUxAMNW5czp0e68hnVFIoJ9zTZPzY/s1600/Pause_2.png) center no-repeat;max-width:0px;padding:22px 22px;}
.download:hover {position:relative;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkVqGwQ3ZoZirrvCaQExDtzzDtej5HWtwvLUs3hmwjVDoC-IReh44caqYRCcukf-_DSo2t-xXerw3jYuNzBqwPw1F1-Ft8RJiuGXMzVfDE-mU61dCdZgfZpcoXZV9Kc2okAV6SIjQ5TD8/s1600/Download_2.png) center no-repeat;max-width:0px;padding:22px 22px;} .box1 {display:inline-block;float:left;padding-left:55px;margin:7px auto 0px auto;text-align:center}
.box2 {display:inline-block;position:relative;padding:0;margin:0 auto 0px auto;text-align:center}
.box3 {display:inline-block;float:right;padding-right:55px;margin:7px auto 0px auto;text-align:center}
Kode CSS dua dengan dominan warna biru.
/* Audio Responsive 2 */
.skin {display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHaDU4cvdcfneCTIs-xCOUJ5jrVktccPtPs5Pfbh2AS4ZWBdSftlfMkCexDq9KEmzVFjneyTcSBHZgFFv8xoyzL2KXJ_uJ7TUz31Ozbed0liW1tkUauTcqgVY3N-IljGqcBLfiROpkLYs/s1600/Player22.png) center no-repeat;max-width:435px;padding:55px;margin:0 auto 0px auto;text-align:center}
.display {position:relative;display:inline-block;background-color:transparent;width:180px;height:110px;padding:5px;color:#08b6ff;font-weight:700;font-size:10px;text-align:center;text-transform:uppercase;letter-spacing:0.5px;margin:auto;border:0px solid #303030;border-radius:1px;overflow:hidden;transition:all .3s;top:30px}
.play {position:relative;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRLt_7vxYV57GlEB7Nwy1haQaceEFFzDLhsc_1PqxeoQzNUWdTgfhWc1-QZ4yCruVTdLyCCZDBk0XSBG9bCAF4GGyksH0sn5NNYTpNlXMYgLtx4gnWbWa6btM60LViC2hG3i366HXOdQw/s1600/Play_1.png) center no-repeat;max-width:0px;padding:22px 22px;}
.pause {position:relative;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh43QXo_MMfHKheFRO6IhlHNgMExVFygeZMIyUet_nd-Z9Nwar12RcIaJ9eTRbawVzxU2VYb041pFQMRiPyKc7_l29Xu84KoSWNxcl-fWqKMxMe0VdVR8ddgUINv1n1a05HFs-BdifpHOk/s1600/Pause_1.png) center no-repeat;max-width:0px;padding:22px 22px;}
.download {position:relative;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipJDN2mfVHnC8WVAqkAN16LHGwoOB44auQf1Xr7XHrb0yiSXhgllWY71_ezvM5rf-0n1pZ9_fVsxZhiJy84BmjQbgh7nBHc3PF2vYY3SVADXs4va8dmnO5Nd_FkmsM3pbF45zxPEl1pFA/s1600/Download_1.png) center no-repeat;max-width:0px;padding:22px 22px;}
.play:hover {position:relative;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6uelo2OlWUhflFJWEW5Ebhc8TxTVlR13GkU5yoOrBN7kfMl9r67B5bzIlsCXoDdzn3OPSF7WZ6dZZV0XdCMQ5bhb_1NQRoB1_ZvLcGglVeFLHhRjrnEBgEHNIxNtOWS1bybQ8zvCQlBA/s1600/Play_2.png) center no-repeat;max-width:0px;padding:22px 22px;}
.pause:hover {position:relative;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgF84u57e7LDUrsggc8m__wJLNUnplB7N9E29Bhl4gzwAmE4jZkdxpYSNV9ngPfCxYCJzEVp-jE3FIgI0dtzRZfA9I_Jjb7l3wv1GDBfbRuFDqrA6CUxAMNW5czp0e68hnVFIoJ9zTZPzY/s1600/Pause_2.png) center no-repeat;max-width:0px;padding:22px 22px;}
.download:hover {position:relative;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkVqGwQ3ZoZirrvCaQExDtzzDtej5HWtwvLUs3hmwjVDoC-IReh44caqYRCcukf-_DSo2t-xXerw3jYuNzBqwPw1F1-Ft8RJiuGXMzVfDE-mU61dCdZgfZpcoXZV9Kc2okAV6SIjQ5TD8/s1600/Download_2.png) center no-repeat;max-width:0px;padding:22px 22px;}
.box1 {display:inline-block;float:left;padding-left:55px;margin:7px auto 0px auto;text-align:center}
.box2 {display:inline-block;position:relative;padding:0;margin:0 auto 0px auto;text-align:center}
.box3 {display:inline-block;float:right;padding-right:55px;margin:7px auto 0px auto;text-align:center}
Kode CSS tiga dengan dominan warna kuning.
/* Audio Responsive 3 */
.skin {display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNCCXNBGldCtWPXRUk1bnp0fHZ-sjfz2wo5pdq1MBE3Sgp0CnCiZhg6P3EFIalW9qOyukjo0KlUK7ZSoxBX8RazbgDKUIRTNA3AvPRULzLw1HnfuT7avHzDbUrfYbxgT7Ld2qEbMKwVfA/s1600/Player24.png) center no-repeat;max-width:435px;padding:55px;margin:0 auto 0px auto;text-align:center}
.display {position:relative;display:inline-block;background-color:transparent;width:180px;height:110px;padding:5px;color:#08b6ff;font-weight:700;font-size:10px;text-align:center;text-transform:uppercase;letter-spacing:0.5px;margin:auto;border:0px solid #303030;border-radius:1px;overflow:hidden;transition:all .3s;top:30px}
.play {position:relative;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgY0MsGK0BUDFIQ9JSvom-jcrsGtYMqF19-jCCG9x5D0b2Ri_9V9bzOzDkHp7Ow4OJe5GsLgi7vc2PUPT_MN5qDcBwmY2_4SzPgDH_FNf5AVhTYCQvIlcRjaFLCbZkWKYD3M7k3oMI0ROY/s1600/Play_5.png) center no-repeat;max-width:0px;padding:22px 22px;}
.pause {position:relative;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjQqK8TgVQvSSyjnZD-dTg3m10W3ZTYx5vIA1RKHfEYuSBSqBe7Q8tiTALtBrZp95nEX0GC8vHcnVUBMRN2Ej2kOD90ogWVGVDDqG2w1xxwubcXeuilbSh1e1ZCJjxm2Ivc31xtDEk8jo/s1600/Pause_5.png) center no-repeat;max-width:0px;padding:22px 22px;}
.download {position:relative;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUW6Ru7nwaf7WPNGvWGxOswd-Hkx62MBFJOYqOJzxpyJ5fllrnYtGUQQJogmODVsNJ2A_uvnNS7HSM6R4a812CHqpV9hlEiO1u19u4rfLRYshuWuPNz9H4NwIOigL-BXWOdArgcmOBoVg/s1600/Download_5.png) center no-repeat;max-width:0px;padding:22px 22px;}
.play:hover {position:relative;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6uelo2OlWUhflFJWEW5Ebhc8TxTVlR13GkU5yoOrBN7kfMl9r67B5bzIlsCXoDdzn3OPSF7WZ6dZZV0XdCMQ5bhb_1NQRoB1_ZvLcGglVeFLHhRjrnEBgEHNIxNtOWS1bybQ8zvCQlBA/s1600/Play_2.png) center no-repeat;max-width:0px;padding:22px 22px;}
.pause:hover {position:relative;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgF84u57e7LDUrsggc8m__wJLNUnplB7N9E29Bhl4gzwAmE4jZkdxpYSNV9ngPfCxYCJzEVp-jE3FIgI0dtzRZfA9I_Jjb7l3wv1GDBfbRuFDqrA6CUxAMNW5czp0e68hnVFIoJ9zTZPzY/s1600/Pause_2.png) center no-repeat;max-width:0px;padding:22px 22px;}
.download:hover {position:relative;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkVqGwQ3ZoZirrvCaQExDtzzDtej5HWtwvLUs3hmwjVDoC-IReh44caqYRCcukf-_DSo2t-xXerw3jYuNzBqwPw1F1-Ft8RJiuGXMzVfDE-mU61dCdZgfZpcoXZV9Kc2okAV6SIjQ5TD8/s1600/Download_2.png) center no-repeat;max-width:0px;padding:22px 22px;}
.box1 {display:inline-block;float:left;padding-left:55px;margin:7px auto 0px auto;text-align:center}
.box2 {display:inline-block;position:relative;padding:0;margin:0 auto 0px auto;text-align:center}
.box3 {display:inline-block;float:right;padding-right:55px;margin:7px auto 0px auto;text-align:center}
Kode CSS empat dengan dominan warna merah.
/* Audio Responsive 4 */
.skin {display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiavY02B2tc9ohGOlMRlUQPDTBh2eK05wz9BJQhkjfGDQIBwaU4UIpyEBcmCxXuCbT7YwCMgciprMsD7H6aToi1OIN4MDrn6k6CYNxkKHi9r65FKpjWiycpX0CssI3r99J44TuhaJz2MSo/s1600/Player25.png) center no-repeat;max-width:435px;padding:55px;margin:0 auto 0px auto;text-align:center}
.display {position:relative;display:inline-block;background-color:transparent;width:180px;height:110px;padding:5px;color:#08b6ff;font-weight:700;font-size:10px;text-align:center;text-transform:uppercase;letter-spacing:0.5px;margin:auto;border:0px solid #303030;border-radius:1px;overflow:hidden;transition:all .3s;top:30px}
.play {position:relative;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgY0MsGK0BUDFIQ9JSvom-jcrsGtYMqF19-jCCG9x5D0b2Ri_9V9bzOzDkHp7Ow4OJe5GsLgi7vc2PUPT_MN5qDcBwmY2_4SzPgDH_FNf5AVhTYCQvIlcRjaFLCbZkWKYD3M7k3oMI0ROY/s1600/Play_5.png) center no-repeat;max-width:0px;padding:22px 22px;}
.pause {position:relative;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjQqK8TgVQvSSyjnZD-dTg3m10W3ZTYx5vIA1RKHfEYuSBSqBe7Q8tiTALtBrZp95nEX0GC8vHcnVUBMRN2Ej2kOD90ogWVGVDDqG2w1xxwubcXeuilbSh1e1ZCJjxm2Ivc31xtDEk8jo/s1600/Pause_5.png) center no-repeat;max-width:0px;padding:22px 22px;}
.download {position:relative;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUW6Ru7nwaf7WPNGvWGxOswd-Hkx62MBFJOYqOJzxpyJ5fllrnYtGUQQJogmODVsNJ2A_uvnNS7HSM6R4a812CHqpV9hlEiO1u19u4rfLRYshuWuPNz9H4NwIOigL-BXWOdArgcmOBoVg/s1600/Download_5.png) center no-repeat;max-width:0px;padding:22px 22px;}
.play:hover {position:relative;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6uelo2OlWUhflFJWEW5Ebhc8TxTVlR13GkU5yoOrBN7kfMl9r67B5bzIlsCXoDdzn3OPSF7WZ6dZZV0XdCMQ5bhb_1NQRoB1_ZvLcGglVeFLHhRjrnEBgEHNIxNtOWS1bybQ8zvCQlBA/s1600/Play_2.png) center no-repeat;max-width:0px;padding:22px 22px;}
.pause:hover {position:relative;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgF84u57e7LDUrsggc8m__wJLNUnplB7N9E29Bhl4gzwAmE4jZkdxpYSNV9ngPfCxYCJzEVp-jE3FIgI0dtzRZfA9I_Jjb7l3wv1GDBfbRuFDqrA6CUxAMNW5czp0e68hnVFIoJ9zTZPzY/s1600/Pause_2.png) center no-repeat;max-width:0px;padding:22px 22px;}
.download:hover {position:relative;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkVqGwQ3ZoZirrvCaQExDtzzDtej5HWtwvLUs3hmwjVDoC-IReh44caqYRCcukf-_DSo2t-xXerw3jYuNzBqwPw1F1-Ft8RJiuGXMzVfDE-mU61dCdZgfZpcoXZV9Kc2okAV6SIjQ5TD8/s1600/Download_2.png) center no-repeat;max-width:0px;padding:22px 22px;}
.box1 {display:inline-block;float:left;padding-left:55px;margin:7px auto 0px auto;text-align:center}
.box2 {display:inline-block;position:relative;padding:0;margin:0 auto 0px auto;text-align:center}
.box3 {display:inline-block;float:right;padding-right:55px;margin:7px auto 0px auto;text-align:center}
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="box1">
<alt="Play Audio" title="Play Audio"/><a class="play" button onclick="playAudio()"></a><br />
<alt="Pause Audio" title="Pause Audio"/><a class="pause" button onclick="pauseAudio()"></a>
</div>
<div class="box2">
<alt="Music Info" title="Music Info"/><a class="display">Judul : XXXXX<br />Artis : XXXXX<br />Album : XXXXX<br />Genre : XXXXX</a>
</div>
<div class="box3">
<alt="Download 1" title="Download 1"/><a class="download" href="XXX"></a><br />
<alt="Download 2" title="Download 2"/><a class="download" href="XXXX"></a>
</div>
</div>
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 menambah embed audio pada entri blog dengan kombinasi skin active speaker. Komen, saran, kritik dan masukan selalu saya tunggu karena takkan banyak yang bisa dilakukan kalau sedang dalam keadaan sendiri, terima kasih.
Show Parser Hide Parser