Untuk itu dalam menambahkan image post jangan sembarangan dengan hanya sebatas meng-upload gambar di postingan lalu dibiarkan begitu saja.
Namun biasakan untuk membetulkan kode HTML postingan, seperti menghapus style yang dipasang secara inline seperti
<div style="text-align: center;">
dan lainnya. Itu karena style yang dipasang secara inline dapat menyumbang loading blog.Cara terbaiknya yaitu menggunakan CSS style dari edit HTML, misalkan untuk tag
<div style="text-align: center;">
kita rubah menjadi <div class="center">
dengan CSS yang di simpan di edit HTML seperti berikut:
.center {
text-align: center;
}
Begitu juga untuk
left
, right
, atau justify
.Begitupun untuk gambar postingan, khususnya untuk gambar postingan blog AMP HTML (sebenarnya ini berlaku untuk semua jenis blog), letak dan ukuran gambar semestinya diatur dengan CSS dari edit HTML.
Silahkan simpan kode CSS berikut di edit HTML untuk style halaman postingan (untuk blog AMP simpan untuk syle halaman postingan tampilan desktop dan tampilan mobile).
.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;}
}
Ingat!
width
dan height
gambar harus sesuai dengan lebar dan tinggi gambar sesungguhnya baik blog AMP HTML maupun blog non AMP HTML.layout="responsive"
pada tag amp-img
seperti berikut:
<amp-img src="/img/amp.jpg"
width="1000"
height="564"
layout="responsive"
alt="an image"></amp-img>
Contoh:
Kalau tanpa ditambahkan
layout="responsive"
, maka secara default gambar tersebut akan berada di sebelah kiri namun akan terpotong pada layar device yang lebih kecil dari lebar gambar.Sementara jika ditambahkan
layout="responsive"
pada gambar tersebut maka gambar akan menjadi buram.Solusinya yaitu menggunakan class pada CSS tadi. silahkan ganti kode
<div class="separator" style="clear: both; text-align: center;">
dengan
<div class="img-width-300 img-center">
maka kode HTML-nya akan seperti berikut:
<div class="img-width-300 img-center">
<amp-img src="/img/amp.jpg"
width="300"
height="169"
layout="responsive"
alt="an image"></amp-img>
</div>
Contoh gambar ukuran 300px dengan
layout="responsive"
tanpa class img-width-300 img-center
:layout="responsive"
dengan class img-width-300 img-center
:Jika gambar ingin berada di samping kiri atau kanan, maka kita tinggal mengganti kode
img-center
dengan img-left
atau img-right
.img-width-300
, jika lebar gambarnya 400px (atau lebar di bawah 500px) maka silahkan ganti menjadi img-width-400
. Begitu pun untuk gambar dengan lebar 500px (atau lebar di bawah 600px) atau 600px (atau lebar di bawah 700px) (ini kita asumsikan bahwa lebar postingan 700px), silahkan ganti dengan img-width-500
atau img-width-600
.Silahkan klik kanan halaman ini kemudian inspect element lalu Ctrl + Shipt + M untuk melihat di berbagai tampilan device. Bagaimana, mudah bukan?
Semoga postingan ini bisa dimengerti sehingga postingan blog Anda selalu valid AMP HTML.