Setup Soundclond In AMP


BLOG MOBILE.




     Accelerated mobile page akhir akhir ini lagi ramai ramai nya,banyak orang beralih dari template HTML5 pindah ke template AMP HTML.
Keuntungan menggukan template AMP HTML halaman tersebut bisa diakses lebih cepat di perangkat mobile.
Tetapi agak sedikit sulit untuk membuat postingan seperti gambar,video,dan juga iframe karna sedikit berbeda dengan template HTML biasa di karnakan harus benar benar valid Stuktur datanya biar halaman ini bisa di terima oleh google Amp dan mendafatkan logo petir di pencarian google search.

Pada kesempatan kali ini saya akan memberikan tutorial sederhana cara embed soundclond di template yang sudah valid AMP. Denga begitu anda bisa mendengarkan musik kesayangan anda di blog AMP dan ini juga bisa di pasang di widget blog atau di halaman postingan.

UNTUK EMBED/PASANG SOUNDCLOND DI AMP BERIKUT INI CARANYA.




LANGKAH PERTAMANA.
sisipkan dulu AMP JS  di tag</head> berikut ini.
<script async custom-element="amp-soundcloud" src="https://cdn.ampproject.org/v0/amp-soundcloud-0.1.js"></script>
lalu simpan templatenya.

Jika template tidak bisa di simpan.
Gunakan tag conditional khusus untuk URL tertentu berikut ini contohnya
.
<b:if cond='data:blog.url in {&quot;URL HALAMAN EMBED SOUNDCLOND DI SINI&quot;}'>
<script async='async' custom-element='amp-soundcloud' src='https://cdn.ampproject.org/v0/amp-soundcloud-0.1.js'/>
</b:if>

Ganti URL postingan yang suduh di highlight di atas dengan postingan yang ada embed/di pasang soundclond nya

LANGKAH KEDUA.
untuk membuat postingan pastikan anda dalam mode HTML.

CLASSIC MODE


EXAMPLE
<amp-soundcloud height="166" layout="fixed-height" data-trackid="303024120"></amp-soundcloud>
HASILNYA

Dalam classic mode bisa juga gunakan atribut warna costum. Tambahkan data-color.
EXAMPLE
<amp-soundcloud height="166" layout="fixed-height" data-trackid="311866048" data-color="448AFF"></amp-soundcloud>

HASILNYA


VISUAL MODE


Mode visual tidak memungkinkan perubahan warna. Pastikan menggunakan tinggi yang sama seperti kode embed Soundcloud.
EXAMPLE.
hamp-soundcloud height="450" layout="fixed-height" data-trackid="311866048" data-visual="true"></amp-soundcloud>
HASILNYA.


KETERANGAN.
Untuk mendafatkan kode user/track di atas yang ditadai warna kuning.

  • Kunjungi situs soundclond http://soundclond.com
  • Pilih lagu yang kalian suka lalu klik.
  • Lalu liat di tab ada tombol share,langsung saja klik SHARE
  • Pilih EMBED
  • SELESAI hehe.
CONTOH CODE EMBED SOUNDCLOND

<iframe width="100%" height="450" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/311866048&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false&amp;visual=true"></iframe>
Dari contoh embed soundclond di atas anda cukup ambil kode nya saja liat kode yang di highlight di atas.

Demikian tutorial sederhana cara embed soundclond atau pasang soundclond di blog AMP
Semoga bermafaat

blog views
Reactions:
Donate via PayPal

You Might Also Like:

ADD A COMMENT WITH YOUR FACEBOOK PLEASE WAIT FOR FACEBOOK COMMENT WILL SOON OPEN

ADD A COMMENT WITH DISQUS HIDE COMMENT

Disqus Comments

ADD A COMMENT WITH GOOGLE PLUS HIDE COMMENT

google Comments

Hello, how may we help you? Just send us a message now to get assistance.

Facebook Messenger ×