Enter your email address:

Lastest posts

The structure of a Blogger template

Sponsored link
Blogger Template Design: Tutorial 1

Before designing a template, you must have an idea of what the basic structure of a template is. Generally, the actual structure of any templates are not exactly the same. But, by knowing the basic structure, you can easily get the ideas of how to tweak your existing templates, design a template, and how to change it into a different structure.

Some parts of the template structure are obvious from what you can see on most blogs: the headers, footers, and posts sections. But there are some sections (I'll call these sections blocks or containers afterward) that are not visible on the computer screen, but important HTML-wise to build a practical and proper working template.

To start off, a template structure basically contains blocks of containers that looks like this:tutorial
Going from the biggest to the smallest blocks:
  1. Body: the outer most block is the Body of your template (basically everything that the computer screen covers).
  2. Outer-wrapper: this container covers your whole template (the body is more like the outside of your template). In general, you build a wrapper to place a multiple of smaller blocks inside it. The most common blocks inside this Outer-wrapper is the Header, Content, and Footer.
  3. Header: this block is the top most part of your blog (the name is quite obvious). But inside the Header you will have other sub-blocks too - the Header Title block, the Header Description block, and others such as the Adsense banners, a menu bar, 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.
  4. Content: 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).
  5. Footer: 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.
  6. Main: the Main-wrapper 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 Page Element option.
  7. Sidebar: is the block that contains all your side widgets - About Me, Labels, Archive, Text, HTML, Adsense, etc. In a standard Blogger template, you will usually find only 1 sidebar - hence the 2-column template (Main and Sidebar). But it's actually easy to add multiple number of sidebars. The most common ones are 2 sidebars - or the 3-column template. You will see from these tutorial series that once you understand the template structure, it's actually easy to add and move the sidebars to the left or right of your Main container.
  8. Blog Post: this block contains the important stuff - your Posts Titles, Post, Post Author, Labels, etc.
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
        • Other widgets
      • Content-wrapper
        • Sidebar-wrapper (1,2,3...)
        • Main-wrapper
          • Date Header
          • Posts
            • Post Title
            • Post Content (or called Post Body)
            • Post Footer (Author, Labels, etc)
          • Comments
          • Feed Link
          • Other widgets (mostly ad units)
      • Footer-wrapper
        • Footer text (disclaimer, copyrights, etc)
        • 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.

Labels: ,

Translate to:


At 2/28/2008, Blogger Dan said...

this is the first place ive found a straight forward explanation of the layout - really useful!

At 5/29/2008, Blogger Eric said...

I have been looking something like this, thanks for sharing this.

At 6/02/2010, Blogger freeweb said...

Thank you so much for providing such great things, Wish you a successful future.

At 8/25/2010, Blogger darwin said...

Very nice blog, Thanks for sharing this post. Agriculture website templates Easy to download.

At 11/24/2010, Blogger Septian DC said...

I like it :D

Thanks for sharing! I want to make my own blogger templates :))

At 3/03/2011, Blogger produk elektronik casio said...

very important information for me.thanks

At 3/09/2011, Blogger royal said...

Thanks for sharing your ideas and thoughts, i like your blog and bookmark this blog for further use thanks again…Seo Services

At 3/25/2011, Blogger motogp said...

it's very usefull. i need it to develop new template

At 7/01/2011, Blogger Ashar said...

you are copied from

At 10/10/2011, Blogger kingcrossmedia said...

It is useful information about my Web Design London business and it really helpful for my business. It provide good services for promoting your business on the internet.

At 10/19/2011, Blogger Yuliya said...

oh, thank you very much!! this has been very useful, i'm new to blogging, and though i do have some web programming knowledge, i've never dealt with blogs.

At 11/24/2011, Blogger jhonblack said...

Very interesting and useful post, thank you for sharing this with us.Business & Consulting logo designs


Post a Comment

Thanks for your comment.

<< Home

Previous Posts

Cheap Hosting