Jan 19, 2007

This post will cover adding a custom header image to the New Version of Blogger. The one that features a layout with widgets. If your bog is using a "Classic" template you will want to read these posts instead.

If you are using New Blogger's Minima template this is the header you would have to start with:

Lets say you want to customize the standard header to a photo or graphic you created such as this:

You first want to upload your image to a hosting service so you will have an internet address for it. If your not familar with this process, read this post before you continue.

!Remember to make a backup copy of your template before making any changes!Once you have the address of your image your next step is to set it as your headers background. This is done in the style sheet section of your template where the the code that formats the header resides. Note: the image your going to use should be 10px smaller than the width of the #header-wrapper. In the case of a standard Minima template this width is 660px, so you will want your image to be 650px wide. This adjustment is to allow for the set margins. You could also increase the width of the #header-wrapper to compensate. Be aware that the #header and #header-wrapper are two different elements.

Besides setting the background image, we added a height attribute equal to the height in pixels of our image. In our example it is 130px. I also suggest that you remove the border around the #header by changing the border attribute to 0px. You will also need to change the border setting of the #header-wrapper to 0px (not shown) This now gives us the following as the CSS for the entire #header element:

We are not done quite yet, we still need to make a change to the HTML portion of the template. When you created your blog you gave it a title and a description. These items can be changed under the settings menu and are automaticly added to your header. So that these items don't display on top of your newly created image, you want to eliminate them from the header. The best way to eliminate the description is to leave it blank under the settings menu. Blogger requires that you enter a title because not only does it display in the header but also at the top of your browser. In order to remove the title from the header you will need to go to the template section and with the "Expand Widget Templates" box checked, find the following code.

Notice that there is a H1 tag that displays your title, you will want to delete the entire tag contents as shown in red below:

Having made these changes be sure to save them and you will be good to go. To view the end results of this exercise in a New Blogger template Click Here.

I must be retarded. I have tried everything and it still won't work! I have the Minima White template and I tried exactly what you said, but it just won't work.

This is the header I want to insert:

http://i13.photobucket.com/albums/a292/crashin2ome/fatbitchblog.jpg

The old header disappears, but the new won't appear. It's just no header at all, someone help!!And it just won't work, when I try it just shows no header. The old one isn't there anymore but neither is the new one. HELP!

The photo bucket address that you are using is incomplete. You should be able to type the address into your browers address bar and it would normaly take you to a page displaying just the image but the address you give is dead.

Go back to photobucket and make sure you are copying the entire address and that should fix your problem.

Dear stratman, Thank you for the great instructions. I am trying to ad an image to my header but it only displays the background colour. The same happens if i try to add one to the background. I can't figure out the problem :(http://alien-art-project.blogspot.com/

Cr, I have been known to tell people they are trying to put 10 pounds of shit in a 5 pound bag but in your case your trying to put 100 pounds of shit in a 1 pound bag.

The Image your trying to use is way to big for your header. Go back and read the instructions. Reduce your image to a width that is less than 760px and adjust the height to the corresponding proportional height of your image at 760px. If you need help on resizing images read this Post

was supposed to use the scribe template... but i can't seem to figure out how to add a custom header to that so i switched to minima until i get my blog all started... any way i can add a header to the scribe template?

thanks for your very detailed instructions. great help! i've been reading tutorials all day. and this is what worked best.

i'm not very tech savvy - maybe you can help. can you look at my blog header and tell me if it is a "minima". I don't think it is - and if that is the case, do you have info on how to change my blog header using the instructions in this post?

I want to start another blog. If I want to use the "Minima" header, how do I do so?

My blog is at www.Iamglutenfree.blogspot.com. Thanks in advance. If you want to email me the answer, please feel free to do so at birdwoman5151@gmail.com.

can you pls take a look at my blog (http://webelfive.blogspot.com/) and tell me why the image in my header is being cropped to only 75 pixels tall when viewed in Firefox or IE??? But its ok when viewed in Safari? I just used the std blogger tools for changing the header, didn't mess with the code any. you can see what the full image should look like here: http://webelfive.blogspot.com/2008/01/missed-me-missed-me-now-you-gotta.html

actually, when you click on any of the individual posts, the header looks right, but if you click on the main blog page blogger reduces the height. i am going NUTS trying to figure out WHY!!!!

I made a custom header for a friend at stampowl.blogspot.comNow when I go back to her page to see the new header I made her- it's not there! Everyone else can see it but me!She can see it and her husband's computer pulls it up.I have gone to it in IE and Mozilla and NOTHING!It's not there on my end.There is no header at all! I made one for mine at feathersandink.blogpsot.com and you can see that one. I can too. Can you explain this.I have cleaned the cache, cleaned the cookies. I have rebooted. NOTHING!