Cara Menambahkan Gambar pada Postingan Blog AMP

Tutorial Blogger kali ini tentang cara memasang atau menyisipkan gambar di postingan blog yang menggunakn template AMP HTML. Seperti diketahui, khususnya untuk platform Blogger yang telah menggunakan template HTML AMP, maka cara menyisipkan segala sesuatu di postingan pun akan berbeda dari HTML biasa.

Berbeda dengan HTML yang biasanya, untuk menyisipkan atau menambahkan segala sesuatu berupa widget pada blog yang menggunakan template AMP HTML, punya cara dan format tersendiri.

Misalnya, jika ingin menambahkan gambar pada postingan artikel blog, maka formatnya harus mengikuti ketentuan penggunaan AMP HTML, seperti berikut ini.

Sebelum melanjutkan tutorial ini, sedikit informasi bagi Anda yang (masih labil) ingin migrasi menggunakan template AMP HTML, simak beberapa pesan-pesan berikut tentang akibat menggunakan template AMP HTML pada platform Blogger.

Cara memasang gambar pada postingan blog pengguna template AMP HTML

Caranya sangat amat mudah. Upload semua gambar yang ingin ditampilkan pada artikel blog, seperti biasa melalui form compose postingan. Setelah itu menuju ke tab HTML post, maka akan didapati kode seperti berikut ini, contoh:

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhD28U7BkMcL9roAm4T7BBzuSQwfhyDofhgPxxhLZWOrtYAmrquIRNtXpIKENHBOR-B-Zo_ZakivODiZqOWVVMjBwxjA4WmsP41A1GILVOGrd8I0MxCVj5SdcsWwF0PLDCAXDSy_6_492gn/s1600/cara-menambahkan-gambar-di-postingan-blog-amp.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara Menambahkan Gambar pada Postingan Blog AMP" border="0" data-original-height="462" data-original-width="750" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhD28U7BkMcL9roAm4T7BBzuSQwfhyDofhgPxxhLZWOrtYAmrquIRNtXpIKENHBOR-B-Zo_ZakivODiZqOWVVMjBwxjA4WmsP41A1GILVOGrd8I0MxCVj5SdcsWwF0PLDCAXDSy_6_492gn/s1600/cara-menambahkan-gambar-di-postingan-blog-amp.png" title="Cara Menambahkan Gambar pada Postingan Blog AMP" /></a></div>

Jika kode di atas dirubah menjadi support AMP HTML, maka formatnya hanya akan menjadi seperti berikut ini:

<amp-img src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhD28U7BkMcL9roAm4T7BBzuSQwfhyDofhgPxxhLZWOrtYAmrquIRNtXpIKENHBOR-B-Zo_ZakivODiZqOWVVMjBwxjA4WmsP41A1GILVOGrd8I0MxCVj5SdcsWwF0PLDCAXDSy_6_492gn/s1600/cara-menambahkan-gambar-di-postingan-blog-amp.png "
      width="750"
      height="462"
      layout="responsive"
      alt=" Cara Menambahkan Gambar pada Postingan Blog AMP "></amp-img>

Catatan:
Ukuran width dan height, mengikuti ukuran original gambar.
Bagian alt diisi dengan keterangan gambar.

Dengan cara di atas, untuk memasang gambar di postingan blog AMP HTML terlihat lebih sederhana kan?

Jika ingin mengatur letak gambar (karena size width gambar yang kecil, atau alasan estetika) entah itu mau diposisikan pada bagian tengah, kiri dan kanan postingan, silahkan lanjutkan dengan mengikuti langkah-langkahnya seperti berikut ini.

Mengatur letak gambar pada postingan blog yang menggunakan template AMP HTML

Silahkan masuk ke dashboard Blogger terlebih dahulu, klik Template > Edit HTML. Lalu tambahkan CSS berikut ini pada seluruh elemen CSS postingan (post-page):

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

Setelah itu, kembali lagi ke form HTML postingan. Silahkan edit kembali kode yang sudah dirubah ke format AMP HTML tadi, untuk mengatur gambar agar dapat tampil pada posisi yang diinginkan. Contoh!

Ingin menampilkan gambar dibagian tengah postingan, maka formatnya harus dirubah seperti berikut:

<div class="img-center">
<amp-img src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhD28U7BkMcL9roAm4T7BBzuSQwfhyDofhgPxxhLZWOrtYAmrquIRNtXpIKENHBOR-B-Zo_ZakivODiZqOWVVMjBwxjA4WmsP41A1GILVOGrd8I0MxCVj5SdcsWwF0PLDCAXDSy_6_492gn/s1600/cara-menambahkan-gambar-di-postingan-blog-amp.png "
      width="750"
      height="462"
      layout="responsive"
      alt=" Cara Menambahkan Gambar pada Postingan Blog AMP "></amp-img>
</div>

Jika ingin menambahkan gambar dibagian kiri tulisan postingan, ubah seperti berikut:

<div class="img-right">
<amp-img src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhD28U7BkMcL9roAm4T7BBzuSQwfhyDofhgPxxhLZWOrtYAmrquIRNtXpIKENHBOR-B-Zo_ZakivODiZqOWVVMjBwxjA4WmsP41A1GILVOGrd8I0MxCVj5SdcsWwF0PLDCAXDSy_6_492gn/s1600/cara-menambahkan-gambar-di-postingan-blog-amp.png "
      width="750"
      height="462"
      layout="responsive"
      alt=" Cara Menambahkan Gambar pada Postingan Blog AMP "></amp-img>
</div>

Dan, jika ingin gambar berada dibagian kanan postingan, silahkan ubah seperti ini:

<div class="img-right">
<amp-img src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhD28U7BkMcL9roAm4T7BBzuSQwfhyDofhgPxxhLZWOrtYAmrquIRNtXpIKENHBOR-B-Zo_ZakivODiZqOWVVMjBwxjA4WmsP41A1GILVOGrd8I0MxCVj5SdcsWwF0PLDCAXDSy_6_492gn/s1600/cara-menambahkan-gambar-di-postingan-blog-amp.png "
      width="750"
      height="462"
      layout="responsive"
      alt=" Cara Menambahkan Gambar pada Postingan Blog AMP "></amp-img>
</div>

Setelah itu, jangan lupa prevew dulu untuk melihat hasilnya.

Jika sudah yakin semua format postingan telah mengikuti ketentuan AMP HTML, silahkan di publish.

Demikian cara mudah menambahkan atau memasang gambar di postingan blog yang menggunakan template AMP HTML, semoga membantu dan terima kasih!