Intro
Dituruti...AMP pasti pucat
Tak dituruti
AMP pasti rusak
Oh Begitulah... Nasib AMP
Jadi Gini
Kemarin, saya kirim pertanyaan ke Mbak Igniel lewat PM Facebook. Kalo nunggu, mungkin Mbak Igniel balesnya lama, sedangkan saya butuh jawaban yang cukup cepat.Daripada nunggu lama, saya coba menunjukan eksistensi saya dengan cara yang menurut saya paling simpel, lewat komentar. Jadi saya cari feed beranda Mbak Igniel yang bisa saya komen-in. Ketemulah satu post yang menarik buat saya komen, ini nih.
Intinya, postingan itu bahas soal Template Silegan AMP dari THEMESON yang katanya support Desainer Tema (kok Katanya? Lha kan saya gak punya). Jika benar, maka ini adalah template AMP Indo Pertama yang support fitur desainer tema blogger.
Ya! Template Blogger AMP yang sudah lahir sebelumnya, rata-rata pasti tidak mendukung Desain Tema blogger (koreksi kalau salah) karena dengan terpaksa akan memilih untuk membuat tag style baru ketimbang menggunakan
b:skin yangmana hasil rendernnya mengakibatkan template tidak valid AMP.Lewat komentar, saya kasih teori ke Mbak Igniel, kalo cara tersebut bisa dilakukan dengan cara memanggil nilai variable yang sudah dibuat dengan data:skin.vars
{...}, kemudian.......... baca komen yang saya tulis di postingannya Mbak Igniel lewat sini (kalo mau, wkwk)...Teori yang saya tulis emang bener, tapi salah.
Benernya, cara yang saya tulis memang bisa diterapkan untuk membuat template blogger AMP yang support Theme Designer layaknya Silegan AMP.
Salahnya, bukan seperti itu yang diterapkan oleh developer theme Silegan, dan cara yang saya tulis tidak efektif.
Memang saya gak ngerti kode asli template Silegan, tapi kalo berdasar hasil render template. Memang template ini tidak menerapkan seperti apa yang saya tulis dikomentar Fesbuk.
Ada yang aneh!
Anehnya template silegan mempunyai 5 tag style pembuka. Tapi, tag style penutupnya cuma 4.Saya bingung, gimana ceritanya! Kok bisa gini?!
Karna penasaran, saya langsung coba ngoprak-ngoprek template (hanya bagian style, khusunya b:skin). Gak lama, akhirnya nemu juga triknya. Trik supaya template blogger AMP bisa support desainer tema.
Caranya hampir sama dengan menghapus CSS Bundle blogger ketika mengedit bagian
b:skin // Kode yang ditulis dalam template, begini.
<!--<b:skin><![CDATA[-->
/*
<Variable name="keycolor" type="color" description="keyxolor" default="#000" value="#000000"/>
*/
<style amp-custom='amp-custom'>
a {
color: $(keycolor)
}
]]></b:skin>
// Hasil rendernya, begini.
<!--<style id='page-skin-1' type='text/css'><!--
// skin variable mu tak terlihat `kang piuw sorce`
-->
<style amp-custom='amp-custom'>
a {
color: #000000
}
--></style>| Background | Keterangan |
|---|---|
| Warna Hijau | Tag style template amp itu harus punya atribut amp-custom dengan nilai amp-custom (atau dikosongin juga bisa). Tapi masalahnya, hasil render b:skin tidak bisa di otak-atik lagi. Udah `makrik` alias paten dari sananya. Lucunya, saya pernah ngakalin buat nambahin attribut amp-custom ke b:skin pake b:attr. Pas nulis persis setelah b:skin, template saya ditolak, karena b:skin itu cuma mengijinkan teks biasa dan <![CDATA[]]>. Sedangkan masang di dalem <![CDATA[]]>, b:attr malah kerender sama persis seperti yang tertulis di dalem template. (Lha wong nulisnya juga di dalem area CDATA, wkwk).Jadi, ketika membuat template AMP, tag b:skin blogger harus diberi komentar, bahkan disembunyikan dengan kondusi isLayoutMode, kemudian membuat tag style baru yang sesuai dengan ketentuan AMP.Kalo begini, salah satu fitur blogger (theme designer) tidak bisa diterapkan karna theme designer hanya bisa digunakan untuk mengubah font, warna, dan ukuran jika CSS tertulis di dalam b:skin. Sedangkan AMP, tidak akan valid jika menggunakan b:skin. *simalakama |
| Warna Orange | Fungsinya untuk menyembunyikan variable skin yang sudah dibuat. Jadi, pas `kang piuw sorce` ngintip daleman templatemu, mereka gak bisa liat. Tapi, template yang kamu pake musti pake layout V3 + widgets V2 ya. Kalo masih pake versi lawas, variable skin yang udah kamu buat akan tetep keliatan atau dirender meski kamu sudah memberi komentar untuk variable skin tersebut. |
| Warna Biru | Karna tag pembuka skin blogger dimatikan dengan komentar HTML (kode hijau), kita harus membuat tag pembuka baru. Karna kasusnya mau pasang variable skin blogger supaya bisa menikmati fitur Theme Desainer di template blogger AMP, maka kita musti menulis <style amp-custom='amp-custom'> sebelum selector CSS pertama yang kamu buat. |
| Warna Ungu | Ini muncul otomatis, karya dari b:skin. Tidak usah dipikirkan, soalnya gabisa dihapus. Lagipula, imbuhan --> gak mempengaruhi validasi AMP, kecuali kalo dia ada setelah pasanganya, Si <!--, maka bisa jadi bencana buat template AMP!Jadi abaikan aja. Kalo ukuran css jadi lebih besar dari ukuran maksimal yang direkomendasikan AMP gara-gara imbuhan itu, minimalkan lagi penggunaan CSSmu, toh cuma sedikit kan, gak sampai 10 bita, pasti aman lah! |
Template AMP buatanmu tidak akan pucat dan lebih berwarna dengan adanya fitur desainer tema.