How To Define Variable in Blogger Template by CSS?

How To Define Variable in Blogger Template by CSS
define variable

Variable definition is really interesting for Blog designer. When a Blogger design a Blog they can manually add Color, Font and border code manually in each script, alternatively they can define variable first and add the custom variable definition around the script. This is really easy for Blog designer but hardest chapter for newbie. Because they become always confused about this variable definition. In this tutorial I will show you the simplest way to defining variable. But before that we should know why Blog designer define variable?


In Blogger template when you enter into Advanced customization option then you will see you can change the template color, Font, width and border easily. To do this just check any Blogger default template by go through following steps-

Step 1 Go to https://www.blogger.com and Sign in to your account

Step 2 From Blogger Dashboard click on ->Template ->Customize 

Step 3 And click on Advanced tab and see different options where you can change the Color, Font etc.


Blogger template designer

Actually this can be done if your variables defined in your Blogger template. But there are many new Blog designer those who define variables but don't use them. So in case of those template you can't change any Font or color after entering into Advanced tab. In the above image you have seen that you can alter the Font, color and many more and now look at the below image and see the variable Definitions on Blogger template. The variable definition contain at the top of the Blogger template.

Now I will show you how to add custom variable definition in Blogger template. Variable can be define single and also define Group wise. You can see the below image that here both single and group variables has been defined.

variable definitions

Single Variable Definition

In case Single variable definition we will define only individual things. Suppose to define Blogger template background I have use below variable definition.
<Variable name="bgcolor" description=" Body Background Color " type="color" default="#FEFEFE" value="#FEFEFE"/> 
Here I have given variable name bgcolor and given a description Body Background Color. By reading This description a use can easily understand that this variable used for template Body background. But you can define by your own language. Later I have give color code one is default (default="#FEFEFE" ) and another (value="#FEFEFE") is currently used in template. And whenever you change the color code from Advanced tab then only value="#FEFEFE"  will change but the default color will remain same.

advanced tab

How to use single variable definition?

After defining the variable we will use the variable in CSS script. Just like below. Here I have added $ sign + Variable name that means it will indicate the #FEFEFE color code. And display the color in Blogger template.
background-color:$bgcolor;

Group Variable Definition

We often define variables Group Wise. Suppose if we want to define Blog content's Background, Font and color then it won't be wise decision to define singly. Because then in Advanced tab you won't understand the defined variables under which elements. So defining variables as a group is ideal for easy recognition. The below example is for Group variable definition.
<Group description="Content Area" selector="#spice-box">
<Variable name="spice.font" description="Font Type" type="font" default="normal normal 12px Verdana, Geneva, sans-serif" value="normal normal 12px Verdana, Geneva, sans-serif"/>
<Variable name="spice.rong" description="Background Color" type="color" default="#FEFEFE" value="#FEFEFE"/>
<Variable name="spice.font.rong" description="Text Color"  type="color" default="#333333" value="#333333"/>                                        
</Group>
Here I have given the Group name by Content Area  thus in Advanced tab user can easily recognize. And Selector means a red dashed border will select the content area. Similarly for changing Font I have use spice.font as variable name. Also defined spice.rong for content background color and spice.font.rong for text background color.

How to use Group Variable Definition?

After defining the Group variable now it's time to add in CSS script. See the below script carefully and match the variable definition-
#spice-box{text-align:justify;width:1100px;background-color:$(spice.rong);margin:0 auto;font:$(spice.font);color:$(spice.font.rong);overflow:hidden;}
In above script instead of color code I have used defined variable background-color:$(spice.rong); and similarly for defining Font used font:$(spice.font); Also used color:$(spice.font.rong) for defining text color.

content area

Remember that in case of defining variable you must use a $ sign. For single word you can write the code $bgcolor but for multiple word you must add a (.)dot and third bracket like $(spice.font.rong) this.

I hope after reading this tutorial you have got a real time experience about variable definition. And how variables works after defining. If you have any more query then feel free to leave a comment below. Thank You. 
Go Up