Embed Audio Brown Rectangle Frame with Timeliner Teks Image Media Player

Blogger Media Player	Description
Name	Brown Rectangle Frame with Timeliner Teks Image
Type	Rectangle with Timeliner Teks Image
Dimensi	350 x 370 px
Color	Brown
Scroll Teks	Up
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 */

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

.text1 {position:relative;display:inline-block;background:#dcc6ac;height: 24px;width:275px;border:2px solid #724c21;border-radius:5px;overflow:hidden;font-size:16px;color:#724c21;letter-spacing:0.2em;}

.text2 {position:relative;display:inline-block;background:transparent;height: 24px;width:275px;border:px solid #ff0000;border-radius:5px;overflow:hidden;top:1px}

.timeline1 {position:relative;display:inline-block;background:#dcc6ac;height: 24px;width:275px;border:2px solid #724c21;border-radius:5px;overflow:hidden;}

.box31 {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 #724c21;border-radius:5px;overflow:hidden}

#progres {background-color:#ffff00;

filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#724c21',endColorstr='#724c21');

background-image:-webkit-linear-gradient(top,#724c21 0%,#ffff00 50%,#724c21 100%);

background-image:-moz-linear-gradient(top,#724c21 0%,#ffff00 50%,#724c21 100%);

background-image:-ms-linear-gradient(top,#724c21 0%,#ffff00 50%,#724c21 100%);

background-image:-o-linear-gradient(top,#724c21 0%,#ffff00 50%,#724c21 100%);

background-image:linear-gradient(top,#724c21 0%,#ffff00 50%,#724c21 100%); height: 24px; width: 0px}

#skin_play {position:relative;display:inline-block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNCyIu6O0n8eU3PTklIm6NIhYJSlU2B8i6yv6xNf8KcHrUXdi-vJcHoAUu1T5EitkaedmmtEDgnaVAA2_xYXPOLzUSIqyTqTw2olsDDwDzpWnrxyFoTM91R_b_elf2qFUGe7fMg4ZFrlI/s1600/ply9.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/AVvXsEiLETF5Sw1E6ldmaDHezJRnJCsWbf6-pRJdR1xl7Oy3qxGdcWYp4NVHYcPQFLp-k2ULzSMPt2VwMiXEJGD7WNuJxTkpX672CPvOAdbBaycJXjd_FtzsoBIISll5bapl-FqtOUBq-2Pcry4/s1600/pau9.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/AVvXsEgMIgiSwYn67h4Kv0Kdz0btkMsRKGPgCx7a0afXK4fBBLD0D4m2D8N70J0HlZjIHN6JGoVm-WJCrjIflD6iNQ3sNQMrEQNEPybJH4qey35HUuQ0i3hV_oFmnPTrkoc0MAJIKu4OqEcRh_U/s1600/stp9.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/AVvXsEiSw_Gs9DJe6Zm-aN0wc8b34QfgrUGektX1WdCkdyxGAmHfh69lUjbOKq09EleFBCdR3HbMDKsl1D2cwVB07LRH6GVrPLyBhqEAn0GuCf8-19u2g2WP4_oRq6K2I0B2QDBp12ZNM7CUukA/s1600/don9.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/AVvXsEiCKgS9Vj7RJiSCBnF2M2Z8UiQHLTUSRWGkqMBLWiZBUGd-bQ_BpGuFyiMQbOwTZCOSGtVHkRIb2w6ehSGaoWMU-_L_qHU9lchYXDB3nkw8IvUosS2HimJyL7EYgoYHSw4wsk5vStbxOdA/s1600/ply99.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/AVvXsEhAzbFaITsie4AD9wvRafUwir-8k8C_y6bDfdkfxDsreWXtiGDlX5k1g279eMjxzw7MQqGly5eHIJcj0j388_hpNc-_B1-6rrXirA_91hvpukS7VDB59dDPzOzZRXzGw45Lbn29f1ODd_s/s1600/pau99.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/AVvXsEjQ5s0AXYGvolvRdn92I46cn13bgCAFNzREAr_664EXCTrdPXo-_ntCc9jbAglsKzti_Ge96e8n9sU8DHamktGuXva_bNJgDhA1Y2-1yHJIqth4AQOago4PfKrtg3iT1NDA4xh35Q6MzWY/s1600/stp99.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/AVvXsEiqpPVjiqQxvQefdAVDT1_hbCjmKRc6Egx1uTHzCmEDbOEBDUD4JDqiiTz-XeuDWP9vIH2HH2dwl7DFZhf4rq_WcLaQSEd7v_q48wizzG-YuOvAHrXDxd-5fVWerPQavb8cVuhpnJbZI3M/s1600/don99.png) center no-repeat;max-width:0px;padding:18px 24px;}

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

<div class="text1"><div class="text2">

<marquee direction="left" scrollamount="2" align="center">INSERT TEKS LINK</marquee></div></div>

<a class="image1" href="INSERT IMAGE LINK" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="skin design" border="0" data-original-height="450" data-original-width="450" height="275" src="INSERT IMAGE LINK" title="skin design" width="275"></a>

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

<div class="timeline1">

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

<div class="box31">

<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 TEKS HERE dengan teks deskripsi file.
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.