Skip to main content

Setup Soundclond In AMP

Accelerated mobile page ( AMP ) adalah salah satu teknologi terbaru yang di miliki oleh raksasa internet Google dan akhir akhir ini lagi ramai-ramai nya khususnya para Blogger banyak yang beralih dari template HTML5 pindah ke template AMP HTML

Keuntungan menggukan template AMP HTML halaman tersebut bisa diakses lebih cepat di perangkat mobile atau smartphone

Tetapi agak sedikit sulit untuk membuat postingan seperti gambar, video, dan juga iframe karena sedikit berbeda dengan template HTML biasa di karenakan harus benar-benar valid Stuktur datanya biar halaman ini bisa di terima oleh google Amp dan mendapatkan logo petir di pencarian google search engine

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.

Demo

Untuk Embed/Pasang soundclond Di AMP Berikut Ini Caranya :


1. Simpan amp js

Langkah pertama 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 seperti di bawah ini

<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>

Keterangan :

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

2. Posting Kode Soundclond Di Postingan.

Selanjutnya untuk membuat postingan pastikan anda dalam mode HTML bukan di mode menulis

Berikut ini beberpa contoh yang bisa anda gunakan untuk embed Soundclond di blog yang sudah valid amp :


Classic Mode

Contoh kode untuk classic mode

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

Dalam classic mode bisa juga gunakan atribut warna costum. Tambahkan data-color.

Contoh :

<amp-soundcloud height="166" layout="fixed-height" data-trackid="311866048" data-color="448AFF"></amp-soundcloud>

VISUAL MODE

Sementara untuk mode visual tidak memungkinkan perubahan warna. Pastikan menggunakan tinggi yang sama seperti kode embed Soundcloud.

contoh kode visual mode

<amp-soundcloud height="450" layout="fixed-height" data-trackid="311866048" data-visual="true"></amp-soundcloud>

Keterangan :

Untuk mendapatkan 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

Contoh kode 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. Selamat mencoba dan semoga bermafaat.

Reaksi:

Berbagi Itu Peduli :

Comment Policy: Gunakanlah kontak komentar ini dengan bijak jangan buat link atau spam, Jika berkenan silahkan terlebih dahulu, Follow this blog

Selanjutnya tuliskan komentar anda sesuai dengan topik postingan ini.

Centang kotak Beritahu saya untuk mendapatkan notifikasi balasan via email.

Untuk komentar secara Private silahkan masuk ke Messaging Google