Memasukan Gambar, Video, Di Postingan Blog Valid AMP HTML

Seperti yang telah kita ketahui bahwa membuat artikel atau memasukan gambar dan video dalam postingan blog yang sudah valid AMP HTML itu tidak sembaranagn, tidak hanya sekedar upload gambar atau video lalu kita tidak memperhatikan kode yang tidak di perbolehkan dalam blog yang sudah Valid AMP HTML, yang akhirnya menyebabkan error dalam valid AMP.
Kode yang tidak boleh ada dalam postingan maupun dalam template yaitu, tidak boleh menggunakan kode
Baca juga Kompi Ajaib Template Gratis

<div style="text-align:justufy;">
atau kode
<div style="text-align:center;">
<img src="url gambar.png" alt="gambar"/>
</div>

Setelah situs atau blog kita sudah valid AMP HTML, Dan saat membuat postingan, kode di atas sudah tidak kita pakai lagi. yang kita pakai adalah aturan-aturan baru, agar blog atau situs kita tetap valid AMP HTML. Dibawah ini saya akan memberikan contoh untuk cara memasukan gambar atau video dalam postingan blog AMP HTML.

Yang pertama untuk cara membuat gambar postingan. Gambar postingan untuk Thumbnail, jika kita akan membuat gambar untuk thumbnail postingan kita gunakan kode <noscript> seperti dibawah ini. Ingat, ini hanya kusus untuk gambar thumbnail, gambar yang akan di tampilkan di homepage. Untuk lebar dan tinggi nya bisa anda sesuaikan sendiri.
<noscript>
<img src="url gambar.png"
width="750"
height="500"
layout="responsive"
alt="gambar"/>
</noscript>

Yang kedua memasukan gambar selain gambar thumbnail atau gambar yang akan di jadikan perlengkapan postingan. Untuk membuat gambar postingan gunakan amp-img Seperti di bawah ini. untuk lebar dan tingginya bisa anda sesuaikan sendiri.
<amp-img src="url gambar.png" 
width="500"
height="300"
layout="responsive"
alt="gambar">
</amp-img>

untuk memsukan gambar agar berada di sebelah kiri, tengah, atau kanan, gunakan kode. <div class="center"> kalo ingin gambar berada di sebelah kiri, Ganti tulisan center menjadi Left dan kalo ingin gambar di sebelah kanan, ganti tulisan center menjadi right

Setelah kita mengerti cara memasukan gambar di blog valid AMP HTML, sekarang kita akan memasukan video kedalam postingan blog. Untuk cara memasukan video dari youtube, pastikan template amp anda sudah tesimpan script amp-youtube, jika belum silahkan simpan dulu script di bawah ini pada tag <head>
Baca juga Cara Memasang Gambar Animasi Di Postingan Blog AMP HTML

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

jika sudah tersimpan, gunakan kode di bawah ini untuk memasukan video youtube dalam postingan blog amp anda.
<amp-youtube width="480" 
height="270"
layout=responsive data-videoid="XXXXXXXX"
</amp-youtube>

Ganti xxxx dengan ID video yuotube anda. maka hasilnya seperti di bawah ini.



kalo ingin video yang akan dimasukan dalam poatingan memutar secara otomatis, kita tinggal tambahkan tulisan autoplay. maka kode yang di gunakan seperti di bawah ini.
<amp-youtube width="480" 
height="270"
layout=responsive data-videoid="XXXXXXXX" autoplay>
</amp-youtube>

maka hasilnya seperti di bawah ini, dan memutar secara otomatis.



Demikian artikel tentang Memasukan Gambar Atau Video Di Postingan Blog Valid AMP HTML. Anda juga bisa membaca artikel lainya tentang AMP, yaitu Mengatur Gambar Postingan Blog AMP HTML Agar Lebih Rapih

Reaksi:
Share this with short URL:

You Might Also Like:

How to style text in Disqus comments:
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Hide Parser