Blogger theme XML: sections, widgets, includables and data tags

A Blogger theme is an XML file with HTML inside. Four ideas explain most of it: skin, sections, widgets and includables.

The skin: your CSS and its variables

In the <head> of the theme there is a pair of <b:skin> tags. Your CSS goes inside, and so do variable definitions that connect parts of the design to Blogger's Fonts and Colors screen. A variable has four parts: name (letters and numbers, unique), description (the label shown in the screen), type (color or font) and default (for colours a hex code, for fonts a list like style, weight, size and family). In the CSS you write $name to use the value:

<b:skin>
  <style type='text/css'>
  /*
   * Variable definitions:
   *  <Variable name='bgcolor' description='Page Background Color'
       type='color' default='#fff'/>
   */
  body { background: $bgcolor; margin: 0; padding: 40px 20px; }
  </style>
</b:skin>

Text inside /* ... */ is not shown on the blog. You do not need variables for other CSS properties such as margin and padding.

Sections and widgets in the body

The <body> of a Layouts theme is made of sections and widgets. A section is an area such as a header, sidebar or footer. A widget is a page element: a list of pages, a blogroll, the posts themselves.

<b:section id='header' class='header' maxwidgets="1" showaddelement="no"> </b:section>

Section attributes: id (required, letters and numbers only), class (optional; common names are navbar, header, main, sidebar, footer; they help Blogger move content if you change themes), maxwidgets (the most widgets allowed), showaddelement (yes or no: whether the Layout page shows "Add a gadget" there) and growth (horizontal or vertical). A section can only contain widgets, so to add extra code, split the section in two.

A widget is one tag: <b:widget id="BlogArchive1" type="BlogArchive" title="Blog Archive" locked="false" mobile="yes"/>. Attributes: id (required and unique; it cannot be changed without deleting and recreating the widget), type (required), locked (cannot be moved or removed in Layout if yes), title, pageType (all, archive, main or item: where the widget shows) and mobile (yes, no or only). On the published blog, sections and widgets become <div> tags with the id you gave, so your CSS can use div#header.

Includables, loops and data

Inside a widget, <b:includable id='main'> holds its HTML. Every widget needs one includable with id main. Other includables are shown only if the main one includes them with <b:include name='post' data='p'/>. A <b:loop var='p' values='data:posts'> repeats its content for each item in a list, such as posts or comments. Values from Blogger are printed with data tags, for example <data:title/> or <data:post.title/>. Conditions use <b:if cond='...'>. In the XML file, a < in an expression is written <.

Rules that save you trouble

• The file must be valid XML: every tag closed, special characters written as entities.
• Keep the b:skin section and the Blog widget (the widget that prints the posts). A theme without them does not work.
• Edit one thing at a time, and keep a backup.
• Avoid non-ASCII characters inside b:skin CSS content: strings; use CSS escapes like \2726 instead. This is a practical lesson from experience, not from the help pages.

Checking a theme file without uploading

Because a theme is XML, a plain XML parser tells you whether the file is well formed before you upload it. A parse error names the line and column of the first problem. It does not prove that Blogger will accept the theme, but it catches the most common mistakes.

This is an independent guide. It is not connected with Google or Blogger. Blogger, AdSense and Google are names of Google LLC. The steps follow Blogger Help and AdSense Help as read on 13 November 2026; the Blogger screens change from time to time, so a menu may be named a little differently on your screen.