Blogger Header Image Problem

Blogger has changed the format of their ‘header widget’ without notice resulting to such problem that I called a Blogger bug or simply a header image problem.

Before the alteration: Using the Blogger editor, when you upload an image for the header with a size of let’s say 100 x 100px, then place it ‘instead of title and description’, the header image that will appear on your page will have the same size as the uploaded image. After the alteration: When you upload an image for the header, then place it ‘instead of title and description’, the ‘header image’ that will appear on the page will now depend on the size or the area of the ‘header’ resulting in pixilated or incorrect image value.

Here is an illustration (true image size is 100 x 100px):

Before

After

Now here is a very simple fix:

1. Go to your blogger template editor, then Edit HTML
2. Check the 'Expand Widget Templates' checkbox
3. Go to the 'header widget' section and find this code:

expr:height='data:height' expr:id='data:widget.instanceId + "_headerimg"' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>

4. Now change the colored part to this:
height='100'
width='100'

*Change the value of height and width depending on the size that you want your image to appear

5. Save your template and you are done.
---

PS. I now fixed the annoying Blogger header image problem and have my ‘monkey’ logo back with number 8 at the side for this new year and for good luck :-)

Special Advertisement: Are you looking for Blogger templates? A new site has emerged that collects the most wonderful web 2.0 templates, skins, or themes for Blogger. Visit WOW Blogger Templates and take your pick.
***