How To Add Two Columns below blogger Header

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

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

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='YOUR BLOG TITLE (Header)' type='Header'/>
</b:section>
</div>

3.Now add below code between </b:section> and </div> .


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

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

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

Look at the picture below.

4.Now Find below code.

]]></b:skin>

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

#magazine-left3 {
width: 30%;
float: left;
}
#magazine-right3 {
width: 65%;
float: right;
}

Note : You can change values of width,as your choice.

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

0 comments:

Post a Comment

 

Support By Blogger