Merapihkan Postingan Gambar Pada Blog Amp Html

Baca Juga

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ‏اارَّحِيم

Pada postingan sebelumnya aku sudah membagikan Posting Gambar Dan Video Valid AMP HTML. Namun dengan cara tersebut gambar yang kita posting belum terlihat rapih alias masih berantakan, alasannya yaitu gambar masih ada yang melebar, terpotong, dan ada yang terlihat buram. Untuk itu disini aku akan share bagaimana caranya semoga gambar yang kita posting pada blog AMP HTML terlihat lebih rapih.

Sebenarnya postingan ini bukan hanya untuk blog yang valid AMP HTML saja, tetapi untuk blog non AMP juga harus menerapkan cara ini semoga postingan gambar nya lebih terlihat rapih.

postingan ini aku sanggup dari blog kompi asing yang membahas perihal Mengatur Gambar Postingan Blog AMP HTML. Nah, semoga postingan gambar di blog kita lebih rapih, kita harus mengakali dengan CSS yang kita tempatkan di Editor HTML pada template blog kita.

Silahkan simpan isyarat 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;}
 }

Yang harus kita perhatikan yaitu width dan height gambar harus sesuai dengan lebar dan tinggi gambar bahwasanya baik blog AMP HTML maupun blog non AMP HTML.

Jika untuk gambar dengan lebar sama atau lebih besar dari lebar halaman postingan, kita cukup menambahkan isyarat layout="responsive" pada tag amp-img menyerupai berikut:

 <amp-img src="/img/amp.jpg"
       width="1000"
       height="564"
       layout="responsive"
       alt="Merapihkan Postingan Gambar Pada Blog AMP HTML Merapihkan Postingan Gambar Pada Blog AMP HTML"></amp-img>

Dan untuk gambar dengan lebar lebih kecil dari lebar halaman postingan, contohnya dengan lebar 240px, 300px, 400px, 500px, atau 600px, dan lebar postingan yaitu 700px. Jika kita tidak menambahkan isyarat layout="responsive", maka secara otomatis gambar tersebut akan berada di sebelah kiri dan gambar akan terpotong pada layar device yang lebih kecil dari lebar gambar.

Tetapi kalau kita menambahkan layout="responsive" pada gambar tersebut maka gambar akan menjadi buram atau tidak jelas. Cara yang sempurna yaitu memakai class pada CSS di atas. Silahkan ganti kode

 <div class="separator" style="clear: both; text-align: center;">

dengan

 <div class="img-width-300 img-center">

maka isyarat HTML-nya akan menyerupai berikut:

 <div class="img-width-300 img-center">
 <amp-img src="/img/amp.jpg"
       width="300"
       height="169"
       layout="responsive"
       alt="Merapihkan Postingan Gambar Pada Blog AMP HTML Merapihkan Postingan Gambar Pada Blog AMP HTML"></amp-img>
 </div>

Apabila anda ingin meletakan gambar di samping kiri atau kanan, maka kita tinggal mengganti isyarat img-center dengan img-left atau img-right.

Begitu pun dengan img-width-300, kalau 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) (Misalkan kita memiliki template blog dengan lebar postingan 700px), silahkan ganti dengan img-width-500 atau img-width-600, semoga gambar tidak terpotong melebihi lebar postingan.

Nah, mungkin hanya itu saja yang sanggup aku bagikan. Semoga bermanfaat.