Blogger Templates Layouts Tutorials | Web Page Design Tutorials Home

How to Customize Blogger Header

Blogger Header Title and Description

Before we customize the Header Title and Description, we need to know how the styles defined them.

The #header h1 tag define the styles or appearances of the Blogger Header Title.

#header H1 Tag for the Title

#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
}

The top Padding (15 pixels) and top Margin control the space in the top, and

The bottom Padding (0.25 em) control the space beneath it.

Blogger Header with Dreamweaver

By increasing the top Padding to 25 pixels, bottom Padding to 0.75 em and top Margin to 15 pixels, the effect will be shown as below:

Blogger Header with Dreamweaver

The #header .description tag define the styles or appearances of the Blogger Header Description.

#header Description

#header .description {
margin:0 5px 5px;
padding:0 20px 15px;
max-width:700px;
text-transform:uppercase;
letter-spacing:.2em;
line-height: 1.4em;
font: $descriptionfont;
color: $descriptioncolor;
}

The top Padding (0 pixel) and top Margin (0 pixel) control the space in the top, and

The bottom Padding (15 pixels) control the space beneath it.

Blogger Header with Dreamweaver

By increasing the top Padding to 10 pixels, bottom Padding to 25 pixels, the effect will be shown as below:

Blogger Header with Dreamweaver

We now knew how the CSS styles control the Header Title and Header Description. Let's customize the Blogger Header Title and Header Description in next tutorial.

blogger layout tutorials