Widget HTML Atas

Cara Posting Gambar yang Benar di Blog AMP

Mungkin ada beberapa yang masih belum tau cara Posting gambar di Template yang udah di support AMP nah kali ini wavker akan memberikan sedikit gambaran agar gambar nya valid amp.
Seperti yang saya lihat ketika mengupload gambar di postingan ketika kita posting akan menampilkan 2 gambar yang sama yaitu gambar di luar dan di dalam.

Nah berikut caranya agar gambar yang kita posting valid amp

1. Setelah Gambar sudah anda Upload, maka matikan Link dari gambar tersebut agar nanti kita bisa menambahkan Tag <noscript> dan di akhir </noscript> agar gambar tidak menjadi 2 yang sama contoh nya sebagai berikut :


2. Setelah Link nya sudah anda matikan maka langkah berikut nya ubah postingan dari mode Compose ke HTML

3. maka selanjutnya sebelum tag img ada kode ini : <div class="separator" style="clear: both; text-align: center;"> ubah menjadi <noscript>.
dan tag akhiran dari img atau </div> ubah menjadi </noscript>
berikut contoh gambaranya :


setelah itu save dan gambar postingan di luar agan sudah valid amp dan tidak double lagi.

Bagaimana Untuk memasang gambar kedua atau gambar selanjut nya ?
tentu mungkin kita memasang gambar 2 atau bahkan lebih dalam sebuah Postingan, kita sebut memasang gambar dalam atau memasang gambar di tengah dan akhir postingan, maka caranya pun beda lho gan.

1. Dalam Postingan ubah dalam Mode HTML
2. Lalu masukan kode berikut di tempat agan ingin menampilakan gambar :
<amp-img src="URL GAMBAR AGAN"
width="480"
height="480"
layout="responsive"
alt="Deskripsi Gambar AGAN">
</amp-img>

Keterangan :
URL GAMBAR AGAN ubah dengan Link gambar yang ingin anda tampilkan
width :  adalah lebar gambar agan
height : sesuaikan dengan tinggi gambar agan
Deskripsi : isi dengan deskripksi dari gambar agan

Jika sudah Publish dan ketika agan masih ragu anda bisa melihat apakah situs anda valid AMP selengkap nya baca disini : Cek Apakah Situs Anda Valid AMP

Tambahan :
dalam sebuah postingan Tag Style tidak diperbolehkan, maka satu nya cara seperti <div class="separator" style="clear: both; text-align: center;"> ubah menjadi <div> begitupun seterusnya.

Ketika rasanaya agan masih binggung, anda tinggal menanyakan di kolom komentar untuk bertanya kelanjutanya.