Setelah Menggunakan Template AMP di Blogger

Batas Catatan - Pernah terbayangkan menggunakan template AMP ? pasti semua akan jawab "iya". Template AMP merupakan template yang sedang tren sekarang ini, jika mungkin ada yang belum tahu apa itu template amp lihat di sini Apa Itu Template AMP. Nahhh gimana pasti penasaran.

Aku juga yang termasuk penasaran ingin beralih ke template AMP sob. Alasannya sih penasaran ingin coba - coba.. Tapi setelah beralih ke template AMP ehhh malah nemuin banyak scrip yang eror,

Postingan lama yang ada pada blog semuanya belum valid AMP, alhasil harus aku edit satu persatu sob.

Saranku jika sobat ingin beralih ke templat AMP gunakan Template AMP yang sudah valid, yahh soalnya ngedit scripnya lumayan ribet sob. Terus caranya gimana ngecek template AMP yang valid? Lihat di sini.

Setelah pasang Template AMP yang valid, ada hal yang harus sobat ketahui :

1. Perubahan Tag HTML IMAGE

Gunakan kode di bawah ini untuk memasang foto postingan yang tampil di homepage laman.

<noscript>
<img src="urlgambar.jpg" width="lebar gambar" height="tinggi gambar" alt="isi alt text" title="isi title text"/>
</noscript>

Gunakan kode di bawah ini untuk upload gambar pada tiap postingan

<amp-img
src="urlgambar.jpg"
alt="isi alt text "
title="isi title text"
layout="responsive"
on="tap:lightbox1"
tabindex="0"
role="button"
height="tinggi gambar"
width="lebar gambar"></amp-img>

2. Perubahan Tag HTML Video Youtub

Kalo ingin pasang video youtube di blog pakai kode di bawah ini :


<amp-youtube
data-videoid="ID VIDEO"
layout="responsive"
width="480" height="270">
</amp-youtube>

Jangan lupa sertakan JS AMP di bawah ini di atas kode </head>


<script async='async' custom-element='amp-youtube' src='https://cdn.ampproject.org/v0/amp-youtube-0.1.js'></script>

Perubahan Tag Kode Iklan Google Adsense :

Untuk memasang iklan di widget yang mempunyai ukuran tetap pakai kode di bawah ini :


<amp-ad
data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
data-ad-slot="yyyyyyyyyy"
height="300"
width="250"
type="adsense">
</amp-ad>

Jangan lupa ganti ca-pub-xxxxxxxxxxxxxxxx dan data-ad-slot="yyyyyyyyyy" dengan kode iklan sobat.

Kalo untuk memasang iklan agar bisa menyesuaikan layar pakai kode di bawah ini :

<amp-ad
layout="fixed-height"
height="100"
type="adsense"
data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
data-ad-slot="yyyyyyyyyy">
</amp-ad>

Jangan lupa ganti ca-pub-xxxxxxxxxxxxxxxx dan data-ad-slot="yyyyyyyyyy" dengan kode iklan sobat.

Yang terakhir tambahkan kode JS AMP iklan di bawah di atas kode </head>

NB. Usahakan tidak menambahkan CSS dan JS di HTML artikel. Sekian dari saya jangan lupa tinggalkan komentar.