A Fix for Blogger Blurry Header | Life and Linda

Subscribe to receive updated tablescapes, designs and more Click Here!

X

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.



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.

12 comments:

  1. Thanks for sharing this tutorial Linda. It's too bad that the new changes with blogger are changing the way we do things on the blog now!

    ReplyDelete
  2. Thanks Linda! So far, when I change my header, I haven't had any problems, but I haven't done it for awhile. I'll keep this info just in case. I used to go into html quite abit and fix things, a few years ago, but haven't messed with it for awhile! Hard to remember now how I did it all! Marilyn

    ReplyDelete
  3. You are always so helpful! Thank you.

    ReplyDelete
  4. Everything looks blurry to me on the internet right now! Time for new prescription glasses, LOL!

    ReplyDelete
  5. Fortunately this is one problem I don’t have. Have a good evening

    ReplyDelete
  6. I'd love to know how you got so brilliant because you truly are. I'm so grateful I had you handle my blog change for I'd never have figured this out on my own. Thank you so much for sharing your wisdom and technical skill with us. Indeed, you are a blog goddess!

    ReplyDelete
  7. Thanks for sharing this. It is always something with blogger. xoxo

    ReplyDelete
  8. Thanks for sharing this - it is really helpful. I love using Blogger and it's been frustrating with changes like this when you're not an html expert. Keep these tips coming:)

    ReplyDelete
  9. Thank-you, Linda. I've noticed that some of my graphics I upload from Canva and other sources look fine on my desktop, but look a little blurry in blogger, and it has been a recent thing. Maybe I need to make an appointment with the eye doctor!

    ReplyDelete
  10. Thank you, Lindo, for documenting all of this. You were so wonderful in helping me to fix the problem on my blog, and now I have something to refer to when I want to change it in the future.

    ReplyDelete
  11. "Copy the URL". What URL? I put the header on a new page. The URL of the page?

    ReplyDelete
  12. Ignore my comment, I figured it out. Thank you!

    ReplyDelete

I so appreciate your visits and sharing your thoughts at Life and Linda.

Please note that I use Google Adsense, Shareasale, Rakuten and Amazon affiliate links on this site. This means using them for purchases won’t cost you extra but may earn me a small commission. Our full disclosure is available for viewing under About in the disclosure policy.
All rights reserved. Our graphics, images and text are all subject to copyright protection.

Instagram