Menggunakan Variable CSS di Template Blogger

Penjelasan mengenai CSS Variable, Implementasinya di Template Blogger sebagai alternatif Variable bawaan Blogger, dan beberapa tips terkait keduanya.

pengenalan variable css dan implementasinya di blogger

CSS Variables

CSS Custom Properties atau biasa disebut CSS Variables adalah sekumpulan entitas yang dideklarasikan oleh penulis kode CSS tersebut yang mengandung nilai tertentu agar dapat digunakan kembali di keseluruhan dokumen.

CSS Variable ditulis dengan notasi berupa double dash (--) sebelum nama variabelnya (color, border-color) diikuti dengan tanda : dan value atau nilai dari variabel tersebut (black, silver). Sedangkan untuk mengaksesnya menggunakan syntax var() yang didalamnya terdapat nama variabel yang akan dipanggil; contoh color:var(--color). Lengkapnya bisa dilihat pada potongan kode di bawah ini.
:root{
  --color:black;
  --border-color:silver;
}
button{
  color:var(--color);
  border:1px solid var(--border-color);
}

Blogger Custom Variable

Blogger sendiri juga memiliki custom variable yang bahkan sudah didukung oleh Fitur Desainer Tema Blogger (Blogger Theme Designer). Variable ini biasanya dideklarasikan di dalam tag <b:skin> ... </b:skin>, seperti pada potongan kode di bawah ini.
<Group description="Colors">
  <Variable name="main.colors" description="Main Colors" type="color" default="#424242" value="#424242"/>
  <Variable name="link.colors" description="Link Colors" type="color" default="#2196f3" value="#2196f3"/>
  <Variable name="link.hover.colors" description="Link Hover Colors" type="color" default="#989b9f" value="#616161"/>
</Group>
Untuk mengakses atau memanggil nilai dari variabel di atas, menggunakan syntax $(link.colors) di dalam tag <b:skin> ... </b:skin>.
main {
  color: $(main.colors);
}
a {
  color: $(link.colors);
}
a:hover {
  color: $(link.hover.colors);
}
Kode <b:skin> ... </b:skin> memiliki hasil render <style id='page-skin-1' type='text/css'><!-- ... --></style>.

Peringatan:
Mengaplikasikan CSS Variable dan menonaktifkan Blogger Custom Variable dapat menyebabkan fitur Blogger Theme Designer dan beberapa fungsi dasar Blogger yang lain tidak akan berfungsi dengan baik. Maka dari itu disarankan untuk mempertimbangkannya kembali.

Langkah Merubah Blogger Custom Variable menjadi CSS Variables

  1. Sebelum dimulai, pastikan sudah backup template yang akan dimodifikasi. Disarankan juga untuk mengedit template tersebut melalui text editor offline (VS Code, Sublime Text, dll), bukan di Editor Tema Blogger.
  2. Buka Backup tema tersebut ke Text Editor, buat salinannya.
  3. Lalu mulai dari pembuatan syntax pendeklarasian CSS variable berupa :root{...} di dalam tag <style/> yang baru atau bisa juga diletakkan di bawah kode <b:skin/>.
  4. Nama variabel didapatkan dari attribute name dari tag variable di bawah ini; sedangkan untuk value atau nilai variabel didapat dari attribute value. Nama variable yang memakai titik disarankan untuk diganti menjadi simbol dash (-).
    <Variable name="body.background.color" default="#000000" value="#000000"/>
  5. Masukkan semua nama variabel bawaan blogger ke dalam tag :root diatas dengan format --nama-variable:nilai-variabel;.
    Sehingga kurang lebih kodenya menjadi seperti ini;
    :root {
  --main-colors:#424242;
  --link-colors:#2196f3;
  --link-hover-colors:#616161;
}
  6. Setelah itu ganti semua kode variabel dari blogger di CSS yang berupa $(nama-variable) menjadi var(--nama-variable)
  7. Dan proses merubah Blogger Custom Variable menjadi CSS Variables telah selesai.

Tips dan Trik Implementasi CSS Variables

Tips ini hanya opsional, tidak diharuskan untuk menerapkannya secara keseluruhan.
  • Memodifikasi tag <b:skin> hanya pada Custom Variable milik Blogger saja dan tambahkan Condisional Tag.
    <b:if cond='data:view.isPreview or data:view.isLayoutMode'>
<b:skin>
<Group description="Colors">
  <Variable name="main.colors" description="Main Colors" type="color" default="#424242" value="#424242"/>
  <Variable name="link.colors" description="Link Colors" type="color" default="#2196f3" value="#2196f3"/>
  <Variable name="link.hover.colors" description="Link Hover Colors" type="color" default="#989b9f" value="#616161"/>
</Group>
</b:skin>
</b:if>
  • Menaruh seluruh CSS Template ke dalam Tag <style/> yang baru.
  • Mengkombinasikan Blogger Variables dengan CSS Variables. 
    <b:skin>/*
<Group description="Colors">
  <Variable name="main.colors" description="Main Colors" type="color" default="#424242" value="#424242"/>
  <Variable name="link.colors" description="Link Colors" type="color" default="#2196f3" value="#2196f3"/>
  <Variable name="link.hover.colors" description="Link Hover Colors" type="color" default="#989b9f" value="#616161"/>
</Group>
*/
:root {
  --main-colors:$(main.colors);
  --link-colors:$(link.colors);
  --link-hover-colors:$(link-hover-colors);
}
/* Masukkan Kode CSS lainnya di bawah ini */
main {
  color: var(--main-colors);
}
a {
  color: var(--link-colors);
}
a:hover {
  color: var(--link-hover-colors);
}
/*]]>*/</b:skin>
  • Menambahkan fitur Dark Mode di Blogger.
    Cara ini bisa menjadi alternatif pengimplementasian fitur dark mode di Blogger karena hanya menambahkan beberapa kode saja dan tergolong mudah.
    Contoh kode-nya seperti ini. 
    <b:skin>/*
<Group description="Colors">
  <Variable name="main.colors" description="Main Colors" type="color" default="#424242" value="#424242"/>
  <Variable name="link.colors" description="Link Colors" type="color" default="#2196f3" value="#2196f3"/>
  <Variable name="link.hover.colors" description="Link Hover Colors" type="color" default="#989b9f" value="#616161"/>
  
  <Variable name="main.colors.dark" description="Main Colors" type="color" default="#424242" value="#424242"/>
  <Variable name="link.colors.dark" description="Link Colors" type="color" default="#2196f3" value="#2196f3"/>
  <Variable name="link.hover.colors.dark" description="Link Hover Colors" type="color" default="#989b9f" value="#616161"/>
</Group>
*/
:root {
  --main-colors:$(main.colors);
  --link-colors:$(link.colors);
  --link-hover-colors:$(link-hover-colors);
}
[data-theme="dark"], @media(prefers-color-scheme:dark) {
  --main-colors:$(main.colors.dark);
  --link-colors:$(link.colors.dark);
  --link-hover-colors:$(link-hover-colors.dark);
}
/* Masukkan Kode CSS lainnya di bawah ini */
main {
  color: var(--main-colors);
}
a {
  color: var(--link-colors);
}
a:hover {
  color: var(--link-hover-colors);
}
</b:skin>
    Untuk detail tutorial terkait ini bisa membaca artikel tentang CSS Variable dan Dark Mode

Demikian tutorial dan penjelasan tentang cara menggunakan variable CSS di template Blogger dan beberapa tips trik terkait penerapannya, semoga bermanfaat.

Referensi:
[1] https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties

Posting Komentar