Blogger Ever

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!
Blogger

2013-2016 Copyright Blogger E\ver . Coded, managed and founded by Mohammad Hamza (@hamzadhamiya) . Hosted on Blogger and fonts used are Raleway and Open Sans.