Welcome to www.winkamaru.com

Cara Embed Audio Soundcloud di Blog AMP


Bagi pengguna blog AMP, terutama bagi teman-teman blogger yang hendak memposting embed audio atau musik yang diambil dari soundcloud pasti tahu bahwa memasang embed soundcloud di dalam postingan AMP harus dilakukan dengan cara khusus agar postingan blog bisa menjadi Valid terhadap penelusuran Google AMP.

Oleh karenanya, tulisan kali ini akan membahas tutorial atau cara memasang embed soundcloud di dalam postingan blog dan valid terhadap AMP.

Kita langsung saja pada tutorialnya. Ikuti ulasan di bawah:

Langkah 1
Jika di dalam template blog yang anda gunakan belum terpasang kode 'AMP-Soundcloud'. Silakan ambil kode di bawah ini dan tempatkan kode tersebut di atas kode </head> di dalam template blog AMP anda.

 <script async custom-element="amp-soundcloud" src="https://cdn.ampproject.org/v0/amp-soundcloud-0.1.js"></script>  

Langkah 2
Save template AMP Blog anda setelah memasukan kode di atas.

Sekarang setiap hendak memosting dan memasang Embed Soundcloud di AMP blog, harus dilakukan dengan cara berikut:

Langkah 3
Ambil kode Embed Soundcloud anda, seperti gambar berikut:


Maka anda akan mendapatkan kode seperti ini:

 <iframe width="100%" height="300" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/506822373&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"></iframe>  

Langkah 4
Selanjutnya silakan ambil kode tracks id dari embed soundcloud yang sudah di-copy, lalu letakan kode tracks id embed soundcloud ke dalam baris kode AMP HTML seperti di bawah ini:

 <amp-soundcloud height="300"  
   layout="fixed-height"  
   data-trackid="506822373"  
   data-visual="true"></amp-soundcloud>   

Silakan untuk mengganti kode track id "506822373" dengan track id pada embed soundcloud yang didapat.

  • Jadi, kita tidak menggunakan seluruh kode embed dari soundcloud melainkan hanya mengambil kode track id dari audio / musik di soundcloud.

Setelah menerapkan kode di atas, maka tampilan dari musik soundcloud dalam postingan blog AMP akan tampak seperti ini:


Langkah 5
Jika tampilan di atas masih kurang diminati, anda bisa menggunakan kode yang kedua untuk jenis tampilan yang berbeda.

 <amp-soundcloud height="167"    
   layout="fixed-height"    
   data-trackid="506822373">    
  </amp-soundcloud>  

Hasil penggunaan kode yang kedua, akan tampak seperti ini:


Jadi, silakan teman-teman memilih menggunakan kode pertama atau kedua. Untuk saya sendiri lebih menyarankan untuk menggunakan kode ke dua karena terlihat lebih nyaman dan bagus. Namun semuanya disesuaikan dengan selera kita masing-masing.

Demikian ulasan saya mengenai cara memasang embed soundcloud di postingan blog AMP, semoga berkesan dan bermanfaat...