Cara Memunculkan/Menampilkan Thumbnail Gambar Pada Valid AMP HTML

Oleh karenanya jangan pernah salah dalam memasang kode image saat memposting. Salah dalam menggunakan kode image menyebabkan eror dan tidak valid AMP.

Contoh Untuk kode dasar asli yang diunggah blogger pada umumnya saat pertama kali adalah seperti ini:

<a href="url-gambar.jpg" imageanchor="1" ><img border="0" src="url-gambar.jpg" width="320" height="320" data-original-width="480" data-original-height="480" /></a>

Dan kode Diatas tidak Valid AMP HTML Dan jika tidak valid AMP,maka otomatis artikel yang diposting pun tidak akan ada logo AMP saat dipencarian google.

Dan kode dasar image Yang valid AMP adalah seperti dibawah ini yang nantinya menggantikan kode dasar yang asli dari blogger saat pertama diunggah.

<img alt='gambar' src='url-image'/>Perlu diketahui juga postingan gambar itu terbagi menjadi dua jenis, yaitu gambar yang nantinya digunakan untuk thumbnail (Gambar Utama) dan gambar tambahan atau selain thumbnail (gambar pelangkap artikel) Kedua jenis gambar di atas berbeda kodenya dalam template berbasiskan AMP. Oleh karenanya, anda harus memperhatikan dengan saksama dan juga teliti.

1. Gambar Thumbnail (Gambar Utama)

Gambar thumbnail adalah gambar yang muncul pada thumbnail. Gambar ini biasanya berada paling depan/atas. Gambar ini akan muncul di halaman utama/homepage. Untuk memunculkan thumbnail pada template berbasiskan AMP, maka gunakanlah kode berikut ini di mode HTML postingan, bukan compose saat menulis artikel:

			<noscript><img width="1080" height="610" alt='dulbjn orang bojonegoro' src='url-gambar.jpg'/></noscript>
		

Untuk Demonya jadinya, anda bisa lihat gambar Di atas Dan melihat di halaman Homepage.

2. Gambar selain Thumbnail (Gambar Pelengkap) Valid AMP

Gambar selain thumbnail adalah gambar tambahan/pelengkap artikel. Gambar ini hanya untuk tambah pelengkap artikel agar seorang lebih mudah memahami isi dari konten anda, tidak muncul di halaman utama/homepage. Untuk kodenya adalah sebagai berikut: [tulis di Mode HTML Postingan, bukan compose]:

<amp-img src="url-image-disini"

width="450"

height="250"

layout="responsive"

alt="dulbjn wong bojonegoro

Silahkan anda atur sendiri ukuran heightnya sesuai selera, baik pada gambar thumbnail ataupun selain thumbnail.Namun Untuk tampilan gambar selain thumnail (Gambar pelengkap) mungkin untuk lebar widhtnya tidak bisa di atur karena layout menggunakan Responsif,

Untuk Contoh gambar jadinya jika menggunakan kode diatas seperti dibawah ini.

Tambahan :

Jika ingin menggunakan ukuran with tertentu anda bisa menggunakan kode css dan kode pemanggil di mode HTML Postingan. Adapun caranya sebagai berikut:

Silahkan anda copy kode css dibawah ini dan taruh di <style amp-custom='amp-custom'> untuk tampilan mobile maupun desktop:

.bjn-img h6{font-size:0px;font-weight:01;color:#555;text-align:center;margin:0 auto 5px;display:block}

Dan Untuk kode pemanggilnya adalah sebagai berikut: [tulis di Mode HTML Postingan, bukan compose]:

<div class='bjn-img'>

<center>

<h6>

250x300<div class="img-center">

<amp-img alt="dulbjn orang bojonegoro" height="400" layout="fixed" src="url-gambar.jpg" tabindex="0" width="250"></amp-img> </div></h6>

</center>

</div>

Untuk Contoh gambar jadinya jika menggunakan kode diatas seperti dibawah ini.

Silahkan atur With:250 dan heigh:400 sesuai keingin anda.

Nah itulah Cara Memunculkan/Menampilkan Thumbnail Gambar Valid AMP HTML semoga bermanfaat selamat bervalidasiria..