Cara Memasang Gambar Pada Blog AMP

Cara Memasang gambar di postingan Blog AMP - Cara Menampipkan gambar untuk Blog Accelerated Mobile Pages ini memang berbeda dengan blog non AMP.kalau memakai blog biasanya,kita tinggal upload foto,selesai.

Namun,tidak demikian halnya jika memakai blog custom halaman mobile yang dipercepat ini.

Kita harus mengubah kode HTML pada gambar sebelum di Publish,agar tidak terjadi error pada blog tersebut.

Selain itu,di blog Accelerated Mobile Page juga memiliki dua jenis gambar yang akan tampil.

Yakni gambar utama yang akan tampak di bagian atas postingan sekaligus sebagai thumbnail pada popular posts dan related posts.

Yang kedua, gambar tambahan atau pendukung yang biasanya di selipkan di dalam artikel.

Perbedaan tersebut tentu sedikit membingungkan bagi Anda yang baru mengenal blog yang memakai cutom AMP HTML.

Lalu bagaimana cara memasang Image pada postingan blog AMP saya.

Caranya gunakan kode berikut ini:

<amp-img src="URL GAMBAR"
width="300"
height="200"
layout="responsive"
tabindex="0"
alt="NAMA ALTERNATIVE GAMBAR"></amp-img>

Hasilnya seperti ini :


Kode di atas,adalah untuk gambar tambahan yang akan di letakkan di dalam artikel. Sementara untuk gambar utama yang tampil di atas artikel. Kodenya sama seperti blog biasa,namun harus di apit kode buka <noscript> dan kode tutup </noscript>

Contoh :

<noscript><img src="URL GAMBAR" alt="NAMA ALTERNATIVE GAMBAR"/></noscript>

Hasilnya akan tampak seperti gambar di atas artikel ini.

Sekarang praktekkan langkah-langkah meletakkan gambar pada postingan blog AMP di atas dan lihat sendiri hasilnya.