Langsung ke konten utama

Cara Mengatur Gambar AMP di Postingan supaya Responsive

Pada artikel sebelumnya yaitu Cara Membuat Gambar di Postingan Blogger Valid AMP menjelaskan cara untuk mengatur gambar postingan supaya valid AMP (amp-img). Serta cara supaya gambar (amp-img) bisa responsive dengan lebar perangkat.

Terkait: Cara Menggunakan AMP di Blogger Yang Perlu Diketahui.

Serta menjelaskan supaya bisa responsive maka amp-img menggunakan atribut layout="responsive" dan elemen induknya atau yang menampungnya harus diatur lebarnya (dengan menggunakan max-width). Jadi elemen induk (biasanya dengan atribut class berisi separator) selalu diatur menggunakan CSS.

Karena jika tidak, Gambar akan melebar sesuai lebar artikel. Masalahnya jika ukuran lebar gambar kecil maka akan menyebabkan gambar pecah-pecah.

Dalam artikel ini membahas cara terbaru untuk membuat amp-img menjadi responsive. Dan cara ini akan lebih mudah digunakan karena tidak perlu mengatur elemen induknya. Jadi lebar amp-img akan menyesuaikan lebar gambar.

Jika sebelumnya menggunakan atribut layout="responsive" maka untuk cara ini akan menggunakan layout="intrinsic". Layout ini di perkenalkan setelah layout responsive. Layout intrinsic dan responsive berbeda. Induk dari amp-img (dengan layout="intrinsic") tidak perlu menggunakan css max-width. Contoh sudah saya terapkan pada artikel ini.

Cara Termudah Mengatur AMP-IMG agar Responsive

Biar lebih mudahnya kita mulai langkah-langkahnya dari awal. Di sini hanya akan menghapus beberapa atribut saja dan menambahkan atribut layout="intrinsic".

Pertama jika memasukkan gambar pada postingan hapus link pada gambar (pilih gambar dengan di klik lalu klik menu link.

Kemudian beralih ke tampilan HTML, maka struktur elemen gambar akan seperti ini.

<div class="separator" style="clear: both; text-align: center;"><img border="0" alt="atribut layout intrinsic di amp-img" data-original-height="376" data-original-width="640" height="235" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKE8kBNGNWUSCbbc5ItuX3kGQDnRsMpFXudUxoHSH82p-nFjx2BilXKVJvJL1NauSflir9QWqwPaVP5Ovc73X3RiZ-KK0BlHqut1bONiwmRbYVjXpOTTSrb6i6ffB0uzmtIaARFHNtGaU/s400/layout+intrinsic.png" title="menggunakan layout intrinsic di amp-img" width="400" /></div>

Edit elemen dengan:

  • Ubah tag img menjadi amp-img dan penutupan img yaitu /> menjadi ></amp-img>.
  • Hapus layout style="clear: both; text-align: center;" pada DIV, lalu ubah border="0" menjadi layout="intrinsic" pada AMP-IMG.

Sehingga menjadi seperti ini.

<div class="separator"><amp-img alt="atribut layout intrinsic di amp-img" data-original-height="376" data-original-width="640" height="235" layout="intrinsic" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKE8kBNGNWUSCbbc5ItuX3kGQDnRsMpFXudUxoHSH82p-nFjx2BilXKVJvJL1NauSflir9QWqwPaVP5Ovc73X3RiZ-KK0BlHqut1bONiwmRbYVjXpOTTSrb6i6ffB0uzmtIaARFHNtGaU/s400/layout+intrinsic.png" title="menggunakan layout intrinsic di amp-img" width="400"></amp-img></div>
Atribut width dan height diwajibkan (harus ada).

Sekarang tidak perlu mengatur/mengubah class lagi. CSS ini tidak perlu (jangan) di tambahkan jika Anda telah menggunakan tutorial dari artikel sebelumnya. Tetapi jika baru mencoba maka tambahkan.

.separator{text-align:center;margin.5em auto}.left{float:left;margin-right:15px}.right{float:right;margin-left:15px}

Tambahan untuk menaruh gambar di sebelah kanan tambahkan left di sebelah separator. Untuk sebelah kanan gunakan right. Contoh:

<div class="separator left">
Label:

Komentar

  1. Mangs Abdul16 Des 2018, 21.53.00

    mas cara otomatis pengatirannya gimana. biaa g di atur di templetnya saja.

    BalasHapus
    Balasan
    1. Rohman17 Des 2018, 09.14.00

      Tidak bisa bang abdul, setiap gambar di postingan berbeda-beda lebarnya. Pada artikel sebelumnya membahas agar gambar amp-img menjadi responsive menggunakan CSS class. Jadi harus mengatur beberapa css untuk lebar tertentu.

      Tapi di sini tidak perlu mengatur CSS class. Cukup mengatur atribut layout saja.

      Hapus
  2. Anonim16 Jan 2019, 01.00.00

    Apakah gambar nantinya akan di fixed ke width='400' atau bisa menyesuaikan sendiri dengan ukuran viewport?

    BalasHapus
    Balasan
    1. Rohman16 Jan 2019, 09.45.00

      Sama seperti layout responsive. Gambar akan berukuran sesuai dengan yang diatur pada atribut width, jika elemen di luarnya mengecil maka gambar akan menjadi responsif (menyesuaikan elemen induknya).

      Hapus

Posting Komentar

Postingan populer dari blog ini

Membuat Komentar Blogger Valid AMP dan Anti Backlink Spam

Umumnya komentar pada blog AMP menggunakan Disqus atau Facebook comment. Awalnya versi mobile blog ini juga menggunakan komentar Facebook, tapi sekarang menggunakan Threaded Comment Blogger yang tentunya sudah di custom valid AMP. Untuk versi dekstop juga ditambahkan fitur komentar Disqus (untuk diskusi). Sama seperti di posting sebelumnya komentar blogger ini menggunakan schema.org dan anti backlink untuk SEO. Schema komentar yang saya temukan hanya ada dua jenis yaitu https://schema.org/UserComments dan https://schema.org/comment. Karena usercomment mencantumkan sebagai cara lama untuk berinteraksi, maka diputuskan untuk menggunakan https://schema.org/comment, itu juga diperkuat lagi dengan digunakan oleh mastah blogger (platform wordpress). Blogger sudah menggunakan tag nofollow untuk setiap anchor link yang ada pada komemtar seperti yang sudah dijelaskan di blog resminya puluh tahun lalu. Tapi bagi saya itu tidak cukup, maka dengan Anti Backlink link apapun yang ada pada komentar a...
44 komentar
Baca selengkapnya

Membuat Komentar Blogger Simple SEO Ringan dengan Schema.org

Komentar merupakan salah satu bagian dari blog yang digunakan untuk pertanyaan, pendapat, dan bisa juga berdiskusi. Komentar bawaan blogger tersedia dalam 2 jenis yaitu yang biasa tidak ada fitur balas komentar (Comments) dan yang bertingkat (Threaded Comments) dengan fitur balas komentar. Kedua jenis komentar tersebut tidak menyertakan schema data terstruktur, yang tentunya berfungsi untuk SEO. Dengan adanya schema.org komentar yang positif dapat dengan mudah dibaca / index oleh mesin google dan tentunya dapat berguna untuk reputasi blog di pencarian google. Karena google sendiri juga menggunakan komentar untuk menilai konten, intinya reaksi pengunjung setelah membaca artikel. Mungkin dengan ditambahkannya schema akan lebih baik jika dibandingkan dengan tanpa schema. Blog ManKoin menggunakan komentar dengan schema.org, pada postingan kali ini membahas tentang membuat komentar dengan banyak fitur tapi sederhana. Awalnya ini dari blogger lain yang meminta membuat komentar seperti blog ...
19 komentar
Baca selengkapnya

Blogger Related Post AMP Ringan Dengan Multi Label

Sekarang sudah banyak orang yang menggunakan blog amp . Untuk blogger masih belum support AMP, tapi walau belum support amp Blogger bisa dibuat support amp. Dalam hal related post dan comment sudah di atasi oleh Kang Ismet dan Adhy Suryadi agar support amp dengan menggunakan amp-iframe. Update! sekarang blogger sudah bisa untuk HTTPS pada Custom Domain. Baca dan lihat tutotialnya di Blogger Mendukung Https untuk Custom Domain . Dalam related post kebanyakan hanya menggunakan satu label seperti milik kompiajaib yang menggunakan FeedWind, bahkan saya belum tau untuk yang multi label. Sekarang akan membahas related post dengan label lebih dari satu (multi label) atau berlabel banyak. Kisah pembuatannya Yang ini boleh dilewati!... 😉😏 Dalam pembuatan related post ini awalnya saya hanya mencoba-coba karena saya berfikir bahwa mungkin bisa untuk multi label dan ternyata hasilnya sukses. Dalam hal ini butuh waktu yang sangat lama karena saya juga masih belajar menggunakan javascript. Pertam...
23 komentar
Baca selengkapnya