Skip to main content

Memasukan Gambar, Video, Di Postingan Blog Valid AMP HTML

Ini adalah artikel pertama yang saya tulis di blog ini, disini saya akan mencoba posting dengan judul cara 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 akan menyebabkan error dalam valid AMP. Kode yang tidak boleh ada dalam postingan maupun dalam template yaitu, tidak boleh menggunakan kode
<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 gunakan lagi. yang kita gunakan adalah aturan-aturan baru agar situs atau blog kita tetap valid AMP HTML. Dibawah ini saya akan memberikan contoh untuk cara Memasukan Gambar atau Video dalam Postingan Blog AMP HTML.
Baca juga Modifikasi Tampilan Youtube Pada Blog AMP Dengan Tampilan Smartphone Frame

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. Perlu di 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 mengatur gambar agar berada di sebelah kiri, tengah, atau kanan, gunakan kode. <div class="center"> Jika ingin gambar berada di sebelah kiri, Ganti tulisan center menjadi Left dan kalo ingin gambar di sebelah kanan, ganti tulisan center menjadi right, atau bisa Anda baca artikel saya yang berjudul Cara Agar Postingan Gambar Lebih Rapih Pada Blog AMP HTML.

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 terlebih dahulu script di bawah ini pada tag <head>
<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.



jika 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. Semoga bermanfaat.


You Might Also Like:

Oldest PostOldest Post
Buka Komentar