Menyatukan Blog Versi AMP dan Non AMP

IDSITEBLOG - Membuat Blog Menjadi dua Versi yaitu AMP HTML dan Non AMP - Untuk Anda yang belum mencobanya Blog dengan Versi AMP pastinya begitu penasaran, kenapa begitu.?...
Jelas pasti penasara karena blog dengan Versi AMP memberikan blog yang kita kelola lebih terlihat profesional dari tampilan Mobile dengan adanya lambang petir disamping Judul dalam mesin pencarian terkenal didunia internet yaitu Google, selain tampilan judul dalam pencarian berlambangkan icon petir model Blog AMP HTML ini telah di disain utuk akselerasinya yang cepat dalam versi mobile atau android. Dimana akan memberikan kenyamanan bagi sipengunjung ketika mengakses Situs atau Blog kita. Dan seperti yang kalian tahu untuk dimasa depan nanti pastinya teknologi akan semakin canggih termasuk salah satunya Android yang sekarang ini sedang berkembang dengan dengan Blog atau Site AMP HTML. jadi tunggu apalagi buat kalian yang Blog nya ingin mengikuti masa depan silahkan mencobanya.

Waktu demi waktu semaki canggih, kini Blog dengan tampilan AMP HTML juga bisa disatukan dengan Blog Non AMP HTML, alias Blog dengan dua versi. Ucara kerjanya blog dengan dua versi ini yaitu akan di bagi dua dengan apabila pengunjung mengakses nya dari Mobile / Android akan menampilkan Blog dengan Versi AMP dan sebaliknya apabila pengunjung mengaksesnya dengan Browser ( Leptop, Pc Komputer ) Blog akan Menampilkan dengan Versi Non Amp dengan berlogo petir warna biru di pojok kanan atas seperti seperti logo pada icon HTML5. Dan ketika icon tersebut di klik maka Blog akan di direct menjadi tampilan Blog AMP HTML dengan logo Validasi icon petir berwarna Hijau.

Contoh Demo Disini

Nah apabila Anda telah mempunyai Blog Versi AMP dan ingin mencoba Menyatukan Dengan Blog Versi Non AMP, silahkan ikuti cara saya dibawah ini:

Masuk ke Blogger.com

LANGKAH PERTAMA 1

Silahkan masuk ke Template klik HTML kemudian cari kode atau yang mirip seperti dibawah ini:

Setelah berhasil ditemukan kode diatas silahkan ganti dengan kode dibawah ini dalam template.

LANGKAH KEDUA 2

Silahkan cari kode atau mirip seperti kode dibawah ini dalam template.

Setelah berhasil ditemukan kode diatas silahkan langsung menggantinya dengan kode dibawah.

<b:if cond='data:blog.isMobileRequest == "false"'>
<link expr:href='data:blog.url' rel='canonical'/>
<link expr:href='data:blog.url + "?m=1"' rel='amphtml'/>
</b:if>
<b:if cond='data:blog.isMobileRequest == "true"'>
<link expr:href='data:blog.url' rel='canonical'/>
</b:if>

LANGKAH KE TIGA 3

Save Template.
Silahkan cek blog Anda, Template Blog telah berhasil di ubah menjadi Non HTML dengan Versi Broswer tetapi elemen amp tetap berjalan jadi tetap perhatikan validasi versi amp Blog Anda. Walaupun tampilan ini sudah Non Amp tetapi cara ini tetap menghasilkan versi AMP ketika di akses menggunakan mobile atau url : m=1

Jika langkah diatas sudah diselesaikan tinggal langkah selanjutnya yaitu membuat kode iklan adsense menjadi Non Amp di Versi Broswer untuk memaksimalkan Blog Dua Versi ini..

Lakukan pemisahan kode JS untuk Amp dan Non AMP dengan cara berikut:

Hapus kode dibawah ini :

Selanjutnya cari kode </head> atau </head> Lalu tempelkan kode dibawah tepat diatasnya.

<b:if cond='data:blog.pageType not in {"static_page","error_page"} and data:blog.isMobileRequest == "true" and not data:blog.searchQuery'>
<script async='async' custom-element='amp-ad' src='https://cdn.ampproject.org/v0/amp-ad-0.1.js'/>
</b:if>
<b:if cond='data:blog.pageType not in {"static_page","error_page"} and data:blog.isMobileRequest == "false" and not data:blog.searchQuery'>
<script async='async' src='//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'/>
<script>
//<![CDATA[
(adsbygoogle = window.adsbygoogle || []).push({
google_ad_client: "ca-pub-1122334455",
enable_page_level_ads: true
});
//]]>
</script>
</b:if>

Silahkan ganti kode ca-pub- dengan kode iklan milik Anda.
Untuk selanjutnya Anda tinggal merubah semua kode iklan menjadi Dua Versi Amp Dan Non AMP dengan kode dibawah ini :

<b:if cond='data:blog.isMobileRequest == "false" and not data:blog.searchQuery'>

<ins class='adsbygoogle' data-ad-client='ca-pub-1234567890' data-ad-format='rectangle' data-ad-slot='1234567890' style='display:block'/>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</b:if>
<b:if cond='data:blog.isMobileRequest == "true" and not data:blog.searchQuery'>

<amp-ad data-ad-client='ca-pub-1122334455' data-ad-slot='6677889910' data-auto-format='rspv' data-full-width='' height='320' media='(max-width: 736px)' type='adsense' width='100vw'>
<div overflow=''/>
</amp-ad>
</b:if>

Jangan lupa mengganti kode ca-pub dan ad-slot= dengan kode iklan adsense milik Anda.
Cek dan pastikan bahwa robots.txt tidak memblokir kode mobile URL m=1.

Selesai, kini Blog Amp Anda telah berubah menjadi Dua Versi ( AMP dan Non AMP ) Broswer dan Mobile. Terimakasih selamat mencoba

Sumber Artikel : Kang Adhy Suryadi