Before I installed the widget recent posts by label or category, I think need to put the widget where? Because the sidebar and footer of my blog is full, I finally took the initiative to create two new gadgets plus page elements under the column posts.
Well on this occasion, I will give you a tutorial to add two columns below the post column page elements.
Read Also : Add 4 Column "Page Elements" Above Footer
Well please follow the steps below:
Login to your account.
on the dashboard click >> "Template" >> "Edit HTML"
Then find this code or something similar:
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog type='Blog'/>
</b:widget>
</b:section></div>
If it is able to place the following code under the code </ b: section> 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='Column 1' type='Text'/>
</b:section>
<b:section class='sidebar' id='magazine-right' showaddelement='yes'>
<b:widget id='Text52' locked='false' title='Column 2' type='Text'/>
</b:section>
<div style="clear: both;"></div>
</b:if>
Until this point, you can see a preview of the template or the preview but is still located on the left column is not at the center position. For that you need to add another following CSS code to make both columns are in the middle position.
Look for the code]]> </ b: skin> and place the following code before the code]]> </ b: skin>
#magazine-left {
width: 45%;
float: left;
}
#magazine-right {
width: 45%;
float: right;
}
You can still add the CSS code above, for example, add borders etc, please creativity!
Do not forget to click preview or save the template to immediately see the results.
If you managed to follow every step of the above it on the layout you will see the following screen shoot post column as follows:
Thus tutorial add page elements under the column posts. Hope it is useful!
Read Also : Make Tab View Menu Without Edit HTML in Blogspot
