Embed Audio Blue X Duo Projie Frame Display Blogger Media Player

Blogger Media Player	Description
Name	Sky Blue Pad Frame Display
Type	Landscape Pad
Dimensi	350 x 170 px
Color	Sky Blue
Up Button	None
Right Button	Link 1, Link 2
Down Button	None
Left Button	Play, Pause
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/AVvXsEg13YCDQk1wBXQKsv3L7EfAi-jZXIwCsbonCqNwIQf2m_rDe3-iXkQe0-mFSPxD8412iQ1rIAgkyE254iI4kF0g0eCUF24nVmZeMefHIxSPFXVSrFjUz-06RK6sLaJppyg7IrciankBq_k/s1600/Player1.png) center no-repeat;max-width:430px;padding:55px;margin:0 auto 0px auto;text-align:center}

.display {position:relative;display:inline-block;background-color:transparent;width:200px;height:110px;padding:0px 8px;color:#00a8ec;font-weight:700;font-size:12px;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:10px}

.play {position:relative;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGI3za5CmtLJEpsoPlh8T1BB0bHxCPiVE8pn_FJIWBtD4fk1a7sFWmsZ_cafr3vuaCNk_MZz0EjogXZ06-kHO1uCcDK7tGDmwKz9Wc_D_aUk1wGakdeO3tb1dk9L5iafbE0COVDDhCwLw/s1600/Play_11.png) center no-repeat;max-width:0px;padding:22px 22px;bottom:8px}

.pause {position:relative;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_s6f9m-w5oyzo-8iWOATrcv86hN52QvVfyJit__huCk-g3XRZLSFCoS-vya9cfyVWIzxOX80CW7XMJHax5wwU_FK5KXwHqHePFBSC81v2PHuKTLhVswwhMjZq4nEfpNnX5FN0_w9_uGI/s1600/Pause_11.png) center no-repeat;max-width:0px;padding:22px 22px;top:14px}

.link1 {position:relative;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEig87AahjeyJEJ3AyWLQtMo60uTsf535xxbscA6xnI-yolDdMPb0xbzd4BN3wyrqNF2oX90Bu8RNREKf04xEzwS6OZaP1ne6nyIvBUD3LZPL4k1qVBYn4rrih73ZeHkjLTl-dYbRO81NUc/s1600/Download_11.png) center no-repeat;max-width:0px;padding:22px 22px;bottom:8px}

.link2 {position:relative;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEig87AahjeyJEJ3AyWLQtMo60uTsf535xxbscA6xnI-yolDdMPb0xbzd4BN3wyrqNF2oX90Bu8RNREKf04xEzwS6OZaP1ne6nyIvBUD3LZPL4k1qVBYn4rrih73ZeHkjLTl-dYbRO81NUc/s1600/Download_11.png) center no-repeat;max-width:0px;padding:22px 22px;top:14px}

.play:hover {position:relative;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFot5pg7K7Hq4DUgHi-HklbG5nub3ogN_FGotur7uDuQrMCvTLwthYLEI8eh-GsOsP4-uRO2LAWEHsWsx4GOYYQjseMYAkqyot4_c2U22y0VeVVZcJmk-GtX5CZ6T9b-MilOPSs5itSQc/s1600/Play_12.png) center no-repeat;max-width:0px;padding:22px 22px;bottom:8px}

.pause:hover {position:relative;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEOAnL2WQ7N9vTdIkWYHuqQsxk8Py3rdyMHCaxCpDVLyjhnlndW_PKj91ndVjxOpwjbfUQb4XSoCmYGZjEB6Thyphenhyphen7jnSXVirRn-qQrzw1c0BmR6Y67ArIPpTc0IQp_S6xneLQ-gsel5H7Y/s1600/Pause_12.png) center no-repeat;max-width:0px;padding:22px 22px;top:14px}

.link1:hover {position:relative;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEa6ghTAkjdjxSbdw0IgFduOQcbN1yecM3wfh5dgzqrx_aY9083wJDwLWx4MUC-mW8Ev8qlBn3Vk9Cn5c3cUVDb1rcXSXQ1JleYWFUZbq2aUDgk1TEXsEKhXoLlvktwyCNFo5x2jLA7p8/s1600/Download_12.png) center no-repeat;max-width:0px;padding:22px 22px;bottom:8px}

.link2:hover {position:relative;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEa6ghTAkjdjxSbdw0IgFduOQcbN1yecM3wfh5dgzqrx_aY9083wJDwLWx4MUC-mW8Ev8qlBn3Vk9Cn5c3cUVDb1rcXSXQ1JleYWFUZbq2aUDgk1TEXsEKhXoLlvktwyCNFo5x2jLA7p8/s1600/Download_12.png) center no-repeat;max-width:0px;padding:22px 22px;top:14px}

.box1 {display:inline-block;float:left;padding-left:55px;margin:0 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:0 auto 0px auto;text-align:center}

Sesuaikan nilai 55 dengan kondisi dan posisi posting.
Letakkan kode script 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>

Menambahkan class pada entri posting blog kita seperti contoh dibawah ini, dengan rincian sebagai 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="display">Judul : Rindu Kiyai<br />Vokal : Lisa Qomaria<br />Album : Skin Design<br />Genre : Pop Rebana</div>

<div class="box3">

<alt="Download 1" title="Download 1"/><a class="link1" href="XXX"></a><br />

<alt="Download 2" title="Download 2"/><a class="link2" href="XXXX"></a>

</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.