Showing posts with label header. Show all posts

Add new layout below Header in Blogger

Posted by Deineshd on Saturday, June 07, 2008 · 3 comments

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

Remove blog Header and Use Image Instead

Posted by Deineshd on Friday, June 06, 2008 · 1 comments

Sometimes using blog header may not look your blog cool and you may like to use a cool header image in place of boring default header.If so then bloganol brings you the cool blogger hacks that removes blog header and you can use a cool header images instead of blog header.

First of all goto Blogger Edit Html Page and Search for the following line of code.

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

Now replace the above code with the following code in your template.

#header-wrapper {
width:800px;
margin:0 auto 10px;
border:1px solid $bordercolor;
display:none;
}

The above code hides your blog header.Now to use a cool image in place of header search for the following code in your template.

<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>

Now paste the following code just after the above code.

<a href="URL_OF_UR_BLOG"><img src="URL_OF_THE_IMAGE" alt="Home" /></a>

Now see the demo below.

Before

After

30 cool Blog Header background images

Posted by Deineshd on Monday, May 12, 2008 · 5 comments

These 30 header images are provided in three sizes . These images are provided in 900X200 , 950X200 and 800X200 Resolution.These header background are created by bloganol and some are of blogger Templates . However now the images are yours just Copy Image link source and Use any image that fit your blog header.