Cara Menambahkan Gambar di Postingan Blog AMP

Sebenarnya menambahkan gambar di Blogger memang mudah, tinggal upload lalu pasang di blog maka gambar akan muncul. Kita juga harus mengatur tata letak dan ukurannya agar tampilan gambar menjadi bagus, rapih dan responsif.

Beda dengan Blog AMP, di blog Amp format kode gambar berbeda dengan blog non-Amp. Oleh karenanya jangan ada salah dalam kode gambar saat memposting. Jika ada salah di kode gambar maka akan menyebabkan error dan AMP tidak valid di postingan tersebut.

Kode gambar Non-AMP:

<img alt="Deskripsi"
src="Url Gambar.jpg"
height="180"
width="320 />

Kode di atas adalah kode menambahkan gambar untuk blog Non-AMP.

Cara Menambahkan Gambar di Postingan Blog AMP

1. Menambahkan Gambar Thumbnail di Blog AMP

Thumbnail adalah sebuah preview gambar yang dimana gambar tersebut mewakili dari beberapa isinya. Thumbnail akan muncul di halaman utama blog. Agar thumbnail muncul di postingan blog Amp maka gunakanlah kode di bawah ini, sebenarnya kode thumbnail ini sama dengan kode diatas, namun untuk thumbnail blog amp harus menggunakan kode pembuka <noscript> dan penutup </noscript>

Kode gambar Thumbnail:

<noscript>
<img alt="Deskripsi"
src="Url Gambar.jpg"
height="180"
width="320 />
</noscript>

2. Menambahkan Gambar Tambahan (Lainnya) di Blog AMP

Kode untuk gambar tambahan berbeda dengan kode yang diatas, berikut kodenya

Kode gambar tambahan

<amp-img alt="Deskripsi"
src="Url Gambar.jpg"
layout="responsive "
tabindex="0"
height="180"
width="320></amp-img>

Akhir Kata

Silahkan anda atur sendiri width (lebar) dan height (tingginya) sesuai selera anda.
Maaf jika ada salah kata2.
Semoga bermanfaat...

Berlangganan artikel terbaru dari blog ini langsung via email.