A Fix for Blogger Blurry Header

Somewhere along the line when Blogger started updating, changing out your header is a big problem.  For years, all you had to do was either upload the new header from your computer or copy the header url.  Most of us choose Instead of title and description as pictured below.

 If I upload my header from my computer and save it, my header is blurry. We all  have been doing it this way for years. The fix is further down the post.

Other method of adding my header -If I paste in the URL of my header instead of uploading from my computer and click save, you will notice at the bottom of that box, it says Shrink to fit. There is a button to turn it on. It says Image will be shrunk to 150 pixels wide. Notice I did not choose that. I click save after adding the header URL.

 Now looking at my blog, my  header is tiny.  My header is 1000px  wide by 349 pixels high, not 150 pixels wide. Look how tiny it is below. Mind you I did not click the button that says Shrink to fit.

This is my header as it should be, not blurry.

*For both settings, this is how to fix your blurry header or tiny header.

Open Theme -  There is a dropdown menu next to Customize. Click it. 

Click edit HTML.   

Now, click the widget symbol

Now click the widget symbol, which a little squares. When you point to the widget icon, you will see Jump to widget.

Next you will see a long list of your widgets.  Click Header1. Header1 is your blog Header banner.

Uploading Header from Computer

Header 1 will show at the top of your template.

Now, look at the settings.  You will notice the section width is 150. My header is 1000 wide, not 150. That explains the blurry image. 

Here below I correct the section width from 150 to 1000.

*The display width should be the width of your blog Header.

The  display height should be the height of your blog Header. 

Now that we have corrected your header image to the proper size, the header image is blurry.

 Upload your blogger header to an empty page or post on your blog. Make the image original size. 

Copy the URL and paste it in the Header settings in the HTML.  See the highlighted area. Click preview.  If all looks good, click save. Now your header is full size and not blurry. 

Second method of pasting in your Header via URL.

Do the same steps to edit your HTML and click Widgets and Header 1.

Look at my blogger header settings. The Display Height is 105.

The section width is 150 and the display width is 300.

Keep in mind, my header is 1000 pixels by 349 pixels.

I need to change those 3 settings.

Click preview, if all looks good, click save.

I hope this helps all bloggers who are having issues with changing their headers.  I hope Blogger fixes this problem soon.  Not all bloggers are comfortable editing their HTML.

Sign up with your email address to receive the latest updates straight in your inbox.

About Linda @ Life and Linda

Hello, welcome to LifeandLinda. I am from Northern California. I enjoy blogging, Designing Blogs, Decorating, cooking, entertaining, gardening and clogging. I hope you enjoy your visit.