AMP Blogger Trik Tutorial

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.

Setelah situs atau blog kita sudah valid AMP HTML, 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.

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. Jika ingin video yang akan dimasukan dalam postingan 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 akan memutar secara otomatis. Demikian artikel tentang Memasukan Gambar Atau Video Di Postingan Blog Valid AMP HTML. Semoga bermanfaat.

Diposkan oleh: Warim Pada:

Berlangganan Lewat Email

Kirim alamat email Anda untuk mendapatkan notifikasi artikel terbaru dari blog Website Mini secara GRATIS langsung di kotak masuk Anda.