Our Latest Posts

Understanding Blogger Templates

Understand the blogger template - The Blogger Guide.

Understanding Blogger Templates

The blogger template is an XHTML document that is rendered based on variables. These tutorials aim at helping to understand the blogger template and hence to experiment, learn and change it. Blogger template has mainly three types of variables one which controls the flow of the code, one which pulls data from the databases behind and the third are expressions. These variables are then distinguished with the help of the following XML namespaces. This one is the first in series of three tutorials.

This tutorial will mainly concentrate on the template basics and the b: namespace. The index for all tuts:

  • Blogger Template Explanation - Sections, widgets, includes, includes. b: namespace
  • Blogger Template Explanation - Data access. data: namespace elements.
  • Blogger Template Explanation - How to use the expression: namespace - customize links.

Before you start experimenting with your blogger template I will suggest you do two things. Create a sandbox blog that you should delete once you are done experimenting so that the URL is free for some other poor blogger. Now Download the current template of your blog i.e., you should backup both your widgets and the template file itself. You can search for how to do this on google or wait until I write one tutorial on that :).

To understand/experiment with your blogger template I will suggest don't do it on your blogger "Edit HTML" page. Use the template that you downloaded with some advanced text editor. I would recommend Notepad++ but you can use whatever you like to understand your blogger template.

The blogger template is an XHTML document based on http://www.w3.org/1999/xhtml specification. The following namespaces are used in the blogger template.


<HTML xmlns = 'http://www.w3.org/1999/xhtml'
xmlns:b = 'http://www.google.com/2005/gml/b'
xmlns:data = 'http://www.google.com/2005/gml/data'
xmlns:expr = 'http://www.google.com/2005/gml/expr' />

These namespaces will be used throughout the XML document to fetch and display data. So this tutorial is going to explain mainly the variables in the 'b' namespace. The variables in this namespace mainly control the layout and control flow of the template. This helps in placing the elements on your blog at certain locations and if-else conditions as well as loops. More about the namespaces later.

The template is mainly divided into sections. These sections will include widgets. Widgets will have includes. includes are useless unless you use them by using the include tag.

The Section Tag.


Section tag determines the division of your blogger layout. The section cannot contain any code directly. Only widgets are to be inserted inside it. Following is the format and attributes are supported by the section tag.

<b:section [attribs] >
</b:section>

Id (Required):- A name identifying the section must be unique. This id can be used to identify the section after the blogger rendering is done. These section tags will show up as div tags having the same id.

Class (Optional):- Common class names are 'navbar,' 'header,' 'main,' 'sidebar,' and 'footer.' If you switch templates later, these names help Blogger determine how best to transfer over your content. However, you can use different names, if you like. You can use them to stylize your content.

Max widgets (Optional):- The maximum number of widgets to allow in this section. If you don't specify a limit, there won't be one.

Shadow element(Optional):- Can be 'yes' or 'no,' with 'yes' as the default. This determines whether the Page Elements tab will show the 'Add a Page Element' link in this section.

Growth (Optional):- Can be 'horizontal' or 'vertical,' with 'vertical' as the default. This determines whether widgets within this section are arranged side-by-side or stacked.

The Widget Tag.


Widget Tags are included inside section tags. There are two ways of viewing the HTML code on the "Edit HTML" page. One is a simple form that gets displayed by default. The other is by using the "Expand Widgets" checkbox. In the simple form, the widgets are included inside the sections with the single tag format i.e., opening and closing tag in one.

<!--Simple form.-->
<b:widget [attribs] />

<!-- Expanded form. -->
<b:widget [attribs] >
</b:widget>

A widget may have the following attributes:


Id: (Required) It May contain letters and numbers only, and each widget ID in your template should be unique. A widget's ID cannot be changed without deleting the widget and creating a new one. Similar to the section tag's id, widget tags also get converted to div tags having the id the same as used here.

Type: (Required) Indicates what kind of a widget it is, and should be one of the valid widget types listed below.

Locked: (Optional) Can be 'yes' or 'no,' with 'no' as the default. A locked widget cannot be moved or deleted from the Page Elements tab.

Title: (Optional) A display title for the widget. If none is specified, a default title such as 'List1' will be used.

PageType: (Optional) Can be 'all,' 'archive,' 'main,' or 'item,' with 'all' as the default. The widget will display only on the designated pages of your blog. (All widgets display on the Page Elements tab, regardless of their pageType.)

The widget types that can be specified are BlogArchive, Blog, Feed, Header, HTML, SingleImage, LinkList, List, Logo, BlogProfile, Navbar, VideoBar, NewsBar.

The widget in the simple form will just show you the placement of the widget. But if you need to edit the widget itself, then switch to the advanced form i.e., Expanded widgets.

The Section Tag.


The includable Tag.


A widget is a collection of includable and typically a main includable. Includes as their name suggests are pieces of code that can be put together to avoid repetition. This includable then can be included in one more place. Apart from removing repetition the includable also help in understanding the structure of the widget. Includable tag is also part of b namespace. So it will have the tag in this manner.


<b:includable id='[some-unique-id]' [attribs] >
</b:includable>

The includable tag has the following attributes:


Id (Required):- A unique identifier made up of letters and numbers. Note: a widget must contain at least a single includable and the id for that must be main.

Var (Optional):- An identifier made up of letters and numbers, for referencing data within this section. The data will be referenced similar to the namespace i.e. if var='a' is used then the title in data can be referred to as a: title.

The include Tag.


The includable created above needs to be included in the widget for that we use the include tag. If your widget is having only a single includable then in that case the id of that includable should be main and for that, a separate include is not required. That single includable will be included by default. The include tag contains two attributes mainly name refers to the id of the includable and data refers to var of includable. The includable tag is self-closed and another closing tag is not required. The format is as shown.


<b:include name='[the-includable-name]' data='[the-expression-for-var]'/>

The attributes name and data:


Name (Required):- This name will be pointing to the includable which is to be included. There should be an includable with the id as this name.

Data (Optional):- Like a parameter is passed to function this data is passed to includable. It is a piece of data to pass on to the includable section. This will become the value of the var attribute in the includable.

We can have any name for includable but it must be unique for that widget. This includable can then be included in one or more places in the widget using the include tag.
Next, let's discuss two more tags from the "b" namespace. They are if / else and the loop.


The if / else Tag.
The if/else tag is displayed as shown.

<!-- Only if-->
<b:if cond='[some condn check]'>
[Then do this]
</b:if>

<!-- both if and else-->
<b:if cond='[some cond check]'>
<!-- [Then do this] -->
<b:else/>
<!-- [else do this] -->
</b:if>

From the code above the working of if and else would be quite clear. One thing to note is that the else tag is a self-closing one. To understand the condition see the following examples.


<!-- to check a boolean variable. -->
<b:if cond='data:useImage'>
<!-- [execute if the header for your blog is image instead of text] -->
</b:if>

<!-- to compare equivalence of two values-->
<b:if cond='data:blog.pageType == "item"'>
<!-- [True if the current page is an item page (post page).] -->
</b:if>

<!-- to compare non-equivalence -->
<b:if cond='data:displayname != "Fred"'>
<!-- [True if this is not Fred's display name.] -->
</b:if>

<!-- comparing greater than, less than-->
<b:if cond='data:post.numComments > 1'>
<!-- [True if the current post has more than one comment.] -->
</b:if>

They say for any language if you know to control the flow you are done with the basics. So for completing the basics of the blogger template we need to learn about if-else and a looping feature. One done One to Go. So let's discuss the loop feature now.

The Loop Tag.


This is also part of the "b" namespace. It behaves as any loop should i.e., for every element in some set of elements you can do something. For e.g., In a set of comments display each comment. If you are looking for customizing your comments display you may have to look into this loop. The usage will be more clear once you have a look at the syntax.


<b:loop var='some-identifying-var' values='set-of-something'>
<!-- [For every var in the values i.e., for every data in the set of data do something here] -->
</b:loop>

Now we are done with the basics, but one important thing remains - Displaying your data. Obviously, you just don't want to have a beautiful page without any data. You need to display some data. For that, we will have to learn about the data namespace.

Therefore data namespace contains the most important variables and if I mention it all here it would be too cluttered. I will write a separate article on that. And as you must know you learn more experimenting than reading. So get your coffees ready and start experimenting with the code.

You are more than welcome to add more help in the comments. Also if you want or have a better explanation add it up in the comments. If you have any doubts put them here. I would answer them if I know :).




0 Comments