Cara Menampikan Gambar Pada AMP Blogger


Perbedaan yang paling jelas dari template AMP dan non-AMP adalah penulisan kode gambar dari yang biasa, jika pada biasanya untuk menampilkan gambar menggunakan tag <img .../> maka pada template AMP penulisannya adalah seperti dibawah ini:


<amp-img alt='alt-image-disini' title='judul-image-disini' src='url-image-disini' width='xxx' layout='responsive' height='xxx'/>

Beberapa pilihan layout yang tersedia antara lain :
fill, fixed, fixed-height, flex-item, nodisplay, responsive

Yang paling umum dipakai adalah layout responsive selain lebih mudah gambar yang ditampilkan juga menyesuaikan dengan layar.

Penggunaan tag <noscript> (opsional)

Pada dasarnya tag <noscript>...</noscript> digunakan sebagai alternatif(pengganti) untuk menampilkan konten atau element lain apabila javascript tidak berfungsi atau dinonaktifkan pada browser yang digunakan oleh user.

Mengingat browser pada saat ini sudah semakin canggih maka penggunaan tag <noscript> sudah tidak diperlukan lagi, termasuk untuk penulisan gambar pada template AMP blogger walaupun tanpai tag ini gambar akan tetap muncul hanya saja pada Blogger hanya membaca gambar dengan tag <img .../>, akibatnya gambar thumbnail postingan pada homepage tidak akan muncul.

Mengatasi gambar thumbnail yang tidak muncul pada AMP Blogger

Untuk menampilkan kembali thumbnail pada blogger diperlukan tag <noscript>...</noscript> tapi Anda tidak perlu menambahkan tag ini disetiap gambar pada artikel.

Hanya tambahkan tag ini satu kali pada gambar yang ingin anda jadikan thumbnail sehingga keseluruhan kodenya akan menjadi seperti dibawah ini:


<amp-img alt='alt-image-disini' title='judul-image-disini' src='url-image-disini' width='xxx' layout='responsive' height='xxx'/>
<noscript><img alt='alt-image-disini' title='judul-image-disini' src='url-image-disini'/></noscript>

Semoga bermanfaat.

Anda mungkin menyukai postingan ini

  1. Percobaan komentar
    • Coba balas komentar
    • Balasan komentar lagi
    • coba koment sebanyak banyaknya mas. cek apakah ada error. biasanya error amp kalo terlalu banyak komentar yg muncul di versi AMPnya. itulah kenapa di halaman AMP komentarnya di hide dan cuma di beri tombol untuk beralih ke halaman non amp.
    • Ada referensi gak mas cara hide komentar nya, sy udah coba pakai cara sy yg biasa tapi gambar profilnya gak muncul
    • saya pm mas
  2. Percobaan komentar kedua
  3. Percobaan komentar ketiga dengan link Jagodesain.com
  4. Baru tau kalo comment Blogger support AMP
  5. komentar blogger memang support tp gak bisa balas komentar. kalo di blog saya nerapin url amp di amp=1, jadi bisa balas komentar di url m=1.
  6. Apa alamat blog sampeyan?
  7. sy send via WA mas
  8. Seperti punya a-arief. com komentar blogger terbaru, disqus dan Facebook nya valid AMP.
  9. keren templatenya 👍
  10. mas ini setiap mau upload gambar harus make tag amp di atas, dan ditulis manual?
  11. Coba
  12. Tes
  13. template ini kok di extensi amp validator masih tidak valid amp. Apa emang belum valid amp?
    • Tambahin ?amp=1
      Baca lagi artikel update v5.3 di demo fletro