This tutorial will mainly concenterate on the template basics and the b:namespace. The index for all tuts:
- Blogger Template Explanation - Sections, widgets, includables, includes. b: namespace
- Blogger Template Explanation - Data access. data: namespace elements.
- Blogger Template Explanation - How to use expr: namespace - customize links.
Before you start experimenting with your blogger template I will suggest you do two things. Create a sandbox blog which 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 recomment Notepad++ but you can use whatever you like to understand your blogger template.
The blogger template is a 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 location and if-else conditions as well as loops. More about the namespaces later.
The template is mainly divided in sections. This sections will include widgets. Widgets will have includables. includables are useless unless you use it 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.
- maxwidgets (Optional) The maximum number of widgets to allow in this section. If you don't specify a limit, there won't be one.
- showaddelement(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 simple form which 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) 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 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 thier 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 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 includables Tag.
A widget is a collection of includables and typically a main includable. Includables as their name suggests are piece of code that can be put together to avoid repetetion. This includable then can be included in one more places. Apart from removing repetition the includables 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 atleast 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 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 attribs 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 a 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 peice 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 lets 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 blogger template we need to learn about if-else and a looping feature. One done One to Go. So lets discuss the loop feature now.
The Loop Tag.
This is also part of "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 dont 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 in here it would be too cluttered. I will write a separate article on that. And as you must know you learn more experimenting then 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 comments. If you have any doubts put them here. I would answer them if I know :).
