In order to make a new column, we only need to put a little ‘spices’ like CSS code and HTML code in your template code. And this won’t be as hard as you imagine. Just follow my instructions below:
1. Login to Blogger with your ID.
Click Layout
Click tab Page Element. Look at your layout template structure. Usually it will be like this:
Now, we are going to make a new column exactly below of your header. Hehehe… feel nervous?
Okay then, click tab Edit HTML.
Click sentence Download Full Template, it is very important for you to backup this!
Copy the code below, then paste it before code ]]></b:skin>
#under_header{
margin:10px 0;
padding:1%;
width:98%;
}
Find out code which look exactly like this :
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidget="1" showaddelement="no">
<b:widget id='Header1' locked='true' title='test (Header)' type='Header'/>
</b:section>
</div>
Copy the code below, and paste it exactly after that code :
<div id="under_header">
<b:section class='header' id='underheader' preferred='yes'/>
</div>
Click SAVE TEMPLATE buttons, and wait until your template saved.
Click tab Page Element and your layout structure will be like this…
Now you already have an element which placed exactly below your header. Feel free to add any elements do you wanted to. Want some Google Advertise, or maybe some photos, it’s all up to you!
1. Login to Blogger with your ID.
Click Layout
Click tab Page Element. Look at your layout template structure. Usually it will be like this:
Now, we are going to make a new column exactly below of your header. Hehehe… feel nervous?
Okay then, click tab Edit HTML.
Click sentence Download Full Template, it is very important for you to backup this!
Copy the code below, then paste it before code ]]></b:skin>
#under_header{
margin:10px 0;
padding:1%;
width:98%;
}
Find out code which look exactly like this :
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidget="1" showaddelement="no">
<b:widget id='Header1' locked='true' title='test (Header)' type='Header'/>
</b:section>
</div>
Copy the code below, and paste it exactly after that code :
<div id="under_header">
<b:section class='header' id='underheader' preferred='yes'/>
</div>
Click SAVE TEMPLATE buttons, and wait until your template saved.
Click tab Page Element and your layout structure will be like this…
Now you already have an element which placed exactly below your header. Feel free to add any elements do you wanted to. Want some Google Advertise, or maybe some photos, it’s all up to you!
This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.
Conversion Conversion Emoticon Emoticon