Blogger.com Custom Header
Wednesday, September 5th, 2007 at 3:30 pm
Blogger.com is a free blogging service owned by Google and it is very popular among new and seasoned bloggers alike. A great benefit of Blogger.com is that it allows you a lot of control over the look and feel of your blog.
An original header creates a good first impression with your visitors, so why not get creative and surprise your readers with something special? It’s not as difficult as you might imagine…
Step 1:
Log in to your Blogger.com account. For this example I chose to use one of the default templates, called “Minima Black”. The title of your blog is displayed in the header at the top of the page.
Step 2:
On your Blogger.com dashboard, click on “Layout”. You should now be looking at the panel under Template > Page Elements.
Step 3:
Click :Edit on the Header Element
Step 4:
A popup window should now appear. Here you can Change the title of your blog, add a description that appears under the title and upload a new header image.
Under “Placement”, you can choose between the the new header image appearing behind the title and description or replacing the title and description of your blog. A strange thing happens, though, after a moment, the “Placement” choice disappears, so once you have uploaded the new header image, you have to return to step 3 and open the popup again to change this setting.
Step 5 - The Header Image
What size should your new header image be?
An image with a width of 648 pixels fits perfectly in the header box. The height is up to you, but don’t make it too big. Something between 100 and 200 pixels should be fine! For this example, my header image was 150 pixels in height. There are mainly two reasons to keep the height of the image fairly small:
- Larger images take longer to load.
- A large header image will push your blog content further down the page.
What should the image be of?
If your new header image appears behind the title of your blog, I recommend choosing an image that is low in contrast and does not contain many different colours, else the title will be difficult to read! Choose an image that relates to the mood of your blog and “sets the scene”.
By clicking on Template > Fonts and Colours, you are able to choose a Blog Title Color and Blog Description Color. You could use this feature to make your header text more legible against the background image.
If you are skilled in editing images, why not create an image featuring your blog title in your favourite font? Then you can go back to Step 4 and set the image to appear instead of the blog title.
Step 6
All done! Sit back and take a look at your brand new header. If you want to change something about it, you can click “Customize” at the top of the page. This will take you back to the control panel we visited in Step 2.
A few problems you may encounter:
- The template I chose for this example has a fixed width. That means it does not stretch to fill the width of your browser. Fixed width blog templates work better for custom headers, since you can control the way your header appears. Templates featuring a dynamic width, may cause the header to appear at the left of the page.
- If you are using the “Classic Template”, Blogger.com will ask you to upgrade to a newer template before you are able to customise the layout or header of your blog.
- Use image editing software to crop your new header image of the right width before uploading it, because Blogger.com will not automatically shrink your header to fit the template. If your header image is too wide, it will just stick out on the right side and that does not look good!
I would love to hear from you, so please add your custom-header wisdom in the comments!
Steve Says:
September 9th, 2007 at 4:03 am
Thanks for all the great info.
I have been thinking of switching to blogger lately since they have such great video support. I have been using SPhpBlog lately, and they don’t have video support.
Keep up the great work. I love your blog.
gretalambardo Says:
September 15th, 2007 at 2:37 pm
Helo - my Nmae is Greta; and my english is all others then good; but i guess thats better then your german :)
anyway, i will start a smal question . I read your post with “big eyes” .
Do you know; how can i remove the “ugly Blogger” toolbar ?
puh; i hope you understand my writing . .
Blogsolid Says:
September 17th, 2007 at 2:40 pm
Hi Greta, thanks for the question, I posted an answer for you in the form of a new entry.
Elle Says:
December 15th, 2007 at 2:11 pm
Thank you! (:
karen Says:
December 27th, 2007 at 7:14 pm
hi,
I’m creating my own header in minima black and has set the width to 660px and height 150px. When i load the picture (jpg) up the right side of my header is slightly out from the 2 lines of the header box. What’s the correct size? (i’ve tried width 648px and the same result appear)..
Appreciate your help.
Thanks.
Devan Says:
January 7th, 2008 at 8:06 pm
I am also having the same problem as Karen. Do you know why this is doing this and how to correct it?
worldspinner Says:
May 25th, 2008 at 2:50 pm
hay thnxs for such a great informaion but when i followed ur steps like . click Templates …… i get is .. EDIT HTML , PICK NEW , CUSTOMISE DESIGN & AD SENSE ….. im not getting the next step as what u displayed page elements its annoying i tried all i could ….can u help me why this is happening ?
Danny Says:
July 24th, 2008 at 12:08 pm
How do I move my header to the top or must I use another template? I really appreciate your help.