Ahad, 19 Julai 2009

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>

0 ulasan:

Catat Ulasan