Dengarin musik sambil ngeblog enak banget coba lihat kalian postingan sebelelumya mengulas tentang tutorial Gampang Caranya Menyimpan File Musik Di Google Sites Dengan Smartphone Android
Selamat malam selamat wayah kieu broooo sementara ini dimalam sepi begini shannenpio akan memberikan cara sederhana membuat pemutar musik di blog AMP HTML dengan menggunakan file sites musik dari google sites kemarin hasil cloning dari blog tetangga lumayan dari pada bengong yang di simpan di google sites
Seperti yang sudah saya singgung kemarin dengan menyimpan file musik di google sites kita bisa gunakan untuk menerapkannya pemutar musik di blog dengan file hosting atau URL dari file musik google sites tersebut
Mungkin kalian pasti lebih pintar dan mengerti karena setiap kita ingin menambahkan sesutatu atau menyematan dari media apapun di blog kalin pasti membutuhkan hosting, baik itu hosting dari google sendiri atau dari hosting lainnya,sebagai contoh ketika ingin membuat atau menampilkan video youtube di blog maka kita harus mempunyai atau mengetahui URL video tersebut ini bisa URL video dari orang lain ataupun URL video dari channel youtube kita sendiri,dan untuk mendafatkan URL video dari channel kita maka kita harus terlebih dahulu mengupload file video nya ke channel youtube kita begitu pun dengan cara ini kita bisa membuat pemutar musik dengan menggunakan file atau URL dari google sites kita
Coba iseng-iseng untuk mempraktekannya sendiri untuk membuat pemutar musik di blog AMP HTML ini Gampang Caranya Memasang Pemutar Musik Di Blog AMP HTML
OK Kalau begitu jossss... ini langkah Langkahnya
Untuk langkah yang harus di sisipkan adalah kode
amp-audio
di bawah tag head
berikut ini<script async custom-element="amp-audio" src="https://cdn.ampproject.org/v0/amp-audio-0.1.js"></script>
Umpamanya nih kode script
amp-audio
tidak bisa di simpan di template anda bisa gunakan tag conditional khusus untuk URL tertentuBerikut ini contohnya
<b:if cond='data:blog.url in {"Disini URL halaman postingan"}'>
<script async='async' custom-element='amp-audio' src='https://cdn.ampproject.org/v0/amp-audio-0.1.js'/> </b:if>
Keterangan :
Silahkan anda ganti Disini URL halaman postingan dengan URL postingan anda yang mau di pasang musik nya atau di pasang audionya
Langkah kedua untuk menambah musik di blog gunakan kode script ini dalam mode HTML
<amp-audio width="auto" height="50" src="Disini URL file musik google sites"> <div fallback> <p>Your browser doesn’t support HTML5 audio</p> </div> </amp-audio>
Keterangan :
Silahkan anda ganti Disini URL file musik google sites dengan url file musik anda yang di simpan di google sites
Sebelumnya jika tidak tau cara menyimpan file musik di google sites silahkan baca dulu postingan berikut ini :
Cara Menyimpan File Musik Di Google Sites Dengan Smartphone Android
Untuk menggunakan atau menampilkan audio di blog AMP HTML anda juga bisa menambah atau menggunakan gambar,judul lagu atau pun artis anda bisa gunakan kode script berikut ini
<amp-audio src="https://sites.google.com/site/kilikitiknet/home/music-file/%5BShannenpio-Blogspot%5D%20-%20Goyang%20Nasi%20Padang.mp3" artwork="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjbAHGZsM5IpC0psxEIp1qA9sH_m2QExk7KGuklscssDa1kpPcZVRfywvL35tTRkPkcy7J4rrGi6l2M3rQvdma8TVBVmCVTD25evaH8_ZEFvqbgLLT2CBr3CVSxHeBYOSZDp3RAwEHW-I/s1600/logo-admin.jpg" title="goyang nasi padang by shannenpio" album="shannenpio blogspot file" artist="one ok rock" height="50" width="auto" controls> </amp-audio>
Atau juga jika ingin mempilkan musik dengan control atribut controlslist dari elemen HTML5 , misalnya anda menggukan dengan menonaktifkan tombol download
Gunakan scrpit di bawah ini.
<amp-audio width="auto" height="50" src="https://sites.google.com/site/kilikitiknet/home/music-file/%5BShannenpio-Blogspot%5D%20-%20Goyang%20Nasi%20Padang.mp3" controlsList="nodownload"> <div fallback> <p>Your browser doesn’t support HTML5 audio</p> </div> </amp-audio>
Dan contoh nya pemutar musik di blog AMP HTML seperti yang terlihat di bawah ini :
Nah berikut adalah cara memasang pemutar musik di blog AMP HTML
Semoga bermanfaat dan selamat mencobanya...