Complete guide to make a Blogger template designer for client by defining variables

Want to enhance the functionality of your Blogger's template? I got something that will beautify your template with unlimited colours and font options for your Blogger template.Pre made templates,provided by Blogger (officially) are well suited and sectionalized for template designer.However,changing layout width and all those template designer settings can't be added over your custom made templates.

Two template designer settings can be made in custom template.

1. Color
2. Font / Text

As I mentioned two different template designer settings.So lets start with some starting points.
The variables will be defined under comments in CSS,like this one:

<b:skin><![CDATA[ //

/* Variable Definitions

All the variables will be executed here......*/
 ...

//]]></b:skin>

Secondly,every variable have the following attributes (required).

• name - It is a unique name that has been given,it unique for every variable but can be use in many times in several places.It can contain number and letters.
• description -  It can contain spaces too,it appears in the template designer.
• type - There are two possible values,font and color.
• default - this attribute contain the default value of the variable.

Color

Color is one of the most important setting and can provide us various color schemes under one template.So how can you make a setting of color by defining variable.

<b:skin><![CDATA[ //

/* Variable Definitions

<Variable name='header.background' description='Header Background' type='color' default='#00bfff'/>

*/
.header{
background:$(header.background);
border:2px solid #ddd;
}
//]]></b:skin>

However,when you will save and change the value from the template designer,you will find one more attribute is added that is value that will show the current value but no need to touch that,it is automated.Secondly,the value of the default attribute should be hexadecimal (example : #fff) .

Font

For fonts the procedure will be same but the value for the default will be changed.The value will be in a format of 

font-style font-weight font-size font-family

font-style: normal / italic / bold
font-weight: from 100 to 1000 (depends on font you use).
font-size:any value with a suitable unit (eg : 14px)
font-family: name of font

So what will be the variable for font:

<b:skin><![CDATA[ //

/* Variable Definitions

<Variable name='header.font' description='Header Font' type='font' default='normal 400 14px sans-serif'/>

*/
.header{
font:$(header.font);
border:2px solid #ddd;
}
//]]></b:skin>

Same will be case here,a attribute of value will be created after changing the value form template designer.

Why to create variables?

Some people do ask me why it is better to have a template designer as I can change my CSS on my own?

The template designer best suits to them who can't be attached with one color scheme,like whether their moods changes and they can change the color scheme.

Secondly,those who sells their template or made specially for clients,I strongly suggest them to make template designer,it will help client in future to edit and mould the template according to its need.

Still have something add in comments!