How To Making Blogger Template Part 6 ~ ilmu

This is the last topic of how to making blogger templates. Thus, we have discussed how to create a complete template. We hope you can understand it and apply it properly. In this post we will discuss the variable tag and group tag in blogger template.

Background

Previously we have discussed how to implement css in <b:skin> tag. However, the way it's still quite difficult for the beginner. Often times they change the template through the Template Designer tab. To be able to overcome this, it would require two tags again. Those are, the variable tags and group tags.

variable tag

This tag serves to change template formation through the Template Designer tab. Consider the following figure

picture above is an example of the page Template Designer. When you select Advanced, then you'll see the choices that serve to change the template automatically. The choices are generated by a collection varibale tag. In general, variable tags possess the following forms

<Variable name="name" description="description" type="type" default="default-value" value="current-value">

In the original templates from blogger.com, all options are on the page Template Designer is active. However, the template from a third party, not all of the choices are active. All depends on the conditions of the template design. Consider the following example

<Variable 
name="body.font" description="Font" type="font"
         default="normal normal 15px Arial, Tahoma, Helvetica, FreeSans,
 sans-serif" value="normal normal 15px Arial, Tahoma, Helvetica, 
FreeSans, sans-serif"/>
     <Variable name="body.text.color" description="Text Color" 
type="color" default="#333333" value="#333333"/>

Each value of the variable tag, must be preceded by a dollar symbol on the css code. Consider one example from the following code excerpt

body {
  font: $(body.font);
  color: $(body.text.color);
  background: $(body.background);
}

Group tag

As we have explained previously, if you want to create an area on the blog content, then you should add the division tag in the html code. Often times, the division tags inside the main tag division. In order, certain variables work in the main tag division, then we can use the group tag. In general, the form tag group is as follows

<Group description="group description" selector="css selector"></Group>

Consider the following example

<Group 
description="Page Text" selector="body">
     <Variable name="body.font" description="Font" type="font"
         default="normal normal 15px Arial, Tahoma, Helvetica, FreeSans,
 sans-serif" value="normal normal 15px Arial, Tahoma, Helvetica, 
FreeSans, sans-serif"/>
     <Variable name="body.text.color" description="Text Color" 
type="color" default="#333333" value="#333333"/>
   </Group>

the above code works on the following html code

<body>

....

</body>

ilmu