Layouts, Sections & Widgets - Blogger Theme Dev Course

The key to a user-friendly theme is making it configurable through Blogger's visual Layout editor. This is achieved by defining `<b:section>` tags in your theme, which act as containers for `<b:widget>` tags.

Defining a Section (`<b:section>`)

A section is a container in your layout where users can add, remove, and reorder widgets from the dashboard. Key attributes include `id` (must be unique), `class` (for styling), and `showaddelement` (set to `yes` to allow adding widgets).

Adding Widgets (`<b:widget>`)

You can pre-populate your sections with default widgets. Each widget needs a unique `id`, a `type` (e.g., `Header`, `Blog`, `HTML`, `Label`), and a `locked` attribute (optional, `true` or `false`). A locked widget cannot be removed by the user from the Layout editor.

How it Connects to the Dashboard

When you define a section in your XML, it appears as a droppable area in the "Layout" section of the Blogger dashboard. Any widgets you define inside it will appear there, and users can drag them between sections or add new ones, giving them control over the blog's structure without touching code.

Code Examples

xmlCreating a Header and Sidebar Layout

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<body>
  <!-- Header Section -->
  <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
    <b:widget id='Header1' locked='true' title='My Awesome Blog (Header)' type='Header'/>
  </b:section>
 
  <div class='content-wrapper'>
    <!-- Main Content Section -->
    <b:section class='main' id='main' showaddelement='yes'>
      <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
    </b:section>
 
    <!-- Sidebar Section -->
    <b:section class='sidebar' id='sidebar' preferred='yes' showaddelement='yes'>
      <b:widget id='Label1' locked='false' title='Categories' type='Label'/>
      <b:widget id='HTML1' locked='false' title='About Me' type='HTML'/>
      
      <!-- Conditionally Displayed Ad Widget -->
      <b:widget id='HTML2' locked='false' title='Sidebar Ad' type='HTML'>
        <b:includable id='main'>
          <!-- Only render this widget's content on post or static pages -->
          <b:if cond='data:view.isPost or data:view.isPage'>
            <div class='widget-content'>
              <h4>Advertisement</h4>
              <!-- User's ad code will be output here -->
              <data:content/>
            </div>
          </b:if>
        </b:includable>
      </b:widget>
 
    </b:section>
  </div>
</body>

Pro Tip

Use clear and descriptive IDs for your sections (e.g., `header`, `sidebar-right`, `footer-column-1`) to make the Layout editor intuitive for the end-user.

Exercises