Blogger Templates Layouts Tutorials | Web Page Design Tutorials Home

How to Customize Blogger Header

Header Wrapper of Blogger

It's time to study the codes of the Blogger Header. Header Wrapper is the div layer that holds the Header.

/* Header
-----------------------------------------------
*/

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

Pay attention to the width and margin of Header Wrapper:

Width of Header Wrapper: 660 pixel

Margin of Header Wrapper: There is a 10 pixel margin at the bottom. It provides some space between the Header and the Contents below.

Blogger Header with Dreamweaver

Also pay attention to the border of Header Wrapper:

Border of Header Wrapper: 1 pixel width

Ah... This is the outer black border of the Header

Note: If you do not want the outer border, set the width to zero

Setting the width to zero will remove the outer border as shown below:

Blogger Header with Dreamweaver

Note:
You should wonder that there is no height set for the Header. The main reason is that it can be more flexible for all users. For example, some users may be using a long Title (TEST BLOG ONLY...........) that across two lines, some users may use a long description (DESCRIPTION HERE and HERE.......) that across a few lines. In both cases, the text will push the Header Wrapper down. However if you use a background image for the Header, this is better to set the height of the Header Wrapper.

This Blogger tutorial shows the style of Header Wrapper.

blogger layout tutorials