Membuat Blog Menjadi Dua Tampilan - AMP dan Non AMP HTML
Cara memadukan template Blog AMP dan Non AMP - Banyak pertanyaaan dari sobat Blogger tentang bagaimana menyatukan 2 Template Blog AMP dan Non AMP HTML. Sebetulnya template yang digunakan tetap 1, tetapi ada 2 parameter bahkan 3. Pertama dalah URL Kanonis seperti http://kang-ismet.com , kedua, parameter ?amp=1 dan ketiga parameter ?m=1
Syarat penambahan parameter ?amp=1
Sebagai syarat mutlak untuk menambahkan parameter ?amp=1, template blog harus sudah valid AMP HTML. Blog yang murni menggunakan AMPHTML biasanya ditandai bulatan hijau dan ketika dihover muncul tulisan Valid AMP, Has access to this site. Hal yang akan kita lakukan adalah menambahkan parameter ?amp=1 dan nantinya akan ditandai dengan
Cara Merubah Blog menjadi AMP Available
1. Login ke Blogger, Edit Template dan cari kode seperti dibawah ini (mirip-mirip)<html amp='amp' expr:dir='data:blog.languageDirection' lang='id'>amp='amp', boleh langsung Save atau lanjutkan ke tahap berikutnya.
2. Tambahkan dibawahnya kode ini
<b:attr cond='data:view.url == data:view.url params { amp: "1" }' name='amp' value='amp'/>3. Cari kode seperti ini :
<link expr:href='data:blog.url' rel='canonical'/>rel='alternate' untuk penjelasannya silahkan baca Artikel ini)
<b:if cond='data:view.url == data:view.url params { amp: "1" }'>
<link expr:href='data:blog.url.canonical' rel='canonical'/>
<link expr:href='data:view.url' rel='alternate'/>
<b:else/>
<link expr:href='data:blog.url.canonical' rel='canonical'/>
<link expr:href='data:view.url + "?m=1"' rel='alternate'/>
<link expr:href='data:view.url params { amp: "1" }' rel='amphtml'/>
</b:if>Sampai disini sobat sudah beres membuat parameter ?amp=1 pada blog sobat, dan bisa dikostumisasi dengan tag kondisional
Hasil pencarian
Hasil pencarian melalui desktop akan muncul URL Kanonis biasa, hasilnya seperti gambar di bawah ini
Sedangkan pencarian melalui mobile akan diakses halaman AMP, hasilnya seperti gambar di bawah ini
Optimasi Iklan Adsense
Sebagaimana dijelaskan oleh Kang Ady KompiAjaib, setelah membuat parameter ?amp=i ini, perlu dipisahkan antara iklan yang tampil di Halaman AMP dan Non AMP.
amp-adUntuk caranya, pertama hapus kode JS amp-ad seperti dibawah ini
<b:if cond='data:blog.pageType not in {"static_page","error_page"} and not data:blog.searchQuery and not data:blog.searchLabel and data:view.url == data:view.url params { amp: "1" }'>
<script async='async' custom-element='amp-ad' src='https://cdn.ampproject.org/v0/amp-ad-0.1.js'/>
<b:else/>
<script async='async' src='//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'/>
<script>
//<![CDATA[
(adsbygoogle = window.adsbygoogle || []).push({
google_ad_client: "ca-pub-1234567890",
enable_page_level_ads: true
});
//]]>
</script>
</b:if>google_ad_client dengan akun Adsense sobat, kemudian rubah semua slot iklan menjadi seperti ini
<b:if cond='data:blog.pageType not in {"static_page","error_page"} and not data:blog.searchQuery and not data:blog.searchLabel and data:view.url == data:view.url params { amp: "1" }'>
<!-- 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:else/>
<!-- Ini iklan untuk tampilan AMP/mobile -->
<amp-ad data-ad-client='ca-pub-1234567890' data-ad-slot='1234567890' data-auto-format='rspv' data-full-width='' height='320' media='(max-width: 736px)' type='adsense' width='100vw'>
<div overflow=''/>
</amp-ad>
</b:if>data-ad-client dan data-ad-slot sesuai akun dan slot iklan.
Merubah Tampilan pada Non AMP
Biasanya untuk blog AMP menggunakan style AMP secara umum dengan kode seperti ini
<style amp-custom='amp-custom'>
/*<![CDATA[*/
CSS disini
/*]]>*/
</style><b:if cond='data:view.url != data:view.url params { amp: "1" }'>
<style>
/*<![CDATA[*/
CSS disini
/*]]>*/
</style>
</b:if>Masih ada yang kurang? Silahkan ditambah di kolom komentar
Jelas punya ku gak bisa ini toh rahasianya
Blog siapa kah ini sudarblogger,web,id template nya sama kek punya kang Ismet wkwk
ya sudahlah... ga aneh dari dulu wkwkw
Izin clone mas soalnya saya punya mentah nya tinggal otak atik css nya 🙏🙏
:D
Kak, req cara pasang iklan adsense yg benar untuk blog amp (?amp)
intinya gunakan kode iklan AMP yang diberikan
Siap kak..
terimkasih kang ismet atas share ilmu/tipsnya..
ini tutorial yg saya cari cari, makasih kang ☺️
Terimakasih banyak kang infonya,
Oiya kang mff, saya mau tanya,
Apakah membuat halam menjadi 2 versi ini,
Harus menggunakan template AMP atau template biasa juga bisa,
Saya masih agak bingun,
Apakah template biasa saat di tambahkan script diatas, akan secara otomatis template kita akan menjadi 2 versi tempilan?
Terimakasih.
Pro mah beda
Keren
Bang tanya, klo halaman amp dari subdomain berbeda gimna bang cara arahin nya di tag amphtml ?
Apakah tutorial ini masih bekerja 2023?
di 2024 mun masih bekerja mas hehe
Berarti css dibuat double persis ya kang klo tampilan mobile mau sama dg tampilan desktop? Atau ada yg wajib dihilangin untuk tampilan mobile nya? Mohon arahan kang, terima kasih
Boleh dicobain nih
monggo silahkan mas...