Mengganti Warna Blog Untuk CSS Variable Definitions

Mengganti Warna Blog Untuk CSS Variable Definitions - Kemarin ada seorang teman blogger yang bertanya cara mengganti warna background blog untuk kode background-color:$headerBgColor yaitu mbak Imel D. Hafidania dengan pertanyaan seperti berikut ini:

"Mbak Ana, saya mau ganti warna font header di html editor, tapi di html, script nya tuh kyk gini: background-color: $headerBgColor;... itu apa maksudnya ya? soalnya isi html templatenya beda sama yg laen.. makasihh...

Beberapa template blog seperti yang terdapat didalam Blogger sendiri masih memiliki kode CSS Variable Definitions dan ada yang tidak memiliki atau tidak terpasang CSS Variable Definitions, misalnya template blog yang saya gunakan ini. Dengan adanya css definisi variable ini akan memudahkan dalam melakukan customisasi tampilan sebuah blog, khususnya untuk lebar, bentuk font blog, dan perubahan untuk warna blog, seperti warna background, warna teks dan warna yang lainnya. Dengan adanya CSS Variable Definitions ini, kita tidak perlu mengganti lebar blog dan warna blog secara manual dengan mengganti kode warna didalam CSS Template. Lalu bagaimana cara mengganti warna blog untuk CSS Variable Definitions ?

Misalnya pertanyaan yang diajukan oleh mbak +Imel D.Hafidania. Kode background-color: $headerBgColor; merupakan kode CSS Variable Definitions untuk Warna Background header blog yang jika ditulis kedalam bentuk CSS Template maka hasilnya seperti berikut ini:

.header {
background-color: $headerBgColor;
....
}

Jika kita atau mbak Imel mengganti mengganti warna Background untuk header blog secara manual dengan cara menghapus $headerBgColor menjadi kode warna maka tidak akan memberikan pengaruh apapun terhadap warna background header tersebut, malah yang terjadi adalah Header blog tidak akan memiliki warna

.header {
background-color: #444444;
....
....
....
}

Ingat! Kita tidak bisa mengganti Warna Background seperti kode CSS disamping jika didalam kode template blog sudah terdapat CSS Variable Definitions karena Kode CSS seperti disamping ini tidak akan menampilkan warna yang telah ditetapkan didalam kode definisi variable

Lalu bagaimana cara mengganti warna background untuk variable background-color:$headerBgColor tersebut?
Sebelum mengganti kode tersebut, sedikit saya jelaskan tentang Variable Definitions yaitu suatu cara yang digunakan untuk mendefinisikan jenis warna, ukuran lebar blog, jarak, atau bentuk font sesuai dengan keingininan untuk mengubah variabel-variable tersebut secara langsung didalam Dashboard Blogger tanpa harus mengganti kode CSS atau HTML didalam template blog

Dimana Letak Variable Definitions Tersebut?
Definisi variabel berada didalam kode template blog dan sobat bisa mengetahui atau membukanya di menu Template >> Edit HTML dan Variable Definitions barada setelah kode <b:skin><![CDATA[

Untuk template yang ada didalam dashboard Blogger hampir semuanya menggunakan Variable Definitions, sedangkan untuk template-template buatan para master Template ada yang memasangnya dan ada yang tidak. Jika blog sobat menggunakan Template dengan kode Variable Definitions didalamnya maka sobat harus bersyukur karena akan lebih memudahkan dalam melakukan perubahan tampilan blog tanpa harus menguasai atau mengganti kode CSS untuk template blog tersebut

Namun perlu di ingat juga, untuk kode Variable Definitions setiap blog memiliki variable yang berbeda juga namun tetap bisa diubah-sesuaikan dengan keinginan dengan cara seperti berikut ini:
Klik menu Template >> Sesuaikan atau lihat pada contoh gambar bergerak berikut ini dalam Mengganti warna untuk Judul Blog

Pada gambar diatas sobat sebenarnya sudah masuk kedalam Perancang Template dan panduan penggunaanya sudah saya jelaskan di Cara Menggunakan Perancang Template Blogger

Jadi untuk kode background-color: $headerBgColor; pada Perancang Template Blogger, pilih poin Latar belakang untuk mengganti warna Background header tersebut

Bagaimana Jika Pada Perancang Template Blogger Tidak Sesuai dengan Pengaturan yang ada di kode Variable Definitions Template?
Ganti kode warna yang terdapat pada background-color: $headerBgColor; yang ada di kode Variable definitions secara manual dengan masuk ke Edit HTML
Contoh: Untuk contoh kode CSSnya saya ambil dari kode template bawaan Blogger dan bukan milik mbak Imel

.Header .description {
  font-size: $(description.text.size);
  color: $(description.text.color);
}

Memiliki kode variable definitions seperti berikut:

<Group description="Blog Description" selector=".header .description">
<Variable name="description.text.color" description="Description Color" type="color"
default="#777777" value="#000000"/>
</Group>

Maka gantilah color value="#000000" sesuai dengan keinginan untuk mengganti warna font seperti pada contoh diatas. Jangan mengganti $(description.text.color); atau $headerBgColor; dengan kode warna karena tidak memberikan efek apapun, kecuali semua kode Variable Definitions didalam blog di hapus

Silahkan baca Cara menghapus variable definitions template blog

Hmmm.. intinya untuk mengganti warna blog pada template dengan CSS Variable Definitions, saya menyarankan lebih baik diganti secara manual saja karena saya sendiri lebih senang menggantinya secara manual seperti yang saya contohkan diatas. Namun jika tetap untuk menggunakan Perancang Template Blogger juga tidak apa-apa dan jika ada perubahan tampilan yang lain pada blog sobat jangan salahkan saya ya :)