Menyatukan Blog Versi Amp Dan Non Amp
IDSITEBLOG - Membuat Blog Menjadi dua Versi yakni AMP HTML dan Non AMP - Untuk Anda yang belum mencobanya Blog dengan Versi AMP pastinya begitu penasaran, kenapa begitu.?...
Jelas niscaya penasara alasannya blog dengan Versi AMP menawarkan blog yang kita kelola lebih terlihat profesional dari tampilan Mobile dengan adanya lambang petir disamping Judul dalam mesin pencarian populer didunia internet yakni 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 menawarkan kenyamanan bagi sipengunjung saat mengakses Situs atau Blog kita. Dan menyerupai yang kalian tahu untuk dimasa depan nanti pastinya teknologi akan semakin canggih termasuk salah satunya Android yang kini 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 dapat disatukan dengan Blog Non AMP HTML, alias Blog dengan dua versi. Ucara kerjanya blog dengan dua versi ini yakni 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 menyerupai seolah-olah logo pada icon HTML5. Dan saat icon tersebut di klik maka Blog akan di direct menjadi tampilan Blog AMP HTML dengan logo Validasi icon petir berwarna Hijau.
Nah apabila Anda telah memiliki Blog Versi AMP dan ingin mencoba Menyatukan Dengan Blog Versi Non AMP, silahkan ikuti cara saya dibawah ini:
Masuk ke Blogger.com
Silahkan masuk ke Template klik HTML lalu cari aba-aba atau yang menyerupai mirip dibawah ini:
Setelah berhasil ditemukan aba-aba diatas silahkan ganti dengan aba-aba dibawah ini dalam template.
Silahkan cari aba-aba atau menyerupai mirip aba-aba dibawah ini dalam template.
Setelah berhasil ditemukan aba-aba diatas silahkan pribadi menggantinya dengan aba-aba dibawah.
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 saat di jalan masuk memakai mobile atau url : m=1
Jika langkah diatas sudah diselesaikan tinggal langkah selanjutnya yakni menciptakan aba-aba iklan adsense menjadi Non Amp di Versi Broswer untuk memaksimalkan Blog Dua Versi ini..
Lakukan pemisahan aba-aba JS untuk Amp dan Non AMP dengan cara berikut:
Hapus aba-aba dibawah ini :
Selanjutnya cari kode </head><!--<head/>--> atau </head> Lalu tempelkan aba-aba dibawah sempurna diatasnya.
Silahkan ganti aba-aba ca-pub- dengan aba-aba iklan milik Anda.
Untuk selanjutnya Anda tinggal merubah semua aba-aba iklan menjadi Dua Versi Amp Dan Non AMP dengan aba-aba dibawah ini :
Jangan lupa mengganti aba-aba ca-pub dan ad-slot= dengan aba-aba iklan adsense milik Anda.
Cek dan pastikan bahwa robots.txt tidak memblokir aba-aba mobile URL m=1.
Selesai, kini Blog Amp Anda telah bermetamorfosis Dua Versi ( AMP dan Non AMP ) Broswer dan Mobile. Terimakasih selamat mencoba
Sumber Artikel : Kang Adhy Suryadi Sumber https://www.idsiteblog.com/
Jelas niscaya penasara alasannya blog dengan Versi AMP menawarkan blog yang kita kelola lebih terlihat profesional dari tampilan Mobile dengan adanya lambang petir disamping Judul dalam mesin pencarian populer didunia internet yakni 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 menawarkan kenyamanan bagi sipengunjung saat mengakses Situs atau Blog kita. Dan menyerupai yang kalian tahu untuk dimasa depan nanti pastinya teknologi akan semakin canggih termasuk salah satunya Android yang kini 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 dapat disatukan dengan Blog Non AMP HTML, alias Blog dengan dua versi. Ucara kerjanya blog dengan dua versi ini yakni 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 menyerupai seolah-olah logo pada icon HTML5. Dan saat icon tersebut di klik maka Blog akan di direct menjadi tampilan Blog AMP HTML dengan logo Validasi icon petir berwarna Hijau.
Nah apabila Anda telah memiliki 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 lalu cari aba-aba atau yang menyerupai mirip dibawah ini:
<HTML amp='amp' expr:dir='data:blog.languageDirection' lang='id'>
Setelah berhasil ditemukan aba-aba diatas silahkan ganti dengan aba-aba dibawah ini dalam template.
<HTML expr:dir='data:blog.languageDirection' lang='id'>
<b:attr cond='data:blog.isMobileRequest == "true"' name='amp' value='amp'/>
<b:attr cond='data:blog.isMobileRequest == "true"' name='amp' value='amp'/>
LANGKAH KEDUA 2
Silahkan cari aba-aba atau menyerupai mirip aba-aba dibawah ini dalam template.
<link expr:href='data:blog.url' rel='canonical'/>
Setelah berhasil ditemukan aba-aba diatas silahkan pribadi menggantinya dengan aba-aba 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>
<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 saat di jalan masuk memakai mobile atau url : m=1
Jika langkah diatas sudah diselesaikan tinggal langkah selanjutnya yakni menciptakan aba-aba iklan adsense menjadi Non Amp di Versi Broswer untuk memaksimalkan Blog Dua Versi ini..
Lakukan pemisahan aba-aba JS untuk Amp dan Non AMP dengan cara berikut:
Hapus aba-aba dibawah ini :
<script async='async' custom-element='amp-ad' src='https://cdn.ampproject.org/v0/amp-ad-0.1.js'/>
Selanjutnya cari kode </head><!--<head/>--> atau </head> Lalu tempelkan aba-aba dibawah sempurna 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>
<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 aba-aba ca-pub- dengan aba-aba iklan milik Anda.
Untuk selanjutnya Anda tinggal merubah semua aba-aba iklan menjadi Dua Versi Amp Dan Non AMP dengan aba-aba dibawah ini :
<b:if cond='data:blog.isMobileRequest == "false" and not data:blog.searchQuery'>
<!-- Ini iklan untuk tampilan desktop -->
<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'>
<!-- Ini iklan untuk tampilan AMP/mobile -->
<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>
<!-- Ini iklan untuk tampilan desktop -->
<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'>
<!-- Ini iklan untuk tampilan AMP/mobile -->
<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 aba-aba ca-pub dan ad-slot= dengan aba-aba iklan adsense milik Anda.
Cek dan pastikan bahwa robots.txt tidak memblokir aba-aba mobile URL m=1.
Selesai, kini Blog Amp Anda telah bermetamorfosis Dua Versi ( AMP dan Non AMP ) Broswer dan Mobile. Terimakasih selamat mencoba
Sumber Artikel : Kang Adhy Suryadi Sumber https://www.idsiteblog.com/
