Thursday, January 1, 2009

HOWTO: Add More Gadgets

First of all let me wish you a Happy New Year on this very first day of the year 2009. Today I will be presenting a simple, but useful tip on modifying your template to add more gadgets.

In a default Blogger template you can add gadgets only to the sidebars and the footer. For example, the following image illustrates the Page Elements view of a default Minima template.

As you can see, the “Add a Gadget” (or widgets as they are called sometimes) button is available only at the sidebar and the footer.

But these aren’t the only places where you can add gadgets in a Blogger template. With a simple modification of the template code, you can enable gadgets in several other sections. In this article we’ll see how.

If you view your template’s code using the Layout -> Edit HTML option, you can see several code elements enclosed in <b:section>…</b:section> tags. A b:section element defines a major section of your template such as the Header, Posts column etc. These elements have two optional attributes (or properties) called showaddelement and maxwidgets. The first property controls whether a given section should display the “Add a Gadget” button or not, and the maximum number of widgets for that section is defined by the second property.

For example, the default values for the Header section are as follows.

<b:section class='header' id='header' maxwidgets='1'

Gadgets in the Header section can be enabled by simply changing the value of the showaddelement property to ‘yes’. Absence of the maxwidgets property implies that there is no maximum limit, so removing that property is the easier thing to do.

Therefore, by changing the above code line to this:

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

your Page Elements view will change to the following.

The cross column (an invisible, horizontal column separating the Header and the content columns) and the Posts column are two other sections that can be modified as above, giving you more options in placing gadgets. The following code snippets display the beginning of those two sections respectively.

<b:section class='crosscol' id='crosscol' showaddelement='no'/>

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