Embed Audio Yellow Rectangle Frame with Timeliner Blogger Media Player

Blogger Media Player	Description
Name	Yellow Rectangle Frame with Timeliner
Type	Rectangle with Timeliner
Dimensi	350 x 16 px
Color	Yellow, Black
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/muppbhe2vh9b8a1/Rinza%20Band.apk?dl=0
• Menjadi
• https://dl.dropbox.com/s/muppbhe2vh9b8a1/Rinza%20Band.apk?dl=2

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: 16px;width:275px;border:2px solid #ffff00;border-radius:0px;overflow:hidden;}

#progres {background:#ffffd5; height: 16px; width: 0px}

#skin_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;}

#skin_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;}

#skin_stop {position:relative;display:inline-block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeU0cwfsRV5wZfJ0HICBwyG1NL96dpdMT5zM40UNOa3ZDqjSezj3RnPJtnR1XCv-ftZNXjkKWcL3iw5azqNPt8lptqIBHtBwRalVb2UkWEoG7-JFwcMGad1jI1L9epwsL2oHX-zt2UEY8/s1600/stop1.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/AVvXsEgkHpaDU_ug68JGXNNhEZ6Mi4I34maSUdUsZ2cAc-tP8CxQQGEnVQAwxubCCsJxng3qXaLzGrv202tVKaKrlUp7nL-WAvN6BlXIbV4RXBO8nR8czs20vOQREE-FdZWmRbc4ko3BkYBiDIg/s1600/link1.png) center no-repeat;max-width:0px;padding:18px 24px;}

#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;}

#skin_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;}

#skin_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;}

#skin_stop:hover {position:relative;display:inline-block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjulTfRECMi5_jD5TEYMToipJW3OQbmSD5pXvL0JNIOxjydhozsHdfGrP11lLEeipNuGZ9Daahc7jClXjcozNWjYWp3z6qmR8PvFWRzDbYl-HaaFHfjA50r23dNeOAtmmD7k90HhmDbaDM/s1600/stop4.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/AVvXsEjRRfzXPyVrQwTKQPzhcIl-vEiLdetbtVJy3PbKlysY84XECv-Y6g1QJhLmWm0MiCKa-aEumko-Idsz0ckl_OyDK0cVitDYxQfAL_oqwlGbktqQVD1r66aaUQ4EXK3RoAfcxHHbqYmCdgI/s1600/link4.png) center no-repeat;max-width:0px;padding:18px 24px;}

#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;}

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

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">

<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="link2" 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.

Result

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