Blogger Templates Layouts Tutorials | Web Page Design Tutorials Home

How to Customize Blogger Header

Align Header Title and Header Description to Left

By default, the Blogger Header and Title are aligned in the center. They can be aligned to the left (or right) easily by changing the text-align property of the Header.

#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: left;
color:$pagetitlecolor;
}

Here's the result:

Blogger Header Title and Description

Indent the Header Description

Most people would like to indent the Description a bit from the Title. This can be done by increasing the padding (e.g. from 20 pixels to 35 pixels).

Note: The style of Blogger Header Description is controlled by the "#header .description" tag.

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

Here's the result:

Indent Blogger Header Description

This Blogger tutorial shows how to align the text of Header Title and Header description.

blogger layout tutorials