Template amp ketika ini sedang trendnya dipakai pengguna situs web maupun blogger, sayapun sudah mulai menggunakannya pada blog ini.Alasan saya mengganti template blog sebelumnya alasannya ialah saya ingin perubahan, salah satu faktor yang menguatkannya ialah pengunjung blog saya mulai lebih mayoritas pengguna mobile dari pada versi desktop.
Tetapi didalam pengaturannya ini, tidak semudah ibarat template biasa pada umumnya ketika ini, apalagi kita bandingkan dengan wordpress self-hosted. perbedaannya blogger masih kalah majunya. alasannya ialah wordpress sudah lebih dahulu mendukung AMP.
Sudah banyak yang dibentuk atau diperbaharui yang mendukung AMP, bahkan pluginnya sudah tersedia di wordpress self-hosted.
Jika ingin mencari template amp blogger gratis niscaya masih sedikit jumlahnya di google pencarian sob. alasannya ialah penerapan AMP pada blogger masih tergolong gres dipakai ketika ini. apalagi masih dalam perkembangan fitur-fiturnya.
Saran saya carilah template blogger premium sob. alasannya ialah biasanya versi berbayar ini menerima jaminan update versi terbaru kalau ada fitur tambahan, dan support dari pembuat kalau teman masih kurang jago dalam melaksanakan pengaturannya.
Banyak pengalaman yang saya dapatkan disaat memulai memakai AMP, mulai dari error, tidak valid AMP, penggunaan tag html-amp yang berbeda. tentunya akan saya share di artikel ini pengalaman saya buat teman kalau ingin ibarat saya pada blognya, semoga siap yang akan dihadapi nanti.
Perubahan Tag HTML Image
Tag html image atau gambar berbeda dengan tag pada AMP. terdapat 2 jenis tag gambar amp, namun hanya sedikit perubahannya. Berikut cara memasang gambar di postingan amp blog. Untuk gambar utama sebagai thumbnail di homepage, biasanya tidak akan tampil di artikel menggunakan.
<noscript>
<img src="urlgambar.jpg" width="lebar gambar" height="tinggi gambar" alt="Menggunakan template AMP Blogger ini yang akan dihadapi Menggunakan template AMP Blogger ini yang akan dihadapi" title="Menggunakan template AMP Blogger ini yang akan dihadapi"/>
</noscript>
Jika memakai gambar tambahan, akan tampil di artikel
<amp-img
src="urlgambar.jpg"
alt="Menggunakan template AMP Blogger ini yang akan dihadapi Menggunakan template AMP Blogger ini yang akan dihadapi"
title="Menggunakan template AMP Blogger ini yang akan dihadapi"
layout="responsive"
on="tap:lightbox1"
tabindex="0"
role="button"
height="tinggi gambar"
width="lebar gambar"></amp-img>Perubahan Tag HTML Video Youtube
Buat teman yang kadang juga memasukan video youtube ke artikel blognya, juga harus memahami tagnya kalau templatenya sudah support amp.
Jika sebelumnya cukup mengambil embed yang disediakan youtube, maka kini harus dilakukan secara manual, berikut cara memasang video youtube pada postingan blogger amp
<amp-youtube
data-videoid="ID VIDEO"
layout="responsive"
width="480" height="270">
</amp-youtube>Jangan lupa sertakan js amp-youtube dibawah <head>
<script async='async' custom-element='amp-youtube' src='https://cdn.ampproject.org/v0/amp-youtube-0.1.js'></script> Perubahan Tag arahan iklan Google AdSense
Di Google AdSense gotong royong masih dalam perkembangan untuk blog AMP, tapi sanggup memakai dibawah, berikut cara memasang iklan google amp pada blog amp versi blogger
Untuk ukuran yang tetap, contohnya 300x250
<amp-ad
data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
data-ad-slot="yyyyyyyyyy"
height="300"
width="250"
type="adsense">
</amp-ad>
Jika responsive, terdiri 2 jenis yaitu above the fold dan below the fold
Tampak layar atas atau above the fold ialah tampilan yang pertama terlihat sebelum layar discroll ke bawah. ini direkomendasikan memakai fixed-height 100px yaitu lebar iklan akan mengikuti lebar tempatnya berada, sementara tingginya akan tetap 100px.
<amp-ad
layout="fixed-height"
height="100"
type="adsense"
data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
data-ad-slot="yyyyyyyyyy">
</amp-ad>
Below the fold ialah bab layar yang tampil sesudah halaman di-scroll. Biasanya iklan ini di simpan di bawah postingan atau di atas dan di bawah komentar. Untuk iklan ini dorekomendasikan untuk memakai dengan tinggi 250px.
<amp-ad
layout="fixed-height"
height="100"
type="adsense"
data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
data-ad-slot="yyyyyyyyyy">
</amp-ad>
Jangan lupa diubah ca-pub-xxxxxxxxxxxxxxxx dengan id akun adsense sobat, dan data-ad-slot yyyyyyyyyy id iklan sobat. dan sertakan js amp-ad dibawah <head>
<script async='async' custom-element='amp-ad' src='https://cdn.ampproject.org/v0/amp-ad-0.1.js'></script> Hindari Menambah CSS / Javascript pada HTML di artikel
Jangan pernah menyisipkan CSS pada tag HTML di blog, alasannya ialah menciptakan blog akan tidak valid AMP. biasanya ini terjadi setiap menciptakan artikel gres memakai mode Compose, setiap paragraf otomatis terselip code style css, kita harus menghapusnya secara manual. termasuk juga Javascript walau jarang ada dipakai pada html di artikel.
Capek tentu saja, alasannya ialah disini kita harus membuatnya secara manual di mode HTML.
Cek dengan AMP Validator
Error atau tidak valid AMP sering terjadi, khususnya pengguna platform blogger/blogspot. alasannya ialah penerapannya masih dilakukan secara manual. kita tidak tau valid atau tidaknya AMP di blog, untuk itu gunakan fitur validasi AMP.
Google sudah menyediakan situs pengujian AMP, sanggup teman kunjungi halaman berikut.
Tapi cara tersebut sangat merepotkan, kalau untuk mengecek artikel valid tidaknya satu persatu. saya sih memakai cara kedua ini, dengan memasang ekstensi di browser. ekstensi ini hanya sanggup dipasang di browser Google Chrome, halamannya berikut.
itu saja isu dari saya mengenai penerapan Template AMP di blogger yang berbeda dari template biasanya. kalau ada yang ingin ditambah, sanggup memberi informasinya melalui kolom komentar. meski ini terbilang sedikit, tapi dalam hal ini juga dibutuhkan pengalaman mengetahui dalam struktur data html, sehingga sanggup menghadapinya kalau terjadi error.
Sumber rujukan
/search?q=cara-mengganti-template-blog-di-blogger
