How To Add Two Columns in Top of blogger post

Posted by Lasantha Bandara File Under : change template, css, html

1.Log in to your dashboard--> layout- -> Edit HTML

2.Scroll down to where you see like this code.

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

3.Now add below code after <div id='main-wrapper'>  and before <b:section .

 
<b:section class='sidebar' id='magazine-left2' showaddelement='yes'>
<b:widget id='Text512' locked='false' title='Column 1' type='Text'/>
</b:section>

<b:section class='sidebar' id='magazine-right2' showaddelement='yes'>
<b:widget id='Text522' locked='false' title='Column 2' type='Text'/>
</b:section>

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

Look at the example below.

4.Now Find below code.

]]></b:skin>

5.Add below code before  ]]></b:skin>  tag.

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

6.Now save your template and you are done.It look like this.

3 thoughts on “How To Add Two Columns in Top of blogger post

  1. I'd like to know how to add two columns below blogger post. Can this be done?

  2. Yes,It can do easily.read this:

    https://www.bloggertipandtrick.net/2009/05/how-to-add-two-columns-below-your.html

  3. please i need to know how to add to columns below blogger header?

    that's my email please contact me

    coolboy91_2010@hotmail.com

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.