Personalizing the Header

Adding a background image to your header is a quick way to make sure that your Blog looks professional and different than the millions of other Blogs out there.

Look for an image or a photograph with a good horizontal crop. Since you're going to change the proportional sizing of the photo, it's a good idea to avoid photos of people or objects. They may look distorted after they have been resized. Using photo editing software, such as Photoshop, adjust the size of the photo to approximately 660 x 150 pixels. Post the resized photo on your server.

Under the “Template” tab, click on “Edit HTML.” Search for:

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

Add this text below:

background-image: url(http://www.mywebpage.com/nameofphoto.jpg);

The code should now look like this:

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
background-image: url(http://www.mywebpage.com/nameofphoto.jpg);

Change the font and color of your title to match the new header under the “Colors and Fonts” link. See the Changing Fonts and Colors section for more information.

Hint: For more detailed instructions on adding a background photo to a header, check out this site.

Adding a new header to a Blogger template is a little more complicated, but well worth it. Your new header will be personalized, searchable and will include a link to your Blog’s homepage.

Start by adding more page elements to the header. Click on the “Page Element” link under the “Template” tab. Do you have an “Add a Page Element” link above your header? If so, skip this step. If not, you need to add some code to your template.

Switch to the “Edit HTML” link and search for this:

<div id=’header-wrapper’>
<b:section class=’header’ id=’header’ maxwidgets=’1’ showaddelement=’no’ >

Change the maxwidgets='1' to maxwidgets='3' and showaddelement='no' to showaddelement='yes' (changes marked in bold):

<div id=’header-wrapper’>
<b:section class=’header’ id=’header’ maxwidgets=’3’ showaddelement=’yes’ >

Next, search for:

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>

Change this section to read (changed marked in bold):

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='yes'>

Save changes to the template and return to the “Page Elements” tab and click on the “Add a Page Element” link above the header. You can now add up to two page elements in your header.

Hint: Visit this site for tips on removing the Blogger header and replacing it with your own.

Hint: To remove the border from your header, search for #header-wrapper and #header and find the border setting. Delete the border code, or change the size from 1px to 0px.

In this section:
Choosing a Template
Personalizing the Header
Changing Fonts and Colors
Fixing the Sidebar
Removing the Blogger Banner
Hiding Comments
Advanced Template Changes

Return to Adapting the Blogger Template
Return to the