Embed Audio Dark Orange Rectangle Frame with Timeliner Radius Image Media Player

Media Player	Description
Name	Dark Orange Rectangle Frame with Timeliner Radius Image
Type	Rectangle with Timeliner Radius Image
Dimensi	350 x 360 px
Color	Dark Orange
Up Button	None
Right Button	None
Down Button	Play, Pause, Stop, Link 1, Link 2
Left Button	None
Display	Center

Proses tahapan yang harus dilakukan dengan cara:
Mengupload file mp3 kita pada dua media penyimpanan online atau online storage, misal:

• Google Drive.
• DropBox.

Membuat link download untuk file mp3 yang ingin kita bagi pada entri posting blog kita, caranya:

• Untuk Google Drive, Contoh:

• https://drive.google.com/open?id=1Gv3EgsKKNoiJhAoZFwEJOQJ2K8-YigqI
• Menjadi
• https://drive.google.com/uc?export=download&id=1Gv3EgsKKNoiJhAoZFwEJOQJ2K8-YigqI

• Untuk DroopBox, Contoh:

• https://www.dropbox.com/s/dexywtro042ia32/Sirine%20Berbuka.mp3?dl=0
• Menjadi
• https://dl.dropbox.com/s/dexywtro042ia32/Sirine%20Berbuka.mp3?dl=1

Menambahkan kode html dibawah ini pada kerangka atau template blog kita, caranya:
Letakkan kode dibawah ini tepat diatas kode @media screen and pertama.

/* Audio Responsive */

.skin {display:block;background-color:transparent;max-width:350px;padding:0 auto 0px auto;margin:0 auto 0px auto;text-align:center}

.timeline {position:relative;display:inline-block;background:transparent;height: 24px;width:275px;border:2px solid #e8641b;border-radius:5px;overflow:hidden;}

#progres {background:#f4c3a8; height: 24px; width: 0px}

#skin_play {position:relative;display:inline-block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiW0e9YBUsoW6SzP-n2feT0YIn86uPWkMIocfBeu4St6PsL2SXu6oX-9i88Opy1i_mkSOSTLgEa84mvWKwgUgNaGb1b5oV-8vx_1hbG48VdlZMkjp-j99GJELoBjnEewIwSesVPGsxK7O0/s1600/ply7.png) center no-repeat;max-width:0px;padding:18px 24px;}

#skin_pause {position:relative;display:inline-block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhD1YeA0TXTIh7tnG-5P1bihQ0A8wz3TWk_meET79mZuxxxRUPOQ8wmG-AjyFcTNp6zSQ61lJHP31OaS-lg6Ix16xBfaluYktX3vg_0VUMvFV2156767E4_mL4zDPd34Gi3Y3PqBE94kto/s1600/pau7.png) center no-repeat;max-width:0px;padding:18px 24px;}

#skin_stop {position:relative;display:inline-block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWdHAIMmze47u23_kV24OYqFLXoBJ-_Gan2jNPvNdz47hwd2xYcDCIpCGJywF2wMXjEy0K3xWd-7IeTV5dm0ZRvhFHe8Vq5i229OdfZh3ijn4kXZPDurv6WNO_w9aCg7IfLjn5Q7UxV7E/s1600/stp7.png) center no-repeat;max-width:0px;padding:18px 24px;}

#link1 {position:relative;display:inline-block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxcHDRoYt2mseG-kIuciJbyaPSGeIkNaJitMln0YU8Z_f2jAs_Hhfp0M6Y_84mSEMkyoz3zhQXCgzNu5J-YSAyjP3qg4UhNVF9fOSX2oXBzHJfjmSpv1L8ZrGclc2yfV2LTzxJYmO8OBk/s1600/don7.png) center no-repeat;max-width:0px;padding:18px 24px;}

#skin_play:hover {position:relative;display:inline-block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHWDAZcOTZtFqeF3o0Ft7KPj4U8Qomb-fzwPeOG6vKQ1AKrc3lC3Dl-p1spM7R7CCYngxgG3N7h2Fl_ywscilAIibXECfJSaN6gT6xAtAYiYO5sd_bghRQmOTJuefmHIocZZ2bmYhsPbQ/s1600/ply77.png) center no-repeat;max-width:0px;padding:18px 24px;}

#skin_pause:hover {position:relative;display:inline-block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVhyBAeO83rjSk2qm9tKW2M6osadgD9gx7eY-db0_Lld0JLmYqeyl87KprzSkOSurS6sV6DOzFKKp21jhqMTbOtmEzv-NOsSmo4W-0VeBh6xwsQuJgeHbXn7NILC50CaUAuq69pOpPQvU/s1600/pau77.png) center no-repeat;max-width:0px;padding:18px 24px;}

#skin_stop:hover {position:relative;display:inline-block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUjYZKWCfAGY7gqpk9FvcdCP7Q1Fk2uIR_zyHlxkGIi_FGmbQ328zW4JKRvMNkEHWYqK_FPgWYTLfFQMOWNA0g0tYLykFvs-WY905GV6rHgk-RuAV2aYCG-snVTJWRtPrg3RGzWuQAx-Y/s1600/stp77.png) center no-repeat;max-width:0px;padding:18px 24px;}

#link1:hover {position:relative;display:inline-block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQSPNHrMDhNjdUUNH7ZiAaaKGHh9z-gCDlr1Y_CZX9OxPLDZAzHlH2y8Dd017Zy3tt2tQ5D6qvJQFJZwd3Fzi4d-xUxxZwr1yIsx0PiRWNcQch_C5fKu8yIQdw2TXguIK1pcnzh8niBls/s1600/don77.png) center no-repeat;max-width:0px;padding:18px 24px;}

.box3 {display:inline-block;position:relative;padding:0;margin:0 auto 0px auto;text-align:center;bottom:38px}

.image1 {position:relative;display:inline-block;background-color:transparent;width:275px;height:275px;border:2px solid #e8641b;border-radius:5px;overflow:hidden}

Letakkan kode script dibawah ini tepat diatas kode  </footer>.

<script src='https://cdn.rawgit.com/arfin-hakim/js/a91c5d49/skinplayer.js' type='text/javascript'/>

Menambahkan class pada entri posting blog kita seperti contoh dibawah ini, dengan rincian sebagai berikut:

<div class="skin">

<a class="image1" href="INSERT IMAGE LINK" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Get More Sample Design and Tutorial SEO Website" border="0" data-original-height="450" data-original-width="450" height="348" src="INSERT IMAGE LINK" title="Get More Sample Design and Tutorial SEO Website" width="348"></a>

<audio id="skindezign" src="XX"></audio>

<div class="timeline">

<div id="progres"></div></div>

<div class="box3">

<alt="Play" title="Play"/><a id="skin_play" onclick="play()"></a>

<alt="Pause" title="Pause"/><a id="skin_pause" onclick="pause()"></a>

<alt="Stop" title="Stop"/><a id="skin_stop" onclick="stop()"></a>

<alt="Link 1" title="Link 1"/><a id="link1" href="XXX"></a>

<alt="Link 2" title="Link 2"/><a id="link1" href="XXXX"></a>

</alt></alt></alt></alt></div>

</div>

Ganti teks INSERT IMAGE LINK diatas dengan link image yang mau dimasukkan pada player.
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.

Result

Demikian tutorial yang bisa kami sampaikan, jika kurang dipahami silahkan tinggalkan pesan.