Cara Buat Postingan Valid AMP

Untuk penulisannya pada template AMP berbeda dengan template blogger biasanya jadi dengan dokumentasi ini sobat akan lebih mudah tinggal copy paste saja dan selesai. Ketika kamu posting dan ingin memasang gambar ataupun vidio youtube dibawah ini, kamu harus masuk ke mode HTML bukan mode Compose.

Memasang Gambar Pertama Postingan

Normalnya gambar pertama pada potingan ini akan berfungsi juga untuk thumbnail pada halaman homepage, jadi gambar ini akan mewakili isi artikel kamu. Dan gambar ini bersifat muncul diawal artikel kamu, sebagai contoh kamu bisa lihat pada artikel di blog ini.

<div class="thumb-post">
<noscript><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipd30AvBs5EtNYIq1OxWjZAn12DuNkZYg3XfAPLVMfTrW7Bq6JPZnoSrlbAb4uhrSft6-gj5vqSzUFHWxF-eSbZbv-tAsIS957DQX-0GkfjRXSEu_4hZiANS-hoOfcxTQHmm8AJrnY6hg/s1600/4.jpg" width="650" height="350" alt="Curabitur placerat est sem"/></noscript>
</div>

Pada kode tersebut sudah saya atur tinggi dan lebarnya, jadi kamu hanya perlu mencari gambar dengan resolusi yang sesuai. Jadi tugas kamu hanya perlu mengganti url-gambar yang kamu upload dengan gambar kamu sendiri, dan mengganti tag alt nya dengan yang kamu inginkan.

Memasang Gambar Pendukung Lainnya

Selain gambar diatas artikel kamu juga perlu menyesuaikan gambar-gambar yang menjadi pendukung pada artikel kamu, karena jika menggunakan style gambar yang kamu upload akan membuat error validasi AMP HTML itu sendiri.
Penulisan kode untuk lebar full seperti berikut :

<div class="img-center">
<amp-img alt="contoh-gambar"
   height="333" 
   layout="responsive" 
   src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixoPg2gWX27OIme3Yh3blol-D7-LvJiHzf1ssQSOMpBvqizXAd-JUn54uFfUn_mgntFH3z1T1NKstV7Fxj3i67zSBdpFj3vlYMEs6y3vfbEEH8MPo8Onr5QH9ZyeznIWl83I2fU_i1XKZx/s1600/no-thumbnail.png" 
   tabindex="0" 
   width="556"></amp-img>
</div>

Ganti url-gambar dengan gambar yang kamu upload dan pastikan gambar yang kamu upload mempunyai lebar yang baik, nanti kamu akan mengerti sendiri jika sudah mencobanya, seterusnya kamu hanya perlu menyesuikan tingginya (height) dengan tinggi gambar tersebut. Contoh gambar sebagai berikut :

Penulisan gambar dengan resolusi lebih kecil dan lebih rapi:

<div class="img-center img-width-300">
<amp-img alt="contoh-gambar"
   height="150" 
   layout="responsive" 
   src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixoPg2gWX27OIme3Yh3blol-D7-LvJiHzf1ssQSOMpBvqizXAd-JUn54uFfUn_mgntFH3z1T1NKstV7Fxj3i67zSBdpFj3vlYMEs6y3vfbEEH8MPo8Onr5QH9ZyeznIWl83I2fU_i1XKZx/s1600/no-thumbnail.png" 
   tabindex="0" 
   width="300"></amp-img>
</div>

Biasanya kode gambar jenis ini yang harus kamu sesuaikan dengan gambar yang ingin kamu gunakan, termasuk juga tinggi dan lebar gambar tersebut, sangat mudah dan kamu harus mengerti dalam menggunakan setiap classnya. Contoh penggunaan pada gambar dari kode tersebut adalah sebagai berikut :

Pada contoh tersebut, saya posisikan gambar ditengah jadi jika kamu ingin menggantinya diposisikan di sebelah kiri kamu harus mengganti classnya. Misalnya img-center Menjadi img-right dan untuk ukuran gambar kamu gunakan img-width-300 menjadi img-width-400 dan seterusnya.

Baca Juga : Menulis Arab Pada Blog Amp HTML

Untuk lebih jelas, Selanjutnya kamu bisa kreasikan sendiri dengan menyesuaikan classnya sebagai berikut :

.img-center{text-align:center;padding-top:15px;padding-bottom:15px;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;}
}