Salah satu yang berbeda antara kode html blog biasa dan kode AMP HTML adalah Dibagian image atau gambar. Jika kode html biasanya menggunakan img, maka kode AMP menggunakan amp-img.dan Untuk Blog biasa untuk menambahkan image atau gambar diblog biasa kita langsung bisa menggunakan dan mengatur lebar tingginya pada saat pertama kali diunggah.Namun berbeda untuk blog AMP,untuk blog AMP kita tidak bisa langsung memakai Gambar yang diunggah. Karena gambar yang diunggah mengandung CSS yang tidak boleh di campur adukan pada HTML. Jadi intinya pada saat mengunggah gambar, kita hanya membutuhkan url gambar tersebut dan untuk css nya tidak dibutuhkan lagi, melainkan digantikan dengan kode css yang 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..
Tinggalkan komentar