Page Layout in Blogger Beta

If we look into the html-code of the Beta template, we see a structure that is completely different from the structure we used to know from our old templates.
This post explains the new structure.

Sections and widgets

Blogger Beta uses sections and widgets to structure the content of your Blog. A section is a part of your Blog-page that contains elements that, logically, belong together. Blogger Beta has 4 sections to work with:

• The header section, that contains your header (blogtitle and description)
• The main section, that contains your posts
• The sidebar section, that contains all your sidebar-stuff, such as profile, links, labels, blogroll, and gadgets
• The footer section, that contains all the things at the bottom of your blogpage

The Header section

Now let's look into the header section, as defined in our template:

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

This tells us that the header-section can contain only 1 page element (widget) and that you can't add page elements to the header of the blogpage. If you open the Template-tab of Blogger Beta and click on Page Elements, you can see that it is not possible to add page elements to the header of your Blog.
Now let us tinker with our header:

<b:section class='header' id='header' maxwidgets='3' showaddelement='yes'>

This tells Blogger that you can have up to 3 elements in your header section. Switch to the Page Elements tab to see how this works.

The Sidebar section

We will now look into the sidebar section.

<b:section class='sidebar' id='sidebar' preferred='yes'>
In the default setting, we can add as many page elements to the sidebar as we like. Now let's try to set the maximum number of sidebar elements to 5.

<b:section class='sidebar' id='sidebar' maxwidgets='5' preferred='yes'>

The position of the sidebar, left or right, is not in the code of the section, but is chosen in the css-style of the sidebar. This way there is a strict seperation between the 'code' (Blogger code and html-tags) on the one side and the layout on the other side. (In fact, if you hack in the body-part of your template, changing the layout only affects the layout, not the hacking in the body!).

The Main section

The main section contains your blogs post. As you can see in the code below, there is no limit to the number of widgets in this section, but you will not see the 'Add a page element' box in this section in the layout editor. You can however drag/drop page elements from your sidebar to the main section.

<b:section class='main' id='main' showaddelement='no'>

If you want to disable this drag/drop possibility, set maxwidgets to 1:

<section class='main' id='main' maxwidgets='1' showaddelement='no'>

The Footer section

The footer section is at the bottom of the page. It can contain as many widgets as you like. Ofcourse you can customize this with the maxwidgets setting.

<b:section class='footer' id='footer'/>