Langkah-Langkah Menggunakan Frameworks AMP Dalam Mendesain Sebuah Tema Blogger
Amp framework telah diperkenalkan oleh Google beberapa tahun silam. Ini merupakan step-by-step saya lakukan untuk membuat template blogger menggunakan amp framework. Saya menggunakan template bike shop yang bisa diunduh melalui https://amp.dev/documentation/templates/.
Langkah pertama adalah menghilangkan kode xml pada tema blogger kecuali <?xml version="1.0" encoding="UTF-8" ?>, <!DOCTYPE html>, dan <html>...</html>
Setelah itu hapus atribut xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr' di dalam tag <html> dan ganti dengan atribut amp='' (Anda juga bisa menambahkan nilam amp pada atribut ini contoh: amp='amp').
Jangan langsung save! Tambahkan dulu dua kode penting berikut agar tidak muncul pesan error di editor tema:
<b:skin/>sebelum akhir dari elemen</head>, dan- elemen
<section>dibawah<body>
Sedikit penjelasan mengenai kedua kode diatas.
Tag <b:skin> merupakan pembungkus dari kode styling dari template blogger kita. Hasil perenderan dari tag tersebut adalah <style id='page-skin-1' type='text/css'>.
Sedangkan kode kedua merupakan isi dari blog kita nantinya. Di bagian <section> paling tidak harus ada atribut id. Saran saya setidaknya Anda bisa menambahkan widget Header agar mudah untuk mulai membuat template blogger menggunakan framework AMP ini.
Setelah itu tambahkan script awal dari amp framework <script async src="https://cdn.ampproject.org/v0.js"></script> didalam tag <head>. Jangan lupa atribut async harus disertai dengan tanda = atau equal. Jika tidak akan muncul pesan kesalahan ketika anda menyimpan perubahan yang dilakukan. Hasil akhir yang diminta lebih kurang <script async='' src="https://cdn.ampproject.org/v0.js"></script>
Setelah langkah-langkah diatas Anda lakukan, barulah Anda simpan perubahan tema tersebut dan memeriksa validitas dari framework AMP menggunakan fitur inspeksi dari peramban yang Anda gunakan.
Anda akan menemukan banyak error didalam fitur inspeksi. Langkah selanjutnya adalah bagaimana mengilangkan pesan error tersebut sehingga fase pertama dari membuat tema blogger dengan frameworks AMP bisa dilalui.
Ada tiga kesalahan yang akan muncul ketika melakukan debugging dengan menambahkan #development=1 diakhir alamat blog. Pertama berasal dari kode styling yang berasal dari <b:skin/>. Sebagaimana yang terlihat pada hasil perenderan yang terlihat diatas, kita harus membuat kode tersebut tidak menjalankan fungsinya sebagai kode styling dan HANYA menggunakan format styling yang diberikan oleh Framework AMP yaitu: <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
Ah iya.. pastikan setelah atribut amp-boilerplate ditambahkan dengan tanda equal (=).
Cara membuat hasil output dari <b:skin> menjadi komentar yang tidak akan dirender menjadi <style> adalah dengan menambahkan tanda <!-- sebelum tag b:skin tadi.
Setelah itu kita harus membuat kode javascript bawaan blogger tidak berjalan dalam tema yang menggunakan framework AMP. Kode javascript ini secara otomatis akan muncul sebelum tag akhir body (</body>). Cara membuat kode javascript yang otomatis muncul tersebut adalah dengan mengganti tag </body> menjadi <!-- </body> --> </body> (kode yang saya arsir coba diparsing menggunakan tool html parse yang online ya. Soalnya saya bingung juga membuat kodenya dengan mode HTML).
Terakhir lakukan hal yang sama dengan tag penutup head (</head>) karena nanti secara otomatis akan muncul tag link stylesheet tepat diatas tag tersebut. Kemunculan tag link stylesheet tersebut akan membuat tema AMP yang baru akan kita buat memberikan pesan kesalahan.
Ini link demo yang masih on progress (https://test-template-sederhana.blogspot.com/)
Sampai jumpa lagi dengan cara membuat tema blogger valid AMP, semoga saya bisa mempunyai keluangan waktu untuk menyelesaikan adaptasi template tersebut.
Posting Komentar untuk "Langkah-Langkah Menggunakan Frameworks AMP Dalam Mendesain Sebuah Tema Blogger"