Membuat Chatango Valid AMP

 

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>

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

  3. Jika sudah Upload File tersebut ke Github & Staticaly
  4. Contoh jadinya seperti ini https://cdn.staticaly.com/gh/Arleth98/HTML/195d0749/chat-v2.html
  5. Gunakan html amp-iframe berikut untuk menampilkan chatango diblog agan
    6. <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>

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

Comments

Post a Comment

Popular posts from this blog

Cara Membuat Safelink Di Blogger [Video]

Image
  Cara Membuat Safelink Di Blogger [Video] Cara Membuat Safelink Di Blogger [Video]  - Tutorial Cara Membuat Safelink blogger ini saya sudah menyiapkan video bagi yang kurang mengerti jadi silahkan didownload juga. Tutorial sebelumnya saya sudah membagikan Template gratis yaitu  Edna Template Blogger v2  dan tutorial  Cara membuat tombol back to top dengan gambar , untuk hari ini saya akan membagikan tutorial yang sedikit berbeda dari sebelumnya, ok kita mulai saja tutorial kali ini. Cara Membuat Safelink Di Blogger Buka Blogger > Buat Blog Baru Untuk Safelink Jika Sudah, Buat  Halaman  diblog baru tersebut Kemudian Tambahkan Script berikut kedalam page tersebut & beri judul  GO <script src=" LINK-JAVASCRIPT " type="text/javascript"></script> Kemudian buka Notepad, lalu simpan menjadi javascript berikut kebentuk file  Safelink.Js , Dan jangan lupa ganti  http://link-tujuan.blogspot.com/p/go.html  dengan Url Blog s...
Read more

Popular Post Samehada untuk Blogger

Image
  Popular Post Samehada untuk Blogger Tutorial kali ini yaitu Cara membuat Popular Post seperti Samehada untuk Blogger, diartikel ini saya akan membagikannya dengan singkat dan jelas, dan sangat mudah dipahami untuk pemula sekalipun. Untuk pratinjau atau preview tampilannya kalian bisa dipostingan sebelumnya yaitu  Bt-Samehada Clone 2020 Template Blogger . Popular Post Samehada untuk Blogger Pertama Buka Blogger > Tata letak > Add Widget Popular Post  (Jika sudah ada tidak perlu). Kemudian, Buka Tema > Edit HTML Simpan CSS berikut kedalam  <style> ... </style>  atau  <b:skin> ... </b:skin> /* Popular post blogger new style - arlethdesign */ #PopularPosts1 .widget-content.popular-posts{margin:auto} #PopularPosts1 ul li:nth-child(1n+2) .item-meta{font-size:11px;padding:6px 0 0;opacity:.7} #PopularPosts1 ul{padding:0;list-style:none;margin:auto;overflow:hidden} #PopularPosts1 ul li{margin:auto;padding:10px 0} #PopularPosts1 ul ...
Read more