Menyesuaikan Tag CSS untuk Tata Letak

Untuk menggunakan fitur Desainer Template bersama dengan CSS pada template blog Anda, terdapat beberapa panduan struktur yang harus diikuti. --- ## Menyiapkan Variabel Pada bagian `` kode template, Anda wajib menyertakan sepasang tag ` ... `. Deklarasi gaya CSS akan diletakkan di antara kedua tag tersebut, bersama dengan nama-nama variabel khusus yang mengintegrasikan desain Anda dengan halaman pengaturan **Font dan Warna** pada dasbor Blogger. ### Contoh Implementasi ```xml ... ``` > 💡 **Catatan:** Kode deklarasi variabel CSS yang diapit oleh tag komentar `/*` dan `*/` di atas tidak akan dirender atau ditampilkan secara langsung di halaman blog Anda. Blok komentar tersebut digunakan sebagai wadah untuk mendaftarkan variabel. Setiap font atau warna yang ingin Anda edit melalui tab "Font dan Warna" harus didaftarkan di sini dengan menyertakan atribut berikut: * **`name`** — Dapat terdiri dari huruf atau angka. Setiap nama variabel di dalam template Anda harus unik. * **`description`** — Deskripsi teks yang akan muncul sebagai nama opsi pada panel pengaturan "Font dan Warna". * **`type`** — Menentukan jenis variabel, yaitu bernilai `"font"` atau `"color"` (warna). * **`default`** — Nilai bawaan (*default value*). * Untuk **warna**, nilai harus berupa kode warna heksadesimal (contoh: `#FF0066`). * Untuk **font**, nilai berupa susunan spesifikasi terstruktur yang mengikuti format: `font-style font-weight font-size font-family` (gaya, ketebalan, ukuran, dan rumpun jenis font). --- ## Menggunakan Variabel Setelah variabel dideklarasikan di dalam blok komentar, Anda dapat memanggil nilainya di dalam kode CSS standar pada komponen `b:skin` dengan menggunakan format penulisan prefiks tanda dolar: **`$nama_variabel`**. ### Jenis Variabel yang Didukung Perancang template memiliki dukungan pengeditan langsung untuk kumpulan jenis variabel CSS berikut: * **Variabel Warna (`type='color'`)** — Otomatis menyediakan palet pilihan warna interaktif di panel perancang template. * **Variabel Font (`type='font'`)** — Otomatis menyediakan opsi daftar jenis font, ukuran, ketebalan (*weight*), atau tingkat kemiringan (*style*) di panel perancang template. ### Contoh Analisis Kasus Pada contoh kode di atas, terdapat variabel bernama `bgcolor` yang disetel dengan nilai *default* putih (`#fff`). Pada baris CSS di bawahnya, variabel tersebut dipanggil melalui perintah: ```css body { background: $bgcolor; } ``` Sistem akan otomatis menerjemahkan nilai tersebut sehingga latar belakang halaman menjadi putih. Keuntungannya, Anda atau pengguna template dapat mengubah warna latar tersebut kapan saja secara visual lewat panel "Font dan Warna" tanpa perlu menyentuh kode HTML/CSS lagi. > 📌 **Catatan Atribut Standar:** Anda tidak perlu membuat variabel untuk jenis atribut CSS lainnya yang tidak ingin diubah secara dinamis. Properti CSS statis tersebut dapat langsung ditulis seperti biasa (contohnya seperti penggunaan atribut `margin:` dan `padding:` pada selektor `body` di atas).