Menghapus Variable Definitions Template Blog

Menghapus Variable Definitions Template Blog - Pada artikel sebelumnya saya sudah membuat artikel tentang mengganti warna blog di Variable Definitions dan pada artikel ini yang merupakan artikel lanjutan, saya akan membahas bagaimana menghapus variable definitions template blog yang rata-rata masih digunakan untuk template-template baru atau pun terdapat pada template lama

Baca juga Cara mengganti warna blog di Variable Definitions

Apa itu Variable Definitions?
Pada artikel sebelumnya saya sudah menjelaskannya secara singkat yaitu, Variable Definitions adalah 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. Variable definitions berada didalam kode template blog dengan cara membuka menu Template >> Edit HTML dan Variable Definitions berada setelah atau sebelum kode <b:skin><![CDATA[

Bolehkah Menghapus Variable Definitios Template Blog?
Boleh-boleh saja dan tidak ada yang melarang meskipun template yang digunakan adalah template premium yang penting tidak menjual ulang atau membaginya secara gratis template yang telah dirubah atau diganti kodenya tersebut dan masih mencantumkan link kredit untuk sumber pembuat template tersebut. Untuk menghapus variable definitions yang ada didalam template blog harus mengetahui tentang kode CSS karena value untuk kode yang ada di CSS berada didalam kode yang diterapkan di Variable Definitions. Jika menghapus seluruh kode Variable definitions tanpa memperbaiki atau mengganti value yang ada di kode CSS maka tampilan blog akan berantakan karena didalam kode Variable definitions berbeda dengan kode yang ada di CSS karena value untuk kode CSS sudah terpasang atau sudah ditentukan didalam kode Variable definitions

Perhatikan contoh kode berikut ini
Pada kode dibawah ini merupakan kode value dari komposisi yang ada di kode body yang terdapat didalam Variable definitions yang meliputi Background, Jenis Font, Warna Font dan Jarak Letak pada layer atau Padding

<Group description="Backgrounds" selector=".body">
<Variable name="body.background.color" description="Outer Background" type="color" default="#66bbdd" value="#ffffff"/>
<Variable name="content.background.color" description="Main Background" type="color" default="#ffffff" value="#ffffff"/>
<Variable name="header.background.color" description="Header Background" type="color" default="transparent" value="transparent"/>
</Group>
<Variable name="body.font" description="Font" type="font"
default="normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 12px 'Trebuchet MS', Trebuchet, Verdana, sans-serif"/>
<Variable name="body.text.color" description="Text Color" type="color" default="#222222" value="#666666"/>
<Variable name="content.shadow.spread" description="Content Shadow Spread" type="length" default="40px" value="0"/>
<Variable name="content.shadow.spread.webkit" description="Content Shadow Spread (WebKit)" type="length" default="5px" value="0"/>
<Variable name="content.shadow.spread.ie" description="Content Shadow Spread (IE)" type="length" default="10px" value="0"/>
<Variable name="body.background.override" description="Body Background Override" type="string" default="" value=""/>

Dan dibawah ini adalah penerapan pada kode CSS untuk komposisi value pada body dengan menggunakan definisi variabel untuk value yang telah ditetapkan seperti kode diatas
body {
font: $(body.font);
color: $(body.text.color);
background: $(body.background);
padding: 0 $(content.shadow.spread) $(content.shadow.spread) $(content.shadow.spread);
$(body.background.override)
}

Perhatikan pewarnaan pada masing-masing kode Variable dan Value warna yang telah saya tandai untuk Variable Definitions dan pada CSS diatas. Jika Variable definitions ingin di hapus maka harus mengganti variabel dari masing-masing value yang ada didalam CSS

body {
font: $(body.font);
color: $(body.text.color);
background: $(body.background);
padding: 0 $(content.shadow.spread) $(content.shadow.spread) $(content.shadow.spread);
$(body.background.override)
}

menjadi

body {
font: normal normal 12px 'Trebuchet MS', Trebuchet, Verdana, sans-serif;
color: #666666;
background: #ffffff;
padding: 0 0 0 0;

}

Untuk mengganti value pada CSS tidak harus menyesuaikan dengan value yang ada di Variable definitions tapi bisa diganti sesuai dengan keinginan Anda, namun tetap memperhatikan value pada layer (margin atau padding) yang diberikan pada masing-masing elemnent. Untuk mengganti value pada CSS agar tidak mengganti secara satu per satu, gunakan Notepad++ dan lakukan replace pada masing-masing kode value yang akan ditetapkan

Itulah cara menghapus variable definitions pada template blog, intinya hapus semua kode variable Definitions yang ada didalam template blog dan ganti masing-masing variable yang ada di CSS dengan kode value yang diinginkan. Terkahir sebagai catatan, jika Anda menghapus Variable definitions template blog kemungkinan besar code CSS template blog akan semakin bertambah. jadi pertimbangkan dahulu sebelum menghapus definisi variabel template blog ini

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 Anda 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 Anda menggunakan Template dengan kode Variable Definitions didalamnya maka Anda 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 Anda 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 Anda jangan salahkan saya ya :)