Membuat Custom Varible Definitions Semoga Template Blog Gampang Disesuaikan

Assalamu'alaikum wr wb, pada postingan kali ini kita akan mempelajari wacana CSS Variable Definitions yang berada pada template blogger. Variable definitions ini dapat kita temukan pada arahan xml template, biasanya berada di antara arahan <b:skin><![CDATA[ ... ]]></b:skin>. misalnya ibarat arahan di bawah ini.

/* Variable definitions    ====================    <Variable name="bgcolor" description="Warna Latar Belakang"              type="color" default="#fff" value="#ffffff">     ...    <Variable name="pagetitlefont" description="Blog Title Font"              type="font"              default="normal normal 200% Georgia, Serif" value="normal normal 200% Coming Soon"> */

Nah, fungsinya sendiri yaitu untuk mengatur pengaturan template  (misal untuk mengubah warna font, ukuran font, jenis font, dll) pribadi pada pengaturan template di blogger tanpa harus mengubah arahan xml templatenya.

Membuat Custom Variable Definitions

Di sini kita akan menciptakan 2 jenis variable definitions, yaitu untuk pengaturan warna dan pengaturan font.

Letakkan variable definitions di antara kode

/* Variable definitions    ==================== .... */ 

Variable Pengaturan Warna

Misalnya kita buat variable warna untuk mengatur latar belakang templatenya, kita dapat menuliskan kodenya ibarat ini

   <Variable name="bgcolor" description="Warna Latar Belakang"              type="color" default="#ffffff" value="#ffffff">

Penjelasannya:

• name="..." yaitu nama variablenya
• description="..." yaitu deskripsi variablenya yang nanti akan muncul di pengaturan template.
• type="..." yaitu tipe variablenya, color untuk warna, dan font untuk pengaturan font.
• default="..." yaitu niai defaultnya.
• value="..." yaitu nilai warna yang dipilih.

Sesuai contoh, alasannya kita akan menciptakan variable untuk mengatur warna latar belakang, maka kita dapat menerapkannya ibarat ini.

body {   background:$bgcolor; }

Dimana bgcolor yaitu nama variable yang kita buat, jadi untuk penerapannya kita bubuhkan simbol $ kemudian tuliskan nama variablenya.

Variable Pengaturan Font

Contoh kita akan menciptakan pengaturan font pada headernya, kita dapat menuliskannya ibarat ini

   <Variable name="headerfont" description="Header Font"              type="font"              default="normal normal 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif" value="normal normal 78% Arimo">

kemudian pada untuk menerapkannya, kita dapat menerapkannya ibarat ini

h2 {   font:$headerfont; }

Dengan ini kita tidak perlu mengedit arahan xmlnya, kita hanya perlu ke bab Template > Sesuaikan.

Ini yaitu hasil yang tadi di buat

Sekian dari aku pada postingan kali ini, terimakasih telah mengunjungi blog saya, dan semoga bermanfaat.

Silakan untuk berkomentar.

Wassalamu'alaikum wr wb.

Share this post