Basic web design Tutorials to Blogger Template for newbie.

Tutorial 1: Basic Structure of Blogger XML template:

This tutorial is for those who are new in blogging , make customize the Blogger template for better browsing experience in his/her own blog.

Blogger offer a ideal template system for web designer in the form of single template file and edit the system where changes can view in preview as they are made.If you are capable of well-designed CSS Base template , they can easily adopt the skill to make beautiful template.

In this article, I will introduce you to the key concepts of designing Blogger templates and provide links to useful resources where you can learn more about using and utilizing the features of this free blogging platform.

Basic Structure of Blogger Template file:

Blogger Template is a simple XML file which is similar with structure of regular HTML page.

The section contain the dynamic style sheet (CSS ) and java scripts functions /Links require for Blogger Template.

The section contain various nested data tag which generate the blog post and contain widget code in this section.

Tutorial 2: The section in Blogger XML Template:

It is similar to regular HTML , in this section where page header , dynamic style sheet and java scripts function / links are formed.

Page Header:

In this section contain the blog title as tag and blog description as and it automatically generate the Page Header by using tag: .

Dynamic Style Sheet Section :

In Blogger Template , there have a internal style sheet which enable the color of font and background to be change dynamically.

All other CSS statement are using the regular CSS formatting.

These dynamic variables are generated by the statements which appear between the and tags of the template, rather than between regular tags.

Color Variable:

type="color" default="#333" value="#333333">

Font Variable:

type="font" default="normal normal 100% Arial, sans-serif" value="normal normal 100% Arial, sans-serif">

How to add this variable in CSS :

body {
font: $bodyfont;
color: $textcolor;
}

The java Script section :

In blogger template , the java script is one method you can use to add interactivity in Blogger Template design . you use more java script function in Blogger Template .

In this template , you can add external java script form other source in the template using the tag: above the

tag in template.

Click on the next chapter in below link.