Today you are here to learn how to define or create custom variables in blogger.Have you ever heard of custom variables in blogger and what is its purpose? Don’t worry you are now here to learn about those very clearly.
What are Custom variables
Custom variables are those when defined allows us to use on various places like background, border, navigation etc and in turn which helps us to change our templates background color, navigation menu font etc via Blogger template designer > Advanced option which modifies the values of custom variables. By using custom variables we don’t need to modify any code. As you create many number of custom variables the more we can change color and fonts on every part of the template. It saves our time. 🙂
Get Started With Custom Variables in blogger
/* Variable definitions
Now you can add all the custom variables below this line and everything works fine.
How To create custom variable definations in blogger
Custom variables are created using CSS and added in header section of our template between <b:skin><![CDATA[ and ]]></b:skin> tags. There are two types of custom variables. They are
<Variable name="body.background.color" description="Background color" type="color" default="#FFFFFF" value="#FF8C55"/>
The above variable is a color variable which is used to change the background color of the template.Let me explain each term.
- The Green highlighted is the variable name.Here we can put any name you want but you are not allowed to use spaces instead i used ‘.’ symbol for convinience.
- The Orange highlighted is the description for the variable and tis description is going to appear in Blogger template designer.Here you can use space and give any description.
- The Pink highlighted is the used to define the type of variable.As it is a color variable we are using the type as color.
- The Red highlighted is used to assign a default value to the color variable which appears in the absense of custom color.
- The yellow highlighted is to provide a selected custom value to that variable.
<Variable name="main.font.type" description="Font Type" type="font" default="normal 12px Verdana, Geneva, sans-serif" value="normal 12px Verdana, Geneva, sans-serif"/>
The above variable is a font variable which allows to change font styles.
- The Green highlighted is the variable name.Here we can put any name you want abd spaces are not allowed.
- The Orange highlighted is the description for the variable which we can give any description and spaces are allowed.
- The Pink highlighted is the used to define the type of variable.As it is a font variable we are using the type as font.
- The Red highlighted is used to assign a default value to the font variable which appears in the absense of custom font.
- The yellow highlighted is to provide a selected custom value to that font variable.
Note:Here name of the variable is used in template code and description is going to appear in Blogger template designer and Advanced tab.
Now these custom variables are inserted inside <head> section within <b:skin><![CDATA[ and ]]></b:skin> tags.Just paste the custom variable code below <b:skin><![CDATA[.
Grouping the custom variables
We can also allowed to group the similar or related custom variables into a single category,so that we can through our confusion and makes our work easy. We can group custom variables like this.
<Group description="Main Color" selector="body">
<Variable name="topnav.background.color" description="Top Navigation Color" type="color" default="#1A1A1A" value="#1A1A1A"/>
<Variable name="midnav.background.color" description="Middle Navigation Color" type="color" default="#2E2E2E" value="#2E2E2E"/>
<Variable name="content.background.color" description="Content Area Color" type="color" default="#FFFFFF" value="#FFFFFF"/>
<Variable name="footer.background.color" description="Footer Area Color" type="color" default="#2E2E2E" value="#2E2E2E"/>
Here we are wrapping the custom varibles which are related within <Group> and </Group> tags. Let me explain the terms in it
- The Green highlighted is the description for the group.Here you can give any name andcan contain spaces.
- The Pink highlighted is the selector for the group and only applicable to a particular kind of selector. Here we can use any kind of selector such as #header,#menu etc.
Note:Grouping of variables is an optional step. It is just provided to makes things better.
Using The Custom variables
We now completed defining custom variables and its time to use in our template at desired locations.Let us take an example if i want to change my background color of Menu then i just use like this.
In the above code i used the color variable with its name and used a $ infront of it for correct results.We must to add $ symbol every time we use custom variables name.
Similarily we can define any number of custom varibles according to purpose and use them as shown above.
We can apply same method for fonts also like.
Modification of values of custom variables through template designer.
Now you have defined and used the custom variables in your template. To modify the values of custom variables with touching any code. Follow the following steps.
- First move to Blogger dashboard and click on Template.
- Now click on customise button and click on Advanced tab and now you can see your custom variable descriptions like Background color and Font Type as we defined above ad you can change color and font directly from the Advanced tab.
- After completing all the modifications click on Apply to blog