How to customize the appearance of your Blogger Blog Header with Template Designer

Your blog's header is important as it is the first thing that visitors see and flexibility in customizing it's appearance will make your blog looks more attractive. It is very easy to to edit the font, color, and background of your Blogger Blog header with a few mouse clicks.

Step 1: Sign in to your blog
Visit Blogger Blog home page at: http://blogspot.com/ or http://www.blogger.com/ and sign in with your Google account.

Step 2: Go to 'Template Designer' page
When you sign in to your blog, you are presented with the main dashboard. You can click Design link under your chosen blog.

You can then click 'Template Designer' tab.

Step 3: Customize your blog's title
In your blog's 'Template Designer', click 'Advanced' -> 'Blog Title'.

On the right, you can easily change the font and color of your blog's title

Step 4: Customize your blog's description

You can also click 'Blog Description' link below the' Blog Title' link to edit the color of your blog's description.

By default, in the 'Template Designer' there is no option to change the font of your blog's description as the font of your blog's description is the same as the font of your blog's text. Exactly your blog's description font size = font size of the text x 140%. This can be noticed by going to your blog's HTML template and finding the following code:

 <Variable name="description.text.size" description="Description Text Size" type="string" default="140%" value="140%"/>
.....

.Header .description {
  font-size: $(description.text.size);
  color: $(description.text.color);
}

And the font style of your blog's text can be modified by visiting 'Page Text'.

If you would like to create an extra control for modifying the font style of your blog description in 'Template Designer', click 'Back to Blogger' -> Design -> 'Edit HTML'. Remember to back up your blog's template.

Search for the following code:

<Group description="Blog Description" selector=".header .description">
     <Variable name="description.text.color" description="Description Color" type="color"
         default="#777777"  value="#777777"/>
 </Group>

You can see that there is no line for the description.font. Add the following code to the <Group> tag:

 <Variable name="description.font" description="Font" type="font" default="normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>    

You code will look like the following:

<Group description="Blog Description" selector=".header .description">
 <Variable name="description.font" description="Font" type="font" default="normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/> 
 <Variable name="description.text.color" description="Description Color" type="color" default="#777777" value="#777777"/>
 </Group>

Also, locate the following code:

.Header .description {
  font-size: $(description.text.size);
  color: $(description.text.color);
}

As you can see, your blog's description font's size is based on the font's size of the blog posts.
   <Variable name="description.text.size" description="Description Text Size" type="string" default="140%" value="140%"/>

Therefore, replace the font-size: $(description.text.size); line with the following code:

font: $(description.font);

You code will look like:

.Header .description {
font: $(description.font);
color: $(description.text.color);
}

Return to your 'Template Designer'. Click 'Blog Description' link. Now you can see a separate control that can change the font of your blog description. And your blog description font does not depend on the font of your blog's text.

Step 5: Customize your header's background

To change the background of your header, click 'Backgrounds' link. Under 'Header Background' tab, choose a suitable background color.

Related Posts