Before deigning a template you must have a clear idea about the basic structure of a blogger template. All templates are not same but by knowing this you can easily edit or modify anypart of your blog.
Some parts of the template structure are obvious from what you can see on most blogs: the headers, footers, and posts sections. But a blogger template can be categorised as below :
Body
The outer most block is the Body of your template (basically everything that the computer screen covers). Background color or image and the font for your blog can be defined here.
Outer-wrapper
This container covers your whole template [the body is more like the outside part of your template]. In general, its a wrapper to place multiple smaller blocks inside. The most common blocks inside this Outer-wrapper are the Header, Content, and Footer.
Header-wrapper
This block is the top most part of your blog. But inside the Header you will have other sub-blocks too - the Header Title block, the Header Description block and others etc. So, to wrap all these sub-blocks inside one large container, the largest container in the Header section is usually a Header-wrapper that wraps everything inside.
Menu
This part is where you can add links in a horizontal block. Different types of menus with different colors can be added to your blog. This section appears just after the header.
Content-wrapper
Below the Header is the Content-wrapper - basically the most important container block of all. Immediately inside this wrapper are the Sidebar containers (1,2 or any number of sidebars) and the Main container (which contains your posts, comments, or some ads).
Main-wrapper
It is the outer most container in the Main section which goes inside the Content-wrapper. Inside this Main-wrapper are the Post block, Comment block, Date Header, and other widgets created from the Add Gadget option.
Blog Post
This block contains the important stuff - your Posts Titles, Post, Post Author, Labels, etc.
Sidebar
It is the block that contains all your widgets like About Me, Labels, Archive, Text, HTML, Adsense, etc. In a standard Blogger template, you will usually find only 1 sidebar as it is 2-column template (Main and Sidebar). But it's actually easy to add multiple number of sidebars. The most common ones are 2 sidebars in the 3-column template.
Footer
It is the bottom most container of your template. As in the Header section, you'll also need a Footer-wrapper to contain other sub-blocks in the Footer section.
One other way to see this structure is from the hierarchical point of view . Starting from the largest container to its sub-containers, the structure looks like this:
Once you understand this basic structure, it'll be easier to start learning about the structure of the Blogger template code. Learning the code structure is not about learning HTML or CSS, but more about how the template code is organized, which is pretty much like how the container structure is organized. It's surprising that even with little knowledge on web programming, you can customize your template quite a lot just by understanding the basic structure and some CSS language.
Some parts of the template structure are obvious from what you can see on most blogs: the headers, footers, and posts sections. But a blogger template can be categorised as below :
- Body - Outer Wrapper - Content Wrapper
Body
The outer most block is the Body of your template (basically everything that the computer screen covers). Background color or image and the font for your blog can be defined here.
Outer-wrapper
This container covers your whole template [the body is more like the outside part of your template]. In general, its a wrapper to place multiple smaller blocks inside. The most common blocks inside this Outer-wrapper are the Header, Content, and Footer.
Header-wrapper
This block is the top most part of your blog. But inside the Header you will have other sub-blocks too - the Header Title block, the Header Description block and others etc. So, to wrap all these sub-blocks inside one large container, the largest container in the Header section is usually a Header-wrapper that wraps everything inside.
Menu
This part is where you can add links in a horizontal block. Different types of menus with different colors can be added to your blog. This section appears just after the header.
Content-wrapper
Below the Header is the Content-wrapper - basically the most important container block of all. Immediately inside this wrapper are the Sidebar containers (1,2 or any number of sidebars) and the Main container (which contains your posts, comments, or some ads).
Main-wrapper
It is the outer most container in the Main section which goes inside the Content-wrapper. Inside this Main-wrapper are the Post block, Comment block, Date Header, and other widgets created from the Add Gadget option.
Blog Post
This block contains the important stuff - your Posts Titles, Post, Post Author, Labels, etc.
Sidebar
It is the block that contains all your widgets like About Me, Labels, Archive, Text, HTML, Adsense, etc. In a standard Blogger template, you will usually find only 1 sidebar as it is 2-column template (Main and Sidebar). But it's actually easy to add multiple number of sidebars. The most common ones are 2 sidebars in the 3-column template.
Footer
It is the bottom most container of your template. As in the Header section, you'll also need a Footer-wrapper to contain other sub-blocks in the Footer section.
One other way to see this structure is from the hierarchical point of view . Starting from the largest container to its sub-containers, the structure looks like this:
- Body
- Outer-wrapper
- Header-wrapper
- Blog Title
- Blog Description
- Menubar
- Content-wrapper
- Sidebar
- Main-wrapper
- Posts
- Comments
- Footer-wrapper
- Footer text
- Other widgets
Once you understand this basic structure, it'll be easier to start learning about the structure of the Blogger template code. Learning the code structure is not about learning HTML or CSS, but more about how the template code is organized, which is pretty much like how the container structure is organized. It's surprising that even with little knowledge on web programming, you can customize your template quite a lot just by understanding the basic structure and some CSS language.
