Memasukkan atau menyisipkan gambar di postingan amp blogger perlu memasukkan script tambahan agar gambar dapat muncul sempurna pada halaman blog.Bagi sobat yang menggunakan template amp pasti pernah mengalami kesalahan ketika menyisipkan gambar pada halaman blog. Hal ini dikarenakan sobat pubshisher menggunakan template AMP (Accelerated Mobile Pages)
Bagi sobat yang baru mencoba template AM ini tentunya akan merasa kebingungan karena tidak tersbiasa mengedit kode html pada halaman blog.
Beberapa orang bahkan tidak ingin repot menambahkan beberapa script tambahan untuk menyisipkan gambar pada blog. Sehingga menyerah dan berpindah ke template biasa.
Tentu jika menggunakan template biasa, sobat dapat dengan mudahnya mengupload, menyisipkan gambar pada blog, serta mengaur ukuran dengan mudah.
Namun akan sangat berbeda jika sobat menggunakan template amp. Maka perlu menambahkan beberapa kode script untuk menyisipkan gambar, mengatur ukuran agar sesuai.
Maka dari itu saya akan berbagi sedikit hal, yang berkaitan dengan pengaturan amp image di blogger.
Biasanya jika menggunakan template biasa kita hanya tinggal mengupload gambar dengan script html berikut
<img src="url foto" alt="blog betariko" style="width:304px;height:228px;">
Sebenarnya apa yang menjadi pembeda HTML AMP?
Hanya sedikit saja perbedaanya. Pada bagian tag nya saja. Script awalnya html biasanya menggunakan <img> bla..bla..bla </img>
Sedangkan untuk AMP
Ada tambahan <amp-img>bla..bla..bla..</amp-img>. Bisa dikatakan variasi html dan amp memiliki sedikit perbedaan saja. Namun untuk bagian tag "style" tidak dapat berfungsi untuk html amp jadi jangan di gunakan saat menyisipkan gambar pada halaman artikel.
Berikut ini cara Memasukkan gambar di postingan AMP Blogger
1. Setelah mengupload gambar pada halaman blogger, selanjutnya copy url gambar yang telah sobat upload. Atau soba dapat memasukkannya langsung ke halaman posting, kemudian klik tampilan post html. Bisa juga dengan cara klik open image in new ab, maka akan terbuka URL file image.
2. Setelah mendapatkan url pada gambar yang diinginkan, selanjutnya berikan tambahan script amp di bawah ini.
<amp-img src="Url gambar" alt="Nama gambar" height="480" width="750"></amp-img>
Kemudian ubah URL Gambar dan Nama Gambar diatas sesuai keinginan sobat.
3. Selain menggunakan script diatas, sobat juga dapat menggunakan script tambahan di bawah ini untuk mengatur ukuran dan posisi gambar.
Agar gambar AMP di posisi bawah judul
<noscript><img width="6500" height="610" alt='nama gambar' src='url gambaranda'/></noscript>
Agar gambar AMP di posisi rata kanan
<div class="img-width-300 img-right">
<div class="post-thumbnail">
<amp-img
alt="nama gambar"
title="judul gambar"
height="480"
layout="responsive"
src="url gambar"
width="720">
</amp-img>
</div></div>
Agar gambar AMP di posisi rata tengah
<div class="img-width-300 img-center">
<div class="post-thumbnail">
<amp-img
alt="nama gambar"
title="judul gambar"
height="480"
layout="responsive"
src="url gambar"
width="720">
</amp-img>
</div></div>
Agar gambar AMP di posisi rata kiri
<div class="img-width-300 img-left">
<div class="post-thumbnail">
<amp-img
alt="nama gambar"
title="judul gambar"
height="480"
layout="responsive"
src="url gambar"
width="720">
</amp-img>
</div></div>
Nah demikian cara memasukkan gambar atau menyisipkan gambar di postingan amp blogger. Silahkan langsung dipraktekan. Semoga sedikit sharing kali ini dapat memberikan manfaat.