Core Blogger Tags

Learn about the essential b:tags that form the skeleton of any theme.

Blogger uses a special set of XML tags, prefixed with `b:`, to build themes. Understanding the main structural tags is fundamental to creating layouts.

<b:template-skin>

This is a newer, more structured way to handle CSS. It allows you to define CSS variables that can be customized via the Blogger Theme Designer. It also requires a CDATA block.

<b:section>

This is the most important tag for layout. It defines a container where users can add and arrange widgets in the Layout dashboard. We will cover this in detail in the next module.

<b:widget>

Represents a single widget (like "Blog Posts", "Labels", or "HTML/JavaScript") inside a section.

<b:includable>

A reusable snippet of code. You define it once with an `id` and can then call it from anywhere else using `<b:include name="..."/>`. This is extremely powerful for keeping your code DRY (Don't Repeat Yourself).

<b:include>

This tag is used to insert an `<b:includable>` snippet. It helps in breaking down large widgets into smaller, manageable parts.

Code Examples

xmlUsing b:includable and b:include
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!-- Inside the Blog1 widget -->
<b:widget id='Blog1' type='Blog' ...>
  <b:includable id='main' var='this'>
    ...
    <!-- Instead of writing post details here, we call another includable -->
    <b:include name='postDetails' data='post' />
    ...
  </b:includable>
 
  <!-- Define the reusable snippet -->
  <b:includable id='postDetails' var='post'>
    <div class='post-meta'>
      <span>By <data:post.author/></span>
      <span>on <data:post.timestampISO8601/></span>
    </div>
  </b:includable>
</b:widget>

Was this lesson helpful?

Have feedback, found an issue, or have a suggestion? Let us know!

Send Feedback