Senin, 17 November 2014

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...

Mengganti Warna Blog Untuk CSS Variable Definitions

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

Mengganti Warna Blog Untuk CSS Variable Definitions

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 :)

Mengganti Warna Blog Untuk CSS Variable Definitions Rating: 4.5 Diposkan Oleh: ana sriwahyuni

12 komentar:

  1. Harus teliti ya mba kalau mau edit Html css... salah sedikit bisa gawat..hehe. kalo dulu saya butuh seharian buat edit2 warna blog.. tapi sekarang kyaknya mudah ya, karena ada panduannya..

    BalasHapus
    Balasan
    1. iya mas fazri, dengan adanya perancang template blog lebih memudahkan dalam mengganti warna blog..

      Hapus
  2. makasih infonya,,saya praktekkan dulu :)

    BalasHapus
    Balasan
    1. sama-sama mas Bagus, terimakasih juga atas kunjungannya :)

      Hapus
  3. izin menyimak saja mbak ... infonya bagus ne mbak..

    BalasHapus
    Balasan
    1. silahkan mas Jailani, semoga bermanfaat :)

      Hapus
  4. Bermain kode CSS variable itu mengasyikan sekali kalau sudah lancar, kit abisa ganti warna sesuai selera kita ya Mba, sepertinya harus banyak belajar lagi nih kalau kodenya aja sudah beda di dalamnya dengan yang lain. he,, he,, he,, :D

    BalasHapus
  5. mksh bu ana tutorial tentang MENGGANTI WARNA BLOG UNTUK CSS VARIABLE DEFINITIONS sngat bermanfa'at sekali dan selamat pagi saja

    BalasHapus
  6. pagi2 sudah disuguhi ngoprek templte...tambah segerr ajah :)

    BalasHapus
  7. Wah nyerah dah. Untuk urusan CODING atau SCRIPTING saya sudah angkat tangan dah. Kalau perlu angkat kaki. Give up. Nyerah ,.

    BalasHapus
  8. Artilce nya sangat membantu dan bermanfaat

    BalasHapus
  9. Ini nih yang saya cari cari , saya langsung coba deh di TKP , makasih mba

    BalasHapus

Demi kenyamanan bersama, tidak boleh memasang link dalam bentuk apapun, komentar yang berisi link tidak akan diterbitkan
Terimakasih

Direktori

direktori weblogger
Direktori WeBlog Indonesia