Add new layout below Header in Blogger

Adding new layout just below header in blogger is not so hard . You may have tried to add new sidebar in blogger.Similar to that you have to add some codes to your blog To create a new layout for adding a new page element in your blog.

Note : Please backup your template before you perform any blogger Hack.

First of all Goto your blog Edit Html Page and Add the following CSS code to the head section of your blog ie between <head> and </head> Tags .

#belowheader-wrapper {
width:800px;
margin:0 auto 10px;
overflow: hidden;
}

In the above code use the width equal to your Header wrapper.

Now search for the following lines of code .

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

Finally paste the following code just after the above code.

<div id='belowheader-wrapper'>
<b:section class='belowheader' id='belowheader' preferred='yes'/>
</div>

Now see the snapshots below

Before

After

comments

3 Responses to "Add new layout below Header in Blogger"

eLMoiZ said... August 7, 2008 at 12:28 PM sweet!
JB said... March 2, 2009 at 7:26 PM For some reason I can't find anything even remotely similar to the code in you second box. Can you help me identify exactly where I should put the second piece of code that I need to add?
Deathlord said... May 12, 2009 at 9:41 AM Thanks was searching the whole web for this :)

Speak Your Mind

Tell us what you're thinking...
and oh, if you want a pic to show with your comment, go get a gravatar!

We have been moved to http://www.bloganol.com/