Kunjungi Blog terbaru saya corkismet - Coretan Kang Ismet - dan tinggalkan jejak sobat disana.

Membuat Blog Menjadi Dua Tampilan - AMP dan Non AMP HTML

Cara membuat blog mempunya 2 tampilan AMP dan Non AMP

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 dan ditandai tulisan AMP Available, Has access to this site.

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'>
Hapus 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: &quot;1&quot; }' name='amp' value='amp'/>

3. Cari kode seperti ini :

<link expr:href='data:blog.url' rel='canonical'/>
Hapus kode diatas, dan ganti dengan kode di bawah ini (sengaja saya tambahkan rel='alternate' untuk penjelasannya silahkan baca Artikel ini)
<b:if cond='data:view.url == data:view.url params { amp: &quot;1&quot; }'>
  <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 + &quot;?m=1&quot;' rel='alternate'/>
  <link expr:href='data:view.url params { amp: &quot;1&quot; }' rel='amphtml'/>
</b:if>
4. Simpan dan lihat hasilnya.

Sampai disini sobat sudah beres membuat parameter ?amp=1 pada blog sobat, dan bisa dikostumisasi dengan tag kondisional

Perlu diperhatikan, ketika membuat postingan tetap dengan metode pada AMP seperti pada gambar, iframe dll.

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.

Untuk iklan yang muncul di desktop, gunakan iklan adsense biasa, sedangkan pada halaman AMP menggunakan amp-ad

Untuk caranya, pertama hapus kode JS amp-ad seperti dibawah ini

<b:if cond='data:blog.pageType not in {&quot;static_page&quot;,&quot;error_page&quot;} and not data:blog.searchQuery and not data:blog.searchLabel and data:view.url == data:view.url params { amp: &quot;1&quot; }'>
<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>
Sesuaikan google_ad_client dengan akun Adsense sobat, kemudian rubah semua slot iklan menjadi seperti ini
<b:if cond='data:blog.pageType not in {&quot;static_page&quot;,&quot;error_page&quot;} and not data:blog.searchQuery and not data:blog.searchLabel and data:view.url == data:view.url params { amp: &quot;1&quot; }'>
<!-- 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>
Sesuaikan 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>
Sobat bisa merubah tampilan pada halaman non AMP dengan penggunaan Tag Kondisional seperti ini
<b:if cond='data:view.url != data:view.url params { amp: &quot;1&quot; }'>
  <style>
  /*<![CDATA[*/
  
  CSS disini
  
  /*]]>*/
  </style>
</b:if>

Masih ada yang kurang? Silahkan ditambah di kolom komentar

16 komentar

1. Komentar ini, diurutkan dari yang terbaru
2. Tinggalkan komentar sesuai topik tulisan
3. Apabila ada pertanyaan diluar artikel silahkan kunjungi Ruang Obrolan.
4. Centang Beri tahu saya untuk mendapatkan notifikasi via Email ketika ada balasan
Masukkan URL Gambar atau Potongan Kode, atau Quote, lalu klik tombol yang kamu inginkan untuk di-parse. Salin hasil parse lalu paste ke kolom komentar.


image quote pre code
  1. Jelas punya ku gak bisa ini toh rahasianya
  2. Blog siapa kah ini sudarblogger,web,id template nya sama kek punya kang Ismet wkwk
    1. ya sudahlah... ga aneh dari dulu wkwkw
    2. Izin clone mas soalnya saya punya mentah nya tinggal otak atik css nya 🙏🙏
    3. :D
  3. Kak, req cara pasang iklan adsense yg benar untuk blog amp (?amp)
    1. intinya gunakan kode iklan AMP yang diberikan
    2. Siap kak..
  4. terimkasih kang ismet atas share ilmu/tipsnya..
  5. ini tutorial yg saya cari cari, makasih kang ☺️
  6. 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.
  7. Pro mah beda
  8. Keren
  9. Bang tanya, klo halaman amp dari subdomain berbeda gimna bang cara arahin nya di tag amphtml ?
  10. Apakah tutorial ini masih bekerja 2023?
    1. di 2024 mun masih bekerja mas hehe
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.