Ditulis oleh: Ditulis pada: 6/08/2019
Menggunakan Skin Blogger Hanya Untuk Halaman Layout - Skin blogger adalah salah satu elemen yang wajib ada di dalam HTML blogger. Namun keberadaanya menyebabkan error validasi HTML5 atau AMP HTML.
Untuk itu, kita gunakan skin blogger hanya untuk halaman layout, sehingga tidak akan menyebabkan error validasi HTML5 ataupun AMP HTML.
Skin Blogger
Apa sih skin blogger itu? Skin blogger adalah sebuah tag untuk CSS custom blogger dengan kode <b:skin> dan penampakannya pada HTML menjadi <style id='page-skin-1' type='text/css'>
Jika Anda sering kutak-katik edit HTML Blogger, maka Anda akan familiar dengan kode seperti berikut ini.
<b:skin><![CDATA[
...............
...............
...............
]]></b:skin>Dan jika kita lihat page source blog, maka akan terlihat seperti berikut ini.
<style id='page-skin-1' type='text/css'><!--
...............
...............
...............
--></style>Menyebabkan Error Validasi HTML5
Namun keberadaan skin blogger ini menyebabkan error validasi HTML5 untuk atribut type yang tidak boleh ada pada tag style pada kode yang dihasilkan skin blogger seperti berikut ini.
<style id='page-skin-1' type='text/css'><!--
...............
...............
...............
--></style>Dan karena jika menunggu perbaikan dari pengembang blogger mungkin entah kapan, untuk mengatasi error validasi HTML5 dari tag skin blogger ini adalah dengan merubahnya menjadi seperti berikut ini.
<style>
<!-- /*<b:skin><![CDATA[*/
...............
...............
...............
]]></b:skin>Sehingga tampilan pada HTML menjadi seperti berikut ini
<style>
<!-- /*<style id='page-skin-1' type='text/css'><!--*/
...............
...............
...............
--></style>Atau ada juga yang menggunakan trik berikut untuk validasi HTML5. Cara ini adalah menggunakan skin blogger hanya untuk style layout dan membuat tag style baru untuk custom CSS tampilan blog.
<style>
<!-- /*<b:skin><![CDATA[
css style untuk halaman layout di sini
*/]]></b:skin>
<style>
custom css untuk tampilan blog di sini
</style>Sehingga tampilan pada HTML menjadi seperti berikut ini
<style>
<!-- /*<style id='page-skin-1' type='text/css'><!--*/
css style untuk halaman layout di sini
--></style>
<style>
custom css untuk tampilan blog di sini
</style>Sampai di sini masalah error validasi HTML5 dari tag skin blogger sebenarnya sudah teratasi. Namun jika kita menggunakan AMP HTML, maka akan ketemu error lagi dari validasi HTML5 seperti di atas.
Error Validasi AMP HTML
Jika kita membuat AMP HTML pada platform Blogger, maka jelas akan menyebabkan error AMP HTML dari tag style yang dihasilkan dari skin blogger ini. Karena AMP hanya memperbolehkan menggunakan <style amp-custom='amp-custom'> untuk custom CSS.
Secara logika, kita bisa menggunakan kode berikut untuk mengakalinya.
<style amp-custom='amp-custom'>
<!-- /*<b:skin><![CDATA[*/
.................
.................
.................
]]></b:skin>Namun kita tidak bisa menggunakan trik validasi HTML5 di atas untuk mengakali error AMP dari skin blog karena akan ada error lain yang muncul yaitu tag HTML tidak boleh ada di dalam style CSS dari kode yang dihasilkan seperti berikut.
<style amp-custom='amp-custom'>
<!-- /*<style id='page-skin-1' type='text/css'><!--*/
.................
.................
.................
--></style>Untuk itu, pada AMP Blogger saya menggunakan kode berikut agar valid AMP.
<!-- /*<b:skin><![CDATA[
css style untuk halaman layout di sini
*/]]></b:skin>
<style amp-custom='amp-custom'>
custom css untuk tampilan blog di sini
</style>Sehingga hasil generate skin blogger tidak terbaca pada AMP seperti pada gambar berikut.
Namun saya terus kepikiran dengan trik di atas. Memang skin blogger tidak terbaca di AMP sehingga tidak menyebabkan error. Namun kode yang dihasilkan masih tampak janggal dan kurang bersih.
Kemudian saya mencoba menggunakan skin blogger ini hanya untuk halaman layout dengan menggunakan conditional tag untuk halaman layout. Dan ternyata berhasil, tema bisa di-save dan tampilan blog maupun tampilan layout tidak error dan tentunya valid AMP dan HTML5.
Dan trik ini bisa digunakan pada custom template baik untuk AMP maupun NON AMP.
Kode yang digunakan seperti berikut ini.
Untuk Non AMP
<b:if cond='data:view.isLayoutMode'>
<b:skin><![CDATA[
css style untuk halaman layout di sini
]]></b:skin>
</b:if>
<style>
custom css untuk tampilan blog di sini
</style>Untuk AMP HTML
<b:if cond='data:view.isLayoutMode'>
<b:skin><![CDATA[
css style untuk halaman layout di sini
]]></b:skin>
</b:if>
<style amp-custom='amp-custom'>
custom css untuk tampilan blog di sini
</style>Dengan itu, tag style hasil dari generate skin blogger di HTML blog tidak tampak, seperti pada gambar berikut untuk page sourcer Kompi Ajaib.
Semoga bermanfaat.