Skip to main content
YUUARI

follow us

Cara Menambahkan Gambar pada Postingan Blog AMP

Menyisipkan gambar pada blog yang menggunakan template AMP khusunya yang menggunakan blogger segala sesuatu bila anda ingin menyisipkan ke postingan tak sama dengan template biasa [HTML biasa].

Berbeda sekali dengan HTML biasanya, untuk menyisipkan ataupun menambahkan segala sesuatu seperti gambar ke postingan yang memakai template AMP HTML, memliki cara dan beberapa format tersendiri biar postingan valid tanpa ada error notifikasi di webmaster tools.

Untuk anda ingin menambahkan gambar pada postingan blog AMP, anda harus mengikuti ketentuan pengguna AMP HTML. Berikut cara yang benar untuk menambahkan gambar.

Cara memasang gambar di postingan pada blog AMP HTML

Caranya sangat simpel sekali untuk membuat gamabr valid AMP, masukan gambar seperti biasa pada form compose postingan setelah itu pilih pilih size yang original, masuk ke mode penulisan HTML maka anda akan mendapati kode gambar seperti ini, contoh :

<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-wq0obpyU5JE/XPPVZC1XhaI/AAAAAAAABZs/tNEk55iux2IJdgy_dzIMmtS9PDieYeAUwCLcBGAs/s1600/Contoh%2Bgambar%2Bvalid%2BAMP%2BHTML.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="426" data-original-width="640" src="https://1.bp.blogspot.com/-wq0obpyU5JE/XPPVZC1XhaI/AAAAAAAABZs/tNEk55iux2IJdgy_dzIMmtS9PDieYeAUwCLcBGAs/s1600/Contoh%2Bgambar%2Bvalid%2BAMP%2BHTML.jpg" /></a></div>

Jadi ingin mengubah kode di atas menjadi valid AMP HTML, maka format yang valid menjadi seperti ini :

<amp-img alt="Contoh gambar valid AMP HTML" height="426" width="640" src="https://1.bp.blogspot.com/-wq0obpyU5JE/XPPVZC1XhaI/AAAAAAAABZs/tNEk55iux2IJdgy_dzIMmtS9PDieYeAUwCLcBGAs/s1600/Contoh%2Bgambar%2Bvalid%2BAMP%2BHTML.jpg" title="Contoh gambar valid AMP HTML" layout="responsive"></amp-img>

Kode di atas cuman meyisipkan gambar pada postingan aja, apa bila anda ingin memunculkan atau menambahkan gambar pada thumbnail maka format-nya seperti ini :

<noscript>
<img alt="Contoh gambar valid AMP HTML" height="426" src="https://1.bp.blogspot.com/-wq0obpyU5JE/XPPVZC1XhaI/AAAAAAAABZs/tNEk55iux2IJdgy_dzIMmtS9PDieYeAUwCLcBGAs/s1600/Contoh%2Bgambar%2Bvalid%2BAMP%2BHTML.jpg" title="Contoh gambar valid AMP HTML" width="640" /></noscript>

Catatan:
Ukuran width dan height, harus mengikuti ukuran asli [original] pada gambar
Bagian alt dan title, di isi dengan keterangan gambar

Kalau di rasa sudah semua, silakan cek terlebih dahulu di pratinjau.

Itulah tutorial Cara Menambahkan Gambar pada Postingan Blog AMP, semoga dapat membantu dan 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