Don't miss

The Blogger Header Image Problem - Size Changes - Here's the Fix


A problem I have faced with Blogger is my header image at the top. It just is either blurry, pixelated, or too small or big. I have already made a post about how to stop this (Click Here). This did stop the blurriness problem when uploading images to Blogger but lately, I've found for some unknown reason that the header image has been shrunk by Blogger when uploading, how frustrating. But there is like everything a solution.


Save your template before you change it.
The problem is caused by Blogger changing the format system for header images. It's easiest to explain with an example. If you wanted your header image lets say 100x100px, and didn't want to show title of description, Blogger will try to make the image the same size the title and description would have been:


Before


After

To stop this from happening, go into blogger, then design, then edit HTML and expand the widget templates. Use Control + F to find the following code:

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

Now, all you have to do is change the two green sections. Change section one to height='y' and change y to however amount of pixels you want your header image to be vertically. Change section 2 to width='x' and change x to however amount of pixels you want your header image to be horizontally.


Related posts:
Blogpress App Review
How to create favicon for your blogger website

About Will Green

A student in England studying Automotive Engineering with Motorsport, Will created Ask Will Online back in 2010 to help students revise and bloggers make money. You can follow AskWillOnline via @AskWillOnline.

3 comments so far:

  1. Hello.. I'm new in blogging.. and I'm very confused. I try this but failed.. Do I have to write anything after amount of pixels? please help!

    ReplyDelete
  2. Double check the article and make sure you do exactly what it said, one small mistake is all it takes.

    ReplyDelete
  3. Thank you so much, this worked! I was getting so frustrated because Blogger was trying to shrink my header down way too small.

    ReplyDelete