Kombinasi Skin Variable Definition dan :root Selector di Blogger

bungfrangki CSS HTML Trik Blogger Tutorial Blog Kombinasi Skin Variable Definition dan :root Selector di Blogger

Sebetulnya sudah lama saya ingin memposting trik ini. Hanya saja perlu sedikit bersabar sampai update tampilan Themeindie.com bernar-benar rampung. Mengingat trik kombinasi skin variable definition Blogger dan :root selector ini pertama kali saya terapkan disana.

Variable Definition merupakan salah satu markup default Blogger yang dipergunakan sebagai translator atas perubahan yang kita lakukan di Theme Designer Blogger.

Biasanya tersimpan di dalam <b:skin> atau <b:template-skin>.

Syntax:

<Variable name="body.background.color" description=" Backgrond" type="color" default="#ffffff" value="#ffffff"/>

Contoh pemanggilannya di dalam <b:skin> atau <b:template-skin>:

body {background:$( body.background.color)}

Contoh pemanggilan yang lain dan penerapannya:

<meta content='data:skin.vars.body_background_color' name='msapplication-navbutton-color'/>
<meta content='data:skin.vars.body_background_color' name='apple-mobile-web-app-status-bar-style'/>
<meta content='data:skin.vars.body_background_color' name='theme-color'/>

Sementara itu, :root selector merupakan buah pengembangan CSS3 yang mampu dan dapat digunakan untuk memilih semua elemen dari dokumen HTML.

CSS syntax-nya:

:root {
  css declarations;
}

Contoh:

<style>
:root {
  background: #ffffff;
}
</style>

Kita juga dapat menggunakannya memberikan value pada property yang sesuai, untuk tiap-tipa tag atau selector.

Contahnya:

<style>
:root {
  --color-white: #ffffff;
  --color-black: #111111;
}
</style>

Cara penerapannya:

<style>
body { background: var(--color-white); }
h1{color: var(--color-black); }
</style>

Alasan Menggunakan Kombinasi Variable Definition dan :root Selector pada Blogger

Adapun alasan berikut ini merupakan alasan pribadi. Jika ternyata alasan ini akan memunculkan kegaduhan di masyarakat, maka perlu ditegaskan bahwa alasan berikut ini datang dari diri saya pribadi.

Kurang lebih begini alasannya:

Menyimpan CSS di dalam <b:skin> atau <b:template-skin> sangat tidak menarik. Tampilan CSS-nya tidak berwarna-warni. Membuat mood saya drop 50%.
Sudah sangat nyaman menyimpan CSS di dalam <style> tetapi ingin menggunakan Variable Devinition untuk seluruh kondisi tampilan Blogger.
Tetap ingin menyembunyikan bundle code atau CSS reset stylesheet Blogger, tetapi juga ingin menggunakan Variable Devinition pada semua kondisi tampilan Blogger.
Tidak ingin menulis kode panjang yang sama secara berulang-ulang. Misalnya background gradient, font family dan lainnya.
Dan lain-lain.

Alasan-alasan itu terbilang negosiatif yaa, bahkan ada yang tidak nyambung.

Pokoknya yang terpenting adalah, kita ingin menyimpan kode CSS di dalam <style> tetapi juga bisa mengaktifkan fitur Theme Designer.

Mengingat, jika kita menyimpan kode CSS di dalam <style> maka input kode untuk Theme Designer menjadi tidak berfungsi.

Berikut penerapan triknya.

Cek dulu: Ketika Kode <head>, </head>, dan </body> Tidak ada pada Template Blog, Bagaimana Menemukannya?

Menggunakan :root Selector untuk Mengaktifkan Skin Variable Definition Theme Designer Untuk CSS di dalam <style>

Sebelum melangkah ke tutorial, alangkah baiknya diketahui terlebih dahulu aturan penamaan/penulisan sytax (sintaks) CSS. Perhatikan gambar berikut ini:

Menggunakan :root Selector untuk Mengaktifkan Skin Variable Definition Theme Designer di dalam <style>

Langkah 1:

Silahkan buat Variable Definition seperti biasa. Contohya seperti ini:

<Variable name="body.background.color" description=" Backgrond" type="color" default="#ffffff" value="#ffffff"/>

<Group description="Page Text" selector="body">
 <Variable name="page.text.font" description="Font" type="font"
 default="normal normal 16px -apple-system,BlinkMacSystemFont,'Nunito Sans','Segoe UI','Oxygen-Sans','Ubuntu','Cantarell','Helvetica Neue',sans-serif" value="normal normal 16px -apple-system,BlinkMacSystemFont,&#39;Nunito Sans&#39;,&#39;Segoe UI&#39;,&#39;Oxygen-Sans&#39;,&#39;Ubuntu&#39;,&#39;Cantarell&#39;,&#39;Helvetica Neue&#39;,sans-serif"/>
 <Variable name="body.text.color" description="Font Color" type="color" default="#444444" value="#444444"/>
 </Group>

   <Group description="Links" selector="body">
<Variable name="body.link.color" description="Link Color" type="color" default="#000" value="#000"/>
<Variable name="body.link.visited.color" description="Visited Color" type="color" default="#111111" value="#111111"/>
<Variable name="body.link.active.color" description="Visited Color" type="color" default="#aaaaaa" value="#aaaaaa"/>
<Variable name="body.link.hover.color" description="Hover Color" type="color"  default="#222" value="#222"/>
   </Group>

Langkah 2:

Nah, pada langkah 1 kita sudah membuat beberapa Variable Definition. Yang perlu diperhatikan adalah variable name. Karena itu yang akan kita gunakan pada langkah selanjutnya.

Jadikan name dari Variable tadi menjadi value pada CSS :root selector. Dan isian untuk property dibuat dengan format tertentu. Kira-kira penampakannya kurang lebih sebagai berikut:

:root{
   --body-background-color:$(body.background.color);
   --body-font-family:$(page.text.font);
   --body-text-color:$( body.text.color);
   --a-link:$(body.link.color);
   --a-visited:$(body.link.visited.color);
   --a-active:$(body.link.active.color);
   --a-hover:$(body.link.hover.color);
}

Simpan kode tersebut di atas kode ]]></b:skin>.

Catatan:
Property pada :root selector di atas sebetulnya bisa ditulis sesuka hati. Asalkan didahului dengan garis strip dua biji.

Perhatian:
CSS :root selector ini sebaiknya disimpan di atas kode ]]></b:skin> atau ]]></b:template-skin>, dan tidak perlu dikurung dengan tag conditional. Agar bisa digunakan pada semua halaman blog.

Langkah 3:

Saatnya memanggil CSS :root selector itu ke dalam <style>. Yang perlu diperhatikan dari langkah 2 di atas adalah property-nya.

Property-nya akan kita panggil menjadi value dengan format sebagaimana lazimnya. Contoh penerapannya sebagai berikut:

<style type='text/css'>
body {
 background:var(--body-background-color);
 font:var(--body-font-family);
 color:var(--body-text-color);
}

a, a:link {color: var(--a-link);}
a:visited {color: var(--a-visited) }
a:active {color: var(--a-active) }
a:hover {color: var(--a-hover) }
</style>

Langkah 4:

Klik tombol Simpan atau Save Theme.

Setelah itu, silahkan buktikan hasilnya dengan pergi ke Theme Designer, lalu ubah tiap-tiap variablenya.

Dalam kondisi tertentu, Anda harus menyimpan perubahan untuk melihat perubahannya.

Konklusi

Adapun syntax dari :root selector masih bisa dikembangkan dengan CSS property dan value lainnya. Silahkan bereksperimen dengan itu.

Demikian trik Blogger kali ini. Kita jumpa lagi di tips dan trik Blogger selanjutnya.

Mungkin ada yang perlu diluruskan, ditambahkan atau ditanyakan? Silahkan tulis di kolom komentar. Terima kasih!