Mengatur Gambar Postingan Blog AMP HTML Agar Lebih Rapih

Sebelumnya saya sudah posting tentang Memasukan Gambar, Video, Di Postingan Blog Valid AMP HTML. Namun dengan cara tersebut kita belum bisa merapih kan gambar di postingan blog amp, sebenarnya postingan ini bukan hanya untuk blog yang valid AMP HTML saja, tetapi untuk blog non AMP juga harus menerapkan cara ini agar postingan gambar nya lebih terlihat rapi.

postingan ini saya dapat dari blog kompi ajaib yang membahas tentang Mengatur Gambar Postingan Blog AMP HTML. Nah, agar postingan gambar di blog kita lebih rapih, kita harus mengakali dengan CSS yang kita tempatkan di 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;}
}

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

Kalo untuk gambar dengan lebar sama atau lebih besar dari lebar halaman postingan, kita cukup menambahkan kode 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>

Kalo untuk gambar dengan lebar lebih kecil dari lebar halaman postingan, misalnya dengan lebar 240px, 300px, 400px, 500px, atau 600px, dan lebar postingan adalah 700px. Kalau kita tidak menambahkan kode 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 jika kita menambahkan layout="responsive" pada gambar tersebut maka gambar akan menjadi buram atau tidak jelas. Cara yang tepat yaitu menggunakan 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 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>

Apabila anda ingin meletakan gambar 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) (Misalkan kita mempunyai template blog dengan lebar postingan 700px), silahkan ganti dengan img-width-500 atau img-width-600, agar gambar tidak terpotong melebihi lebar postingan.

Nah, mungkin cuma itu saja yang bisa saya bagikan, Baca juga: Download AMP Template Gratis Untuk Blogger. Semoga bermanfaat.

Reaksi:
Share this with short URL:

You Might Also Like:

How to style text in Disqus comments:
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Hide Parser