Embed Audio Pink X Projie Frame with Timeliner Display Blogger Media Player

Blogger Media Player	Description
Name	Pink X Projie Frame with Timeliner Display
Type	X Duo Projie with Timeliner Display
Dimensi	350 x 170 px
Color	Pink, 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/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:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYTPdPJshz80K8w9KtGFUqTf_odtY5527fJMNTIR9RY-w21-87V_KDS5FRzgcZrOD0Juu6fSYyv-W1Hq3CRUZ0cOQz-l-mxdzT9yL-A_cDDv49tbh8zbrKX9rjKk3bHx-hBTKZGOcd5y8/s1600/Player65.png) center no-repeat;max-width:350px;padding:10px;margin:0 auto 0px auto;text-align:center}

.display {position:relative;display:inline-block;background-color:transparent;width:320px;height:80px;padding:0;color:#ff00ff;font-weight:700;font-size:10px;text-align:center;text-transform:uppercase;letter-spacing:0.5px;margin:0 auto 0px auto;border:0px solid #fff;border-radius:1px;overflow:hidden;transition:all .3s;top:12px}

.timeline {position:relative;display:inline-block;background:transparent;height: 8px;width:275px;border:1px solid #ff00ff;border-radius:9px;overflow:hidden;top:30px}

#progres {background:#ff00ff; height: 8px; 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/AVvXsEh1M3EIxdN6ZadCC7YqPzKMINDe6b7TJZzQTm9SvJH-ha-yPrblxOtGSMwQ-nYTWg3XyFs1Sa5B2VomynY91S02-3sk9hXgP7geP3_Zv22Bp2oLrKk-SYsjJeXqg0Fj-Vo5NDuNod44fnc/s1600/Play6.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/AVvXsEgQO1Dq7mH1C3kdlxQnVwcod0LRryHkodE1Njh_DYqDiQC7uz4jnmqlGjJe-jIOW9mEWD-dlak2cfFYfdKwi2wpnCI2AL-ZiKqOAiR40YJKBR-hINNGlr6nDaQlEiZDqYIMnkyKXQmGJ_U/s1600/Pause6.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/AVvXsEgb_VPLM_nHcFXe1d0XGHlFB-f2f_loNIoIG8GP3CIV4R4eLU8U90gz1jqawIWTzRGQxmuOIEUX7zk4wou7fiTzHezQJG8J2-mYYi6JnoLZZg58Kc0riai4381UYVBkeHXri7mA5NGGg-g/s1600/stop6.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/AVvXsEgP4Ns-EPidMnbIObJ990HRK431pWO-iX7u5QzW-MzThtV7uA5tLqhXAMcKQm6qT_RDZj8AZYHMuJhpOo5voLpB2yNCSyGDScdc_Jh_RpV30nF3eHbExIrkY5rH5h_uiP5V3XEzjviMy_I/s1600/link6.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/AVvXsEi0vWfJkuy2RCayJfdOZjp9VfaAnc1sMigy0Yuoi6vHFV3B-zKZpJEEU3Z3rVmaprXFhFkFxm3-wywYSiWeS0QDAhqDe-Rou3QssaRv8KVCpfg-x8WqQrLeQwypseaTGbf4gsXwteRDiIM/s1600/link26.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;top:3px}

Sesuaikan nilai 3 dengan kondisi dan posisi posting.
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="display">

[ Judul : Rindu Kiyai ] [ Artis : Lisa Qomaria ]<br />

[ Album : Nurul Jadid Bali ] [ Genre : Pop Rebana ]</div>

<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 teks - Judul - Vokal - Album - Genre - sesuai dengan deskripsi file mp3 yang kita bagi atau share.
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.