 |
| https://blog.ongky.eu.org |
Selamat siang menjelang sore semuan-nya pertama-tama saya ucapkan minal aidzin walfaidzin mohon maaf lahir dan batin, pada postingan kali ini saya akan coba menulis sebuah tutorial yaitu Cara Menampilkan Gambar Pada Template AMP Blogger.
Perbedaan yang paling jelas dari template AMP dan non-AMP ini adalah penulisan kode gambar dari yang biasa, jika pada biasanya kita untuk menampilkan gambar harus menggunakan code tags ![]()
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'/>
Ada beberapa pilihan layout yang tersedia antara lain-nya :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 tags Noscript Opsional
Pada dasarnya code tags 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 untuk code tags <noscript> sudah tidak diperlukan lagi, termasuk untuk penulisan gambar pada template AMP blogger walaupun tanpa code tags ini gambar akan tetap muncul hanya saja pada Blogger dapat membaca gambar dengan code tags <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 code tags <noscript>... </noscript> tapi kamu tidak perlu menambahkan code tags ini disetiap gambar pada artikel.
Kamu hanya cukup menambahkan code tags ini satu kali pada gambar yang ingin kamu jadikan thumbnail sehingga keseluruhan code-nya 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'/>
Nah, bagaimana gampang bukan, kamu bisa praktekan langsung pada blog kamu tapi tampilan atau template yang kamu gunakan yaitu dari template AMP, semoga dapat membantu.