Cara Memasang Audio Player Responsif Postingan Blogger

Seperti yang Admin bahas sebelumnya pada  Tutorial Cara Mempublikasikan Vidio Responsif Auto Thumbbail Review bahwa tidak selamanya konten suatu blog itu berupa teks dan gambar serta vidio dokumentasi Tutorial atau hiburan terkadang koten blog yang dipublikasikan berupa Audio hasil rekaman seperti remakan ceramah/tausiyah agama atau bentuk audio lainnya. 

Pada postingan kali ini Admin akan berbagi Tutorial bagaimana cara memasang Audio Player Responsif  dengan Control pada postingan blogger. Admin katakan responsif karena size dari Audio player ini dapat menyesuikan secara otomatis dalam berbagai devices yang mengakses konten audi tersebut, baik itu pernagkat Dekstop dengan berbagai jenis browser serta Mobile Android. 

Untuk mempublikasikan konten berupa Audio, kalian dapat menggunakan source code HTML Audio Player Responsif with Control berikut ini. 

 
<div style="text-align: center;">
<br />
<br />
<img border="0" src="https://www.radiorodja.com/wp-content/uploads/2018/12/Dosa-Dosa-Besar-Yang-Dianggap-Biasa-Ustadz-Ahmad-Zainuddin-600x400.jpg" /></div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">

Dosa Besar Yang Dianggap Biasa adalah ceramah agama dan kajian Islam ilmiah yang disampaikan oleh Ustadz Ahmad Zainuddin, Lc. langsung dari lapangan bola desa Lompio, belakang kantor desa Lompio, kec. Sirenja, kab. Donggala pada hari Kamis, 21 Robiul Awwal 1440 H / 29 November 2018 M.
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" type="text/javascript"></script>

<link href="https://cdn.plyr.io/3.5.2/plyr.css" rel="stylesheet"></link>
<script src="https://cdn.plyr.io/3.5.2/plyr.polyfilled.js"></script>

<audio controls="" id="player">
<source src="https://mp3.radiorodja.com/Ustadz%20Ahmad%20Zainuddin/Tematik/20181129%20Ustadz%20Ahmad%20Zainuddin%20-%20Dosa%20Besar%20Yang%20Dianggap%20Biasa.mp3" type="audio/mp3"></source>
</audio>

<script>
var player = new Plyr('#player');
</script>

<br />
<div>
</div>




Pertama-tama buatlah Entri Baru pada menu Postingan, kemudian buat sedikit Mukodimah agar postingan tidak terkesan terlalu pendek. Kemudian Salin kode HTML di atas, pastekan pada lokasi penempatan lembar Entri baru dalam mode HTML. Ingat ya dalam mode HTML jangan Compose, karena jika dalam mode Compose Source kode HTML Audio ini tidak akan bekerja setelah dipublikasikan. 



Dosa Besar Yang Dianggap Biasa adalah ceramah agama dan kajian Islam ilmiah yang disampaikan oleh Ustadz Ahmad Zainuddin, Lc. langsung dari lapangan bola desa Lompio, belakang kantor desa Lompio, kec. Sirenja, kab. Donggala pada hari Kamis, 21 Robiul Awwal 1440 H / 29 November 2018 M.

Perhatikan Screenshot Entri Konten berikut ini: 



Kode HTML: <img border="0" src="https://www.radiorodja.com/wp-content/uploads/2018/12/Dosa-Dosa-Besar-Yang-Dianggap-Biasa-Ustadz-Ahmad-Zainuddin-600x400.jpg" adalah Gambar Preview Postingan. Jadi disini kita hanya memanggil gambar untuk ditampilkan melalui link tanpa harus mengupload gambar pada postingan. 

Kode HTML: <div style="text-align: center;"> Dosa Besar Yang Dianggap Biasa adalah ceramah agama dan kajian Islam ilmiah yang  disampaikan oleh Ustadz Ahmad Zainuddin, Lc. langsung dari lapangan bola desa Lompio, belakang kantor desa Lompio, kec. Sirenja, kab. Donggala pada hari Kamis, 21 Robiul Awwal 1440 H / 29 November 2018 M. </div> adalah Dekripsi dari Konten. Jika kalian sudah menjabarkannya pada mukodimah sebelumnya, maka bagian ini bisa diisi dengan kata-kata penutup. 

Kode HTML :  <source src="https://mp3.radiorodja.com/Ustadz%20Ahmad%20Zainuddin/Tematik/20181129%20Ustadz%20Ahmad%20Zainuddin%20-%20Dosa%20Besar%20Yang%20Dianggap%20Biasa.mp3" adalah Link Source Audio yang akan dipublikasikan. Dengan kata lain kita tidak perlu mengupload file Audio pada Postingan akan tetapi dapat mengambil link source audio yang sebelumnya sudah diupload pada situs lain seperti Google Drive atau Sound Could.

Setelah selesai memasukkan link Gambar sebagai Preview, memberikan deskripsi cuplikan dari file audio serta memasukkan link source audio, langkah selanjutnya adalah melengkapi setelan entri seperti biasanya seperti Label, Setting Link Tautan Permanen, Deksripsi Penelusuran baru dipublikasikan dan lihat hasilnya. 

Jika kalian penasaran dengan tampilan Audio Player Responsif With Control pada Postingan Blogger kalian dapat mengunjung salah satu Situs Admin tempat berbagi Tausiyah Islami disini : RUMAH TAUSIYAH di dalamnya terdapat postingan berupa Audio dan Vidio dari Youtube. 

Demikianlah Tutorial Cara Memasang Audio Player Responsif pada Postingan Blogger, semoga bermanfaat jangan lupa bantu suport dengan share blog Tutorial Online ke teman-teman kalian. Sampai Jumpa di Tutorial Selanjutnya.
want to subscribe to the Latest Post Update Notifications? Please Follow Blogger Knowledge On Google News. Yuk...Subscribe Channel Youtube Berbagi Tutorial Online for those of you who like tutorials in the form of video recordings.