Beginner's Guide to Customize Blogger Header

What We'll Do?

Our objective is to change the outlook of our header as well as play with the header widget itself.

The Default Code

In your Blogger CSS, the header is defined by the following piece of code:

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

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

#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
}

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

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

#header a {
color:$pagetitlecolor;
text-decoration:none;
}

#header a:hover {
color:$pagetitlecolor;
}

#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;
}

#header img {
margin-$startSide: auto;
margin-$endSide: auto;
}

Understanding the Default Code

-> #header-wrapper describes overall look of your header.

-> #header will describe the overall look of your blog title and description.

-> #header h1 specifically describes your blog title.

-> #header .description will be responsible for the description of your blog.

-> #header img will become affective if you're using an image as your blog title.

Understood the Default Code? Start Making it Tasty!

I'm changing the overall look of header by making modifications in #header-wrapper.

-> To change the width of your header increase the value of width in #header-wrapper from 660px to a higher number i.e. 750px and see the preview.

-> To add color in the background, you can add background-color:#000000; in #header-wrapper. Please note that #000000 is hex code of black color, you can change it with your desirable code. To easily capture colors on web or on your computer, please download a free program ColorPic from here.

-> Our header border is a thin solid line and it is defined by border:1px solid $bordercolor; in #header-wrapper. If you want to change the thickness of your border, change 1px to 2px and preview. You can also create a dotted line border by replacing solid with dotted. Last thing you can do is to change color of your border, you need to replace $bordercolor with #FF0000. Please note that #FF0000 is the hex code for Red color.

Now I'll try to change the appearance of blog title.

-> The blog title is defined by #header h1.

-> Currently the line-height is 1.2em, change it to 1.5em and you'll see that the space occupied by blog title has increased. Please note that this setting will not affect the font size.

-> Now lets try to change the size of the font. We need to add a new tag in #header h1 which is font-size:15px; and then see the preview, if font size is small increase the 15px otherwise decrease it.

-> To change the font of your blog title, you need to replace font: $pagetitlefont; with font-family: arial, "lucida console", sans-serif; now your blog title will appear in Arial font. I'm adding 3 fonts because your visitor might not have Arial font available on his/her computer then 2nd font can be used.

-> By default, your blog title will appear in uppercase because of text-transform:uppercase; property. Change uppercase to lowercase and then the title will become lowercase. If you don't want both uppercase or lowercase, you can remove text-transform:uppercase;.

-> Last property is letter-spacing:.2em; it defines the spacing between two alphabets. You can increase it (.3em, .4em, .5em) or simply remove it and see the preview.

Add more widgets around header in 'page elements' section.

By default, you can't add any widget around your header because there's no "Add a Gadget" option beneath or above your header. So, lets add that option by ourself.

The default header widget code in 'edit html' section.

First of all we must know the default code, only then we can play with it. If you'll go to "Edit HTML" tab and search for <body> you'll find some code like this some lines after <body> tag...

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Blogger FAQs | Premium Blogger Templates, Tutorials, Hacks, Tips &amp;amp; Tricks. (Header)' type='Header'/>
</b:section>
</div>

Change the header widget code.

All we need to do is to change the value of 'maxwidgets' from '1' to '3' and 'showaddelement' from 'no' to 'yes' and now the code should look something like this:

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='3' showaddelement='yes'>
<b:widget id='Header1' locked='true' title='Blogger FAQs | Premium Blogger Templates, Tutorials, Hacks, Tips &amp;amp; Tricks. (Header)' type='Header'/>
</b:section>
</div>

What I've done is that I've increased the maximum number of widgets that can be installed around our header (maxwidgets='3') and I've also made the option of "Add a Widget" available in your header (showaddelement='yes') you need to save the template here and go to the "Page Elements" section to see the results.

Why it is good to have more widgets around header?

This is an obvious question and the answer is very simple. Your header is the first area where an incoming visitor will look so you can have an Adsense ad, a search engine, a translator or any other important widget in your header.