Merubah dan Menambah Variable Definitions Font dan Warna

Panduan dan Tutorial BloGGeR Cara Modifikasi Blog :

Jika kalian menggunakan template bawaan Blogger, dengan cepat anda akan mengenali "Variable Definitions" yang terletak di bagian atas template. KODE ini berfungsi untuk pengaturan warna (color) dan jenis (family) font yang akan kita gunakan di seluruh halaman blog. Perubahan dilakukan dengan KLIK "Font dan Color (Font and Color)" saat kita berada di halaman "Tata Letak (Layout)" setelah dilakukan "Login ke Blogger (Login to Blogger)". Terbatasnya variabel yang dapat diatur font dan warnan-nya pada template bawaan blogger membuat kita tak mungkin menciptakan berbagai variasi warna pada blog sehingga terkadang membuat rasa kecewa karena beberapa bagian halaman blog kita sebenarnya ingin kita tampilkan dengan warna yang berbeda. Keterbatasan ini tentunya karena berbagai pertimbangan yang dilakukan oleh Blogger sebagai penyedia template, meskipun demikian janganlah masalah sederhana ini membuat kita larut dalam kekecewaan karena dengan mudah kita dapat merubah sekaligus menambahkan banyak variable yang baru dan tentunya dengan cepat pula penampilan blog dapat kita rubah setiap saat.

Cara Mengenali Variable Definitions :

- Login ke Blogger (Login to Blogger).
- Dasbor (Dasboard).
- KLIK Tata Letak (Layout).
- KLIK Edit HTML.

Setelah langkah ke-4 dilakukan maka kita akan melihat design blog kita yang di dalamnya terdapat KODE HTML.

KODE HTML Variable definitions berada di bagian atas template dengan bentuk KODE seperti di bawah ini :

/* Variable definitions
====================
<Variable name="bgcolor" description="Page Background Color"
type="color" default="#000" value="#000000">
<Variable name="textcolor" description="Text Color"
type="color" default="#ccc" value="#cccccc">
<Variable name="linkcolor" description="Link Color"
type="color" default="#9ad" value="#99aadd">
........
........
<Variable name="endSide" description="End side in blog language"
type="automatic" default="right" value="right">
*/

Sebelum melakukan perubahan pada template lakukan pengamanan terhadap template terlebih dahulu ! Caranya bisa anda lihat di sini !.

Cara Merubah dan Menambah Variable Definitions :

1. Pilih KODE CSS yang akan dirubah dengan variabel definisi baru.

Contoh --> Merubah KODE CSS pada syntax body

Contoh bentuk KODE Orisinil :

body {
       background: $bgcolor;
       margin:0;
       color:$textcolor;
       font: x-small "Trebuchet MS", Trebuchet, Verdana, Sans-serif;
       font-size/* */:/**/small;
       font-size: /**/small;
       text-align: center;
}

Contoh Bentuk KODE pada syntax body yang telah dirubah:

body {
       background: $bodybgcolor;
       margin:0;
       color:$textcolor;
       font: x-small "Trebuchet MS", Trebuchet, Verdana, Sans-serif;
       font-size/* */:/**/small;
       font-size: /**/small;
       text-align: center;
}

Perubahan pada syntax body harus diikuti penambahan atau perubahan "Variable Definition" dengan melihat apakah variabel definisi yang dirubah hanya digunakan untuk syntax dirubah saja ataukah juga digunakan untuk syntax yang lain.

Bentuk penambahan atau perubahan pada "Variable Definition" :

<Variable name="bgcolor" description="Page Background Color"
type="color" default="#000" value="#000000">
<Variable name="bodybgcolor" description="Body Background Color"
type="color" default="#000" value="#000000">

2. Pilih KODE CSS yang akan ditambah dengan variabel definisi baru.

Contoh --> Merubah KODE CSS pada syntax body

Contoh bentuk KODE Orisinil :

body {
       background: $bgcolor;
       margin:0;
       color:$textcolor;
       font: x-small "Trebuchet MS", Trebuchet, Verdana, Sans-serif;
       font-size/* */:/**/small;
       font-size: /**/small;
       text-align: center;
}

Contoh Bentuk KODE pada syntax body yang telah dirubah :

body {
       background: $bgcolor;
       margin:0;
       color:$textcolor;
       font: x-small "Trebuchet MS", Trebuchet, Verdana, Sans-serif;
       font-size/* */:/**/small;
       font-size: /**/small;
       text-align: center;
       border: 2px solid $bodybordercolor;
}

Perubahan pada syntax body harus diikuti penambahan atau perubahan "Variable Definition".

Bentuk penambahan "Variable Definition" :

<Variable name="bgcolor" description="Page Background Color"
type="color" default="#000" value="#000000">
<Variable name="bodybgcolor" description="Body Background Color"
type="color" default="#000" value="#000000">
<Variable name="bodybordercolor" description="Body Border Color"
type="color" default="#ffffff" value="#ffffff">

Catatan/Keterangan :

1. Kode html panduan dan tutorial ini berdasarkan kode pada template blogger lama!
2. Jangan lupa untuk KLIK Simpan Template setelah perubahan dilakukan.
3. Untuk mengetahui hasilnya, anda bisa mencoba melakukan perubahan warna pada blog dengan KLIK "Font dan Warna" kemudian melihat hasilnya dengan membuka blog.
4. Anda bisa merubah atau menambah berbagai "Variable Definitions" dengan Variabel Definisi baru dengan cara merubah atau menambah pada syntax (KODE CSS) dan pada "Variable Definitions".
5. Defaul dan value pada Variable Definition dapat diisi dengan KODE warna sembarang (atau akan lebih baik jika menggunakan warna utama blog).

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :

Update » January, 10, 2012

» Happy Blogging - gubhugreyot «