Create Extra Column Below Blog post

1. Login your blogger account, click Customize.

2. Navigate to Page Elements >> Edit Html Template.

3. Search for the following code in your template:

<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>

4. Once you have found this section in your template, you will need to copy and paste the following code just after the closing </b:section> tag and before the closing </div>

<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='Test Title 1' type='Text'/>
</b:section>

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

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

example :

<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>

<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='Test Title 1' type='Text'/>
</b:section>

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

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

</div>

Now that we've added the code required for our new widget sections, we need to add some styling code to ensure they appear side by side.

5. For this, locate the closing </b:skin> tag in your blog's template. Just before(above) this tag, you should paste the following section of code:

#magazine-left {
width: 45%;
float: left;
}
#magazine-right {
width: 45%;
float: right;
}

6. Save. Done, then preview your template.