Thursday, July 2, 2009

Basics of Blogger Template Structure

After digging through the Blogger help files I finally figured out what I think is the basics of the structure of a Blogger template. A Blogger template basically consists of regular HTML with special elements which the server will replace with content from the database. I have summarized the basic structure in a set of nested tables to better illustrate what fits where. Each box represents an element that must be put into the template as a unit. Comments about each element are in green under each element.


HTML (Any amount of HTML code of whatever type you like can go here, before the first <b:section> element.)

<b:section …>   (one or more)

<b:widget …>   (one or more)

<b:includable id='main'>   (required, only one)

Any mix of HTML and any of the following:



This is where the magic happens. The <data> elements are replaced with actual content from the Blogger database.


<b:loop var='identifier' values='set-of-data'>

[repeated content goes here]



<b:if cond='condition'>

[content to display if condition is true]


[content to display if condition is false]



<b:include name='IdOfExistingIncludable' data='i'/>

name attribute must match the ID attribute of one of the subsequent includables in this widget.

Value of data attribute is passed like a function parameter to the included-includable and is inserted anywhere the value of that included-includable's var attribute appears.



All the real work of bringing in the data from the Blogger database and arranging it is done inside the <b:includable> element.


<b:includable id='post' var='p'>

Same content allowed as in main includable.


var 'p' is replaced with value passed as data when this includable is included.




There can not be any HTML inside a <b:section> or <b:widget> element unless it is inside an <b:includable> element.


More HTML and/or sections.



  • You can include as much more HTML and or more <b:section> elements (as defined above) as necessary to complete the design of your template.
  • The <b:section> elements can be nested within HTML <div> tags or tables or whatever you prefer to use in order to position the <b:section> elements the way you want on the page.

Naturally, this post is not an attempt to explain everything about how Blogger templates work. However, I have yet to see any other description that lays things out graphically so that it is easy to see the whole thing at a glance. I hope this will be helpful for people who are having trouble putting all the pieces together.

This post is Copyright © 2009 by Grant Sheridan Robertson.


  1. This is a key piece of what I've spent days searching for. Thank you!!

  2. I do have to warn people that I have not delved into all this for a while. Google could have changed all this around completely, or just thrown it out the window with all of their latest updates. If anyone uses this information and has any feedback as to how well it still applies, I would appreciate seeing it.