kLAfYOEsUwKWcZE5EN4T8XHN0KE0jykePDkZX1nb
Cara Mengatur Gambar Postingan di Blog AMP HTML

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
Baca Juga
SHARE

Related Posts

Subscribe to get free updates

Posting Komentar

Like Facebook Yuuari.Com

Ikuti fanpage facebook Yuuari.com dan dapatkan Informasi terupdate seputar link file Firmware handphone, Game PSP terbaru dan masih banyak lain nya. 'IKUTI FANPAGE'