Add two extra widget area below post section

Sometimes we need an extra field in our blog template, let me show you how to add two extra section below your blog posts.

1. Backup your template. recomended

2. Go to layout tab "Edit HTML"

3. Search the following:

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>

the bold tag can be different on each template, maybe looks like

<div id='main'>

or

<div id='content'>

4. Between </b:section> and </div> (at the end of the script above), add the following:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:section class='sidebar' id='magazine-left' showaddelement='yes' >
<b:widget id='Text51' locked='false' title='New Section 1' type='Text'/>
</b:section>

<b:section class='sidebar' id='magazine-right' showaddelement='yes' >
<b:widget id='Text52' locked='false' title='New Section 2' type='Text'/>
</b:section>

<div style="clear: both;"></div>
</b:if>

5. Search and replace </b:skin> with the following:

#magazine-left {
width: 45%;
float: left;
}
#magazine-right {
width: 45%;
float: right;
}
</b:skin>

Then preview your template, you should see "New Section 1" and "New Section 2" side by side below the posts section.