Tuesday 5 June 2018

Image: Travelord AMP

    Tutorial Cara Memunculkan Thumbnail Pada AMP HTML Blogger Template

    Saya menggunakan template AMP blogger dan mengubah semua artikel termasuk kode <img> jadi <amp-img>, tapi kok thumbnailnya tidak muncul? Kenapa ya?

    Ternyata memang template blogger tidak akan membaca thumbnail jika semua image pada sebuah artikel diubah menjadi kode <amp-img>.

    Sebagaimana kita ketahui, bahwa tag img pada AMP HTML berubah menjadi amp-img. Apabila kita menuliskan pada postingan seperti ini :
    <img alt='gambar' src='url-image'/>
    maka akan mengakibatkan error validasi AMP HTML. Penulisan yang benar seperti disini yaitu :
    <amp-img src="url-image-disini.png"
        width="1080"
        height="610"
        layout="responsive"
        alt="AMP HTML"></amp-img>
    Image akan muncul dengan baik pada postingan. Akan tetapi tidak akan muncul pada thumbnail di halaman utama / homepage. Untuk mengakalinya, agar image muncul pada Homepage tambahkan tag noscript sehingga kode menjadi seperti ini :

    <noscript><img alt='gambar' src='url-gambar-anda'/></noscript>

    Selamat mencoba...

    Demikianlah Artikel Tutorial Cara Memunculkan Thumbnail pada AMP HTML Blogger Template. Semoga menjadi solusi dari "kebingungan" anda :D