Introduction
The layout of a Blogger blog is controlled by its template. Having an understanding of the basic structure of a template comes in handy when dealing with your Blogger blog. This article will take you through the main sections of a Blogger template explaining each section in very simple terms.The Outline
At the highest level, the template can be viewed as comprising three sections. They are:- the Header, which is the head element of the HTML document
- the Skin, which is contained inside the header and
- the Body, the body element of the HTML document
Shown below is a stripped off version of the code you will see, when you open the Edit HTML mode of the Layout editor. The 3 sections above are shown in red, green and blue respectively.
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html ...>
<html ...>
<head>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[/*
/* All the CSS goes in here */
]]></b:skin>
</head>
<body>
<!-- The columns and widgets go in here -->
</body>
</html>
<!DOCTYPE html ...>
<html ...>
<head>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[/*
/* All the CSS goes in here */
]]></b:skin>
</head>
<body>
<!-- The columns and widgets go in here -->
</body>
</html>
The Header
Header section has the usual items contained in the head of an HTML page. The title of the page is included here. When your blog's main page or an individual post page loads up, the piece of code data:blog.pageTitle will be replaced with the actual title for that page. The header also contains certain meta elements. For example, the Google Webmaster Tool uses a meta element to verify the blog ownership.The first two lines of the template carry some technical information which you don't really have to understand. However, for the sake of completeness, here's a brief description on them. The very first line in the blog declares that this template is an XML document. In fact, the template is an XHTML document, which is a type of an XML document. The next line is a DOCTYPE declaration and that tells the browsers the Document Type Definition (or DTD) that is applicable to the template.
The Skin
The skin is embedded inside the header. Understanding the skin section is vital for being able to tweak your blog's template. The skin, as the name suggests, defines the look and feel of your blog. In other words, it is the skin that carries all the styling (or presentation) and layout information of a blog.It is comprised entirely of a set of Cascading Style Sheet (CSS) declarations or rules. Each rule of CSS defines certain values that are applied to the different HTML elements such as the paragraphs ( the p element), headings (the h1, h2, ... elements) etc. A full explanation of CSS is beyond the scope of this article. For now just remember that it is the skin that controls whether hyperlinks in your blog should appear underlined or not (with the text-decoration property set to none) or whether your sidebar should have a border or not (using the border property), and so forth.
The Body
This is the placeholder for all the content of your blog. The blog's header (don't confuse this with the header of the HTML page), the main posts area, the sidebars and the widgets, all go inside the body. Note, however, that the body only defines which element contains which element or, in other words, which element is contained inside which element. This is the containment hierarchy of the blog. As explained above, the styling of all these elements are handled by the CSS rules defined in the skin.When you add a widget using the Add Page Element feature, it gets included in the body section. Again it is important to remember that the body of the template only has placeholders for the widgets, sidebars etc. The actual content is filled only when the blog loads up in a browser window. The contents are pulled from the Blogger's database and are sent to the browser when a visitor actually views the blog.
