Template Entry AMP-IMG Blogger

Contoh Gambar amp-img

Daftar isi:

1. Intro
2. Susunan tag amp-img
3. Copy template HTML
4. Petunjuk Copy Paste
5. Petunjuk penyesuain tag
6. Petunjuk tag noscript

Intro

Draft HTML tag AMP-IMG untuk Template Entry postingan Blogspot - Blogger

Template ini bisa langsung dicopy dan paste di pengaturan blog.

Postingan terkait : Manupulasi Width & Height gambar

Susunan tag amp-img

HTML :

<amp-img alt='' width='' height='' src='' srcset='' sizes=''>
<noscript>
<img alt='' width='' height='' src=''/>
</noscript>
</amp-img>

Jika sudah mengerti susunan dasarnya, dibawah ini tag yang sudah siap di copy pada Template Entry.

Copy Template

Post template HTML

<div class='separator'>
<amp-img alt=''
width='640'
height='320'
src='http://blogger.googleusercontent.com/img'
srcset='http://blogger.googleusercontent.com/img 640w'
sizes='(max-width:700px)70vw,640px'>
<noscript>
<img alt='' width='' height='' src='http://blogger.googleusercontent.com/img'/>
</noscript>
</amp-img>
</div>

Penempatan dalam tag div class='separator' hanya memanfaatkan div bawaan tag image dari Blogspot sebagai pembingkai gambar.
Contoh gambar, lihat gambar postingan paling atas.

Petunjuk

Petunjuk Copy Paste :
• Copy template HTML diatas lalu akses dashboard Blogger dan pilih Setting.
• Lalu scroll sampai ketemu Template Entry (opsional) seperti pada gambar diatas.
• Klik lalu paste dan Simpan.
• Coba buka Postingan baru dan lihat hasilnya.
• Setelah tersimpan, maka setiap kali membuat postingan baru, akan otomatis tag HTML AMP-img sudah tersedia.
  Tinggal menyisipkan saja url dan data image yang dibutuhkan.

Petunjuk penyesuaian tag
• ALT, isi dengan judul gambar
• width dan height, sesuaikan dengan panjang dan lebar gambar yang disisipkan.
• SRCSET adalah URL sumber gambar yang akan ditampilkan.
  disini sediakan 1 url sumber. Di belakang url sumber masukkan ukuran width gambar dengan akhiran w, pengganti px. Misal image width-nya 200px, maka ditulis 200w
  Jika memasukkan lebih dari 1 URL sumber, masing-masing url sumber pisahkan dengan koma dan ukuran width yang berbeda.
• SIZES ( max-width: 700px ) 70vw berarti:
  Batas maksimal bentangan gambar terhadap lebar viewport post-body.
  Disini perhatikan ukuran lebar post body, nilai max-width usahakan tidak melebihi width dari post-body.
  Perhatikan gambar ini, post-body berada dalam kolom warna merah.
  Sedangkan body dibingkai dengan kolom warna hijau.

• Total lebar body halaman dari blog ini adalah 1366px, sedangkan lebar post-body-nya 880px dikurangi paddingnya 10px, sehingga viewport (vw) yang tersedia adalah 870px.
  Jika total viewport tempat gambar dibentangkan = 100vw, maka 100vw halaman blog ini = 870px.
• Misal: srcset='/s640/image2.jpg 640w'
  dengan sizes='(max-width:800px)70vw'
  maka pada lebar layar hingga 800px, browser otomatis akan mengkondisikan tampilan untuk image 640w tersebut selebar 70vw atau 70% lebar post-body.
  Meskipun halaman dibuka dari perangkat dengan layar lebih lebar, ukuran viewport gambar tidak akan berubah dan tidak mengurangi kualitas tampilan dan juga ukuran gambar tersebut. Dari situlah maka browser dapat dengan jelas merender width dan height image.

Penjelasan tag <noscript>
• Untuk tag <img> yang berada dalam tag <noscript> masukkan data image yang paling kecil untuk kebutuhan thumbnail Featured image.
  Thumbnail ini secara otomatis digunakan untuk gambar di Popular Post ataupun Featured Post.
• Ukuran gambar untuk image harus kecil karena thumbnail selalu ditampilkan juga kecil, bahkan ada yang hanya menggunakan 100px saja.

Postingan terkait : Kelebihan & Kekurangan AMP dihalaman NOn AMP