Membuat Chatango Valid AMP

Cara Membuat Chatango Valid AMP - Kali ini ane akan membagikan tutorial yang berhubungan dengan AMP (Accelerated Mobile Pages) merupakan Halaman web yang dirancang khusus agar dapat dimuat perangkat mobile dalam waktu yang sangat cepat dan hemat kuota internet, hal ini tentu merupakan sebuah kemajuan bagi sistem mobile web yang berdampak besar.


Membuat Chatango Valid AMP

Sebelum kamu menggunakan AMP (Accelerated Mobile Pages) pastikan HTML atau Link blog kamu harus HTTPS bukan lagi HTTP. Tutorial kali ane akan membagikan Cara Membuat Chatango Valid AMP.


Alasan kenapa chatango tidak valid AMP dikarenakan persyaratan atau peraturan khusus yang dibuat Amp agar tidak lagi menggunakan attribute javascript dan beberapa peraturan lainnya Seperti :

  • <style> diganti dengan <style amp-custom='amp-custom'>, dan tidak menggunakan !important
  • img diganti menggunakan amp-img
  • Tidak boleh ada CSS inline, contohnya seperti ini : <div style='clear:both;'></div>
  • Dalam 1 halaman harus menggunakan satu <style amp-custom='amp-custom'> [Tidak boleh lebih dari 1]

Ok sekian dulu penjelasan tentang AMP, kita lanjut ketutorialnya pertama-tama kamu harus cek di atas &lt;/head&gt;&lt;!--<head/>--&gt; ada Script amp-Iframe seperti dibawah ini

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

Cara Membuat Chatango Valid AMP

  1. Buat File HTML Chatango menggunakan html dibawah ini
  2. <html>
    <head>
    <title>Chat</title>
    </head>
    <body>
    <!-- Script Chatango -->
    </body>
    </html>

  3. Contohnya Seperti gambar berikut
  4. Cara Membuat Chatango Valid AMP

  5. Jika sudah Upload File tersebut ke Github & Staticaly
  6. Contoh jadinya seperti ini https://cdn.staticaly.com/gh/Arleth98/HTML/195d0749/chat-v2.html
  7. Gunakan html amp-iframe berikut untuk menampilkan chatango diblog agan
  8. <amp-iframe sandbox='allow-scripts allow-same-origin allow-modals allow-popups' frameborder='0' width='300' height='370' src='LINK GITHUB' scrolling='no'><amp-img width='300' height='370' layout='fill' placeholder='' src='LINK GAMBAR'></amp-img></amp-iframe>

  9. Jangan lupa diedit bagian yang sudah ane tandai.

TagKeterangan
width='300' Silahkan Sesuaikan lebarnya
height='370' Silahkan Sesuaikan tingginya
src='LINK GITHUB' Ganti LINK GITHUB, cek nomor 4
src='LINK GAMBAR' Ganti LINK GAMBAR sesuai Yang diinginkan [Contoh]

Pengaturan Chatango Atur default 100% baik Lebar, tinggi & jangan dibuat responsive, Contoh Seperti gambar berikut
CEK DISINI
Related Post
Comment Post