Posts

Showing posts from October, 2016

Tutorial Uji Validasi AMP HTML dengan Ekstensi AMP Validator

Untuk mengetahui apakah Blog kita Valid AMP HTML atau tidak, ada beberapa tool yang bisa sobat gunakan. Diantaranya yaitu menggunakan Ekstensi AMP Validator di browser Google Chrome. Syarat utama tentunya sobat harus menggunakan browser Chrome. Kemudian search AMP Validator extensions , Install. Apabila menunjukan tanda "hijau" berarti Lolos Validasi Apabila menunjukan tanda "abu-abu" artinya tidak menggunakan AMP Apabila tanda "merah" dan ada angka, berarti menggunakan AMP tapi masih error. Angka menunjukan berapa banyak error pada template tersebut. Supaya Valid AMP, maka klik pada tanda merah, kemudian muncul seperti gambar. Klik Debug . Lihat error pada baris berapa. Pada template yang saya ujicoba ada pada line 580. Cari kode error pada line 580. (Seperti contoh, error pada tag img) Selamat ber validasi ria.. dan selamat datang di dunia AMP :D
1 comment
Read more

Tutorial Cara Memunculkan Thumbnail pada AMP HTML Blogger Template

Image
Sebagaimana kita ketahui, bahwa tag img pada AMP HTML berubah menjadi amp-img . Apabila kita menuliskan pada postingan seperti ini : <img alt='gambar' src='url-image'/> maka akan mengakibatkan error validasi AMP HTML. Penulisan yang benar seperti disini yaitu : <amp-img src="url-image-disini" width="1080" height="610" layout="responsive" alt="AMP HTML"></amp-img> Image akan muncul dengan baik pada postingan. Akan tetapi tidak akan muncul pada thumbnail di halaman utama / homepage. Untuk mengakalinya, agar image muncul pada Homepage tambahkan tag noscript sehingga kode menjadi seperti ini : <noscript> <img alt='gambar' src='url-gambar-anda'/> </noscript> Selamat mencoba...
1 comment
Read more

Tutorial Cara Penulisan Kode AdSense pada AMP HTML Blogger Template

Image
Untuk memunculkan kode AdSense, pada template sobat harus sudah terdapat JavaScript untuk AdSense. Sebetulnya kode ini support untuk berbagai penyedia jasa iklan. Akan tetapi saya hanya akan memberikan tutor tentang Google AdSense. Kode ini harus terdapat di tag head . <script async='async' custom-element='amp-ad' src='https://cdn.ampproject.org/v0/amp-ad-0.1.js'/> Kode untuk menampilkannya (contoh unit iklan ukuran 300x250) <amp-ad width="300" height="250" type="adsense" data-ad-client="ca-pub-2005682797531342" data-ad-slot="7046626912"> </amp-ad> Layout yang support: fill , fixed , fixed-height , flex-item , nodisplay , responsive Untuk ukuran lainnya silahkan di sesuaikan. Apabila unit iklan responsive, silahkan tambahkan layoutnya.
1 comment
Read more

Tutorial Cara Penulisan image pada AMP HTML Blogger

Image
amp-img AMP HTML Untuk image, tidak diperlukan JavaScript khusus, sudah cukup dengan JS AMPHTML secara umum. Ada perbedaan cara penulisan image dari biasanya. Kode untuk image: <amp-img src="url-image-disini" width="1080" height="610" layout="responsive" alt="AMP HTML"></amp-img> Layout yang support: fill , fixed , fixed-height , flex-item , nodisplay , responsive Gunakan srcset untuk menentukan gambar sesuai ukuran layar. Kodenya seperti ini <amp-img src="https://ampbyexample.com/img/amp.jpg" srcset="https://ampbyexample.com/img/amp.jpg 1080w, https://ampbyexample.com/img/amp-900.jpg 900w, https://ampbyexample.com/img/amp-800.jpg 800w, https://ampbyexample.com/img/amp-700.jpg 700w, https://ampbyexample.com/img/amp-600.jpg 600w, https://ampbyexample.com/img/amp-500.jpg 500w, https://ampbyexample.com/img/amp-400.jpg 400w, https://ampbyexample.com/img/amp-300.jpg 300w, h
Post a Comment
Read more

Tutorial Cara Embed Video YouTube AMP HTML Blogger Template

amp-youtube Untuk menyimpan video Youtube pada template valid AMP HTML untuk Blogger / Blogspot, pada tag <head> harus terdapat script amp-youtube seperti ini : <script async='async' custom-element='amp-youtube' src='https://cdn.ampproject.org/v0/amp-youtube-0.1.js'/> kemudian cara penulisan pada template / postingan seperti ini (ukuran di sesuaikan) : <amp-youtube width="480" height="270" layout=responsive data-videoid=" lBTCB7yLs8Y "> </amp-youtube> Kode lBTCB7yLs8Y adalah kode yang didapat dari URL Youtube. Contoh video dengan menerapkan kode di atas, seperti ini : Layout yang support: fill , fixed , fixed-height , flex-item , nodisplay , responsive Karena terbatasnya kemampuan browser mobile, maka tidak bisa auto play untuk amp-youtube ini.
Post a Comment
Read more