Like what I’ve told you before in my previous post, “Saving widget below of the header”, I said that, there are still a lot of ways to saving widget or element, exactly below the header. Today, I will give you a new technique. With this, you will be able to make a new column, exactly below the header. Want to figure it out? Here we go……
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…
- Yahuuuuu…. 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. Final step…. It’s done (Hurray!!)
Codes that I have shown to you aren’t unconditional. That’s only the simplest codes, for making this tutorial. Feel free to change it and reconstruct it as much as you can. See you…
Post a Comment