Learn More

Tuesday, September 20, 2011

Section Tag For Blogger Template

In this post, we discussed about the basic tags are often used in the blogger template. We think this is important, bloggers have been on the air long enough, but still many of us are still confused about the tags in blogger template. We hope that with the existence of this post, blogger lovers can have a reference base of existing tags in Blogger template.

Before we proceed, we need to tell that we use a standard blogger template. However, remains essentially the same.


Every widget that is made should be put in the tag <b:section>. Each of <b:section> tag must end with a closing tag </ b: section>. Tag <b:section> also shows the location of the widget. For example, in the main, sidebar, header, or footer. Suppose we create a section in the main, then the tag is written <b:section class='main'>, when in the header then <b:section class='header'>. Occasionally, in a section, containing two parts. In this case, the class attribute is not enough, so it should be coupled with the id attribute. Suppose <b:section-contents id='sidebar-left-2-1'> and <b:section-contents id='sidebar-left-2-2'>, means in the left sidebar there are two sections.

We can also limit the number of widgets for each section, in order to do this, then we can add attributes maxwidgets. For example, we want to limit the number of widgets that exist in the header section, then writing of tag is <b:section class='header' id='header' maxwidgets="1">. If you do not provide specifications for maxwidgets, then the value of maxwidgets is not possible one.

Sometimes we have find the template, the widget component visible in the Page Elements tab, we can also do this simply by adding attributes showaddelement. Showaddelement attribute is an attribute logic, so there is only the value of "yes" or "no". If "yes" then the widget will be displayed in the Page Elements tab.

We can also set the location of a collection of widgets vertically or horizontally, just by adding attributes growth. Suppose we want to create widgets that are arranged horizontally on the left, then the writing of tagnya is <b:section-contents id='sidebar-left-1' growth='horizontal'>. Please note, that all the attributes of <b:section> described above, the id attribute is mandatory.
page element tab with explanation of each section
The picture above show example tags of <b:section> for each place. This example valid for blogger template standard. If you are using blogger from third party template, it still valid for basic understanding.

  1. is possible to add side-by-side widget under "Blog Posts" just like under the Sidebar in your screenshot?

    1. Of course mam. You can do that, if you are using original template from blogger, it easy, you can adjust it from your edit template. But, if you are using template from third party you need more experience in html and css and basic xml blogger. But don't worry, you can learn it from How to making blogger template

    2. can you show me how? because I really need this. thanks before.

    3. Hi mam. I see in here you are really need help with basic html, css, xml blogger. Fortunatelly, I have explained what you want about making side by side sidebar before, you can go to How to making blogger template part 3