gacerindo.com - Sebenarnya cara untuk menambahkan gambar pada postingan blog itu tidaklah sulit. Cukup menekan menu upload gambar, maka gambar pun akan muncul pada postingan.
Permasalaha muncul ketika postingan sudah dipublish. Kalu tidak dirubah lagi postingan gambar tersebut maka hasilnya tidak akan valid AMP.
Postingan ini bisa terlihat di laptop, mungkin akan tidak muncul pada smartphone atau handphone karena postingannya tidak valim AMP.
Nah, untuk menambah dan mengatur gambar agar valid AMP. caranya cukup mudah kok sob, berikuti toturialnya.
Baca:
Pertama, Upload gambar seperti biasanya, dan masuk ke mode HTML postingan blog. Nanti kira-kira akan muncul tulisan seperti dibawah ini.
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEil406eb4RWHb-wOYZXfo3dpl_8RT3-1ggVO7kx2S6IvrGxwjBjIO0YowMhPOGAqJgJhb04PLdgAt3A1WYrzDFuzbe_5zvyQDssecLcLpKLURQkRYYZgbFZtd6dQf0mXsZYbvFg0HPlA3k/s1600/Cara+Menambahkan+dan+Mengatur+Gambar+pada+Postingan+Blog+AMP.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="393" data-original-width="768" height="163" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEil406eb4RWHb-wOYZXfo3dpl_8RT3-1ggVO7kx2S6IvrGxwjBjIO0YowMhPOGAqJgJhb04PLdgAt3A1WYrzDFuzbe_5zvyQDssecLcLpKLURQkRYYZgbFZtd6dQf0mXsZYbvFg0HPlA3k/s320/Cara+Menambahkan+dan+Mengatur+Gambar+pada+Postingan+Blog+AMP.jpg" width="320" /></a></div>
Kedua, untuk merubah kode tersebut menjadi valid AMP, cukup mengubah kode tersebut menjdi seperti ini.
<amp-img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEil406eb4RWHb-wOYZXfo3dpl_8RT3-1ggVO7kx2S6IvrGxwjBjIO0YowMhPOGAqJgJhb04PLdgAt3A1WYrzDFuzbe_5zvyQDssecLcLpKLURQkRYYZgbFZtd6dQf0mXsZYbvFg0HPlA3k/s1600/Cara+Menambahkan+dan+Mengatur+Gambar+pada+Postingan+Blog+AMP.jpg"
width="768"
height="393"
layout="responsive"
alt="Cara Menambah dan Mengatur Gambar pada Postingan Blog AMP">
</amp-img>
Catatan:
- amp-img scr: Isi dengan url gambar
- width: Isi dengan ukuran lebar gambar
- height: Isi dengan ukuran tinggi gambar
- alt: isi dengan alt gambar, contoh Cara Menambah dan Mengatur Gambar pada Postingan Blog AMP
Dengan cara diatas yang simple dan sederhana sudah bisa dikatakan gambar tersebut sudah valid AMP. Gampang bukan.
Lalu bagaimana mang, agar tata letak gambar tersebut bisa dirubah menjadi rata kiri, kanan atau tengah. Berikut ulasannya.
Cara Mengatur Gambar Pada Postingan Blog AMP
Pertama, untuk mengatur gambar postingan berada di tengah, kiri atau kanan pada postingan blog. Silahkan masuk dulu ke menu Template lalu masuk ke mode HTML. Masukan kode CSS dibawah ini tepat di bawah kode style atau post-page
.img-center{text-align:center;margin:0 auto;}
.img-left{clear:left;float:left;margin-bottom:1em;margin-right:1em;text-align:center;}
.img-right{clear:right;float:right;margin-bottom:1em;margin-left:1em;text-align:center;}
.img-width-300,.img-width-400,.img-width-500,.img-width-600{width:100%;text-align:center;clear:both}
.img-width-300{max-width:300px;}
.img-width-400{max-width:400px;}
.img-width-500{max-width:500px;}
.img-width-600{max-width:600px;}
@media screen and (max-width:640px){
.img-width-500.img-left,.img-width-500.img-right,.img-width-600.img-left,.img-width-600.img-right{clear:both;float:none;margin:1em auto;text-align:center;}
}
@media screen and (max-width:414px){
.img-width-300.img-left,.img-width-300.img-right,.img-width-400.img-left,.img-width-400.img-right{clear:both;float:none;margin:1em auto;text-align:center;}
}
Kedua, Setelah itu masuk kembali ke postingan blog pada mode html, ubah kode yang tadi. Atau kode seperti dibawah ini.
<amp-img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEil406eb4RWHb-wOYZXfo3dpl_8RT3-1ggVO7kx2S6IvrGxwjBjIO0YowMhPOGAqJgJhb04PLdgAt3A1WYrzDFuzbe_5zvyQDssecLcLpKLURQkRYYZgbFZtd6dQf0mXsZYbvFg0HPlA3k/s1600/Cara+Menambahkan+dan+Mengatur+Gambar+pada+Postingan+Blog+AMP.jpg"
width="768"
height="393"
layout="responsive"
alt="Cara Menambah dan Mengatur Gambar pada Postingan Blog AMP">
</amp-img>
<div class="img-right">
<amp-img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEil406eb4RWHb-wOYZXfo3dpl_8RT3-1ggVO7kx2S6IvrGxwjBjIO0YowMhPOGAqJgJhb04PLdgAt3A1WYrzDFuzbe_5zvyQDssecLcLpKLURQkRYYZgbFZtd6dQf0mXsZYbvFg0HPlA3k/s1600/Cara+Menambahkan+dan+Mengatur+Gambar+pada+Postingan+Blog+AMP.jpg"
width="768"
height="393"
layout="responsive"
alt="Cara Menambah dan Mengatur Gambar pada Postingan Blog AMP">
</amp-img>
Sebelum melakukan publish posting, alangkah baiknya preview terlebih dahulu. Setelah postingan sesuai dengan yang kita inginkan baru di publish. Selamat Mencoba
