ADDING 2 COLUMN WIDGET SECTION BELOW POST ON BLOGGER-MAGAZINE STYLE

To add 2 column widget section below post on blogger we will need to insert some html codes inside the html section of your blog template.

Here`s how...

1. Go to Design tab and click it >Go to Layout> Edit Html. Be sure to back-up your template first before clicking the edit html.
2. When you have already open the edit html, please do not tick on the expand widget section. Press and hold CTRL-F until the search box appears on the upper right corner.
3. Then search for the following lines of 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>

this might look different to some other blog template such as <div id='main'> or <div id='content'> instead of <div id='main-wrapper'>.

4. once you have found it then insert the below code just after the </b:section> and before </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>

5. then locate ]]</b:skin> tag in your blog`s template. then paste the below code before ]]</b:skin> tag.

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


Preview your template and if you`re happy enough just save it!:)