Skip to main content
YUUARI

follow us

Cara Mengatur Gambar Postingan di Blog AMP HTML

Di postingan sebelumnya saya sudah membahas tenatng minyisipkan atau menambahkan gambar pada postingan atau thumnel di blog AMP, kali ini saya akan memberikan cara untuk mengatur posisi gambar biar rapi dan responsive.

Untuk caranya sama seperti biasanya kita upload gambar pada blog, tetapi kita harus mengubah format pada gamabr tersebut biar valid amp dengan cara mengubah atau mangganti formatnya menjadi amp-img untuk menyisipkan gambar pada postingan, tetapi cara itu di bebrapa template AMP gambar yang ukuran aslinya cuman 200 px malah tampil besar di postingan yang seharusnya tampil dengan ukuran aslinya yaitu 200 px.

Lalu bagaimana cara untuk mengaturnya? simak di bawah ini.

Simpan kode CSS di bawah ini ke dalam HTML template kalian yang tepat peletakannya tepat di bawah kode <style amp-custom='amp-custom'> dekat dengan kode b:skin lah bila tidak menemukan kode tersebut.

.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;}
}

Kalau sudah kalian simpan kode CSS di atas ke dalam template, selanjutnya cara penerapan atau format gambar pada postingan [mode HTML]
<div class="img-width-300 img-center">
<amp-img alt="an image"
width="346"
height="463"
layout="responsive"
src="/img/amp.jpg"
title="Judul gambar"></amp-img></div>
Catatan:
1. img-width-300 : silakan sesuakan dengan gambar kamu (300,400,500, dan 600)
contohnya , bila ukuran gambar asli kamu 450 maka di img-width-300 di ganti menjadi img-width-400 dan seterusnya.
2. Silakan ganti width dan height dengan ukuran asli gambar.
3. Ganti "/img/amp.jpg" dengan alamat url gambar.
4. Ganti "Judul gambar"dengan nama gambar atau bisa di sesuakan dengan kebutuhan
5. Bila gambar ingin di kiri, tengah, atau kanan. Silakan ganti img-center (tengah) dengan img-left (kiri) atau img-right (kanan).

Bagaimana mudah bukan, tutorial kali ini tentang Cara Mengatur Gambar Postingan di Blog AMP HTML. Terimakasih

You Might Also Like:

Comment Policy: Tinggalkan jejak tuliskan anda di komentar yang sesuai dengan topik postingan halaman ini. Komentar yang terdapat link tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar