Mengatur Gambar Postingan Amp Lengkap

Artikel ini akan membahas lengkap Cara mengatur letak dan ukuran gambar bagi akalian pengguna Amp HTML,  agar tampil bagus dan rapih serta tidak terlalu membebani loading blog.
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 class="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 class="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.

1. Untuk gambar dengan lebar sama dengan atau lebih besar dari lebar halaman postingan, kita cukup menambahkan kode layout="responsive" pada tag amp-imgseperti berikut:
<amp-img src="/img/amp.jpg" width="1000" height="564" layout="responsive" alt="an image"></amp-img>

2. Untuk gambar dengan lebar lebih kecil dari lebar halaman postingan, misalnya dengan lebar 300px, 400px, 500px, atau 600px (ini kita asumsikan bahwa lebar postingan 700px).
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:
Contoh gambar ukuran 300px dengan layout="responsive" dengan classimg-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

Begitu pun dengan 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?
Penutup, Semoga artikel bloanoid ini bermanfaat bagi anda para pembaca.
Source:kompiajaib.com

Subscribe to receive free email updates:

0 Response to "Mengatur Gambar Postingan Amp Lengkap"

Posting Komentar

Silahkan Komentar Relevan Dengan Topik Bahasan, Komentar Tanpa Moderasi, Ingat Jangan Pasang Link Aktif (SPAM) . .!!!!