Blog Header Headaches!!!

 Hello friends. I've been having problems with my blog header since Thursday when I tried to change it to a new one. It became a tiny little image all the way on the top left corner. If I enlarged the image then the writing became blurry.  Try as I might, I was not able to get it to work.  So I went investigating and after many hours of frustration trying all sorts of suggestions, I finally came upon this post from Cleo on the Blogger help forum. I though I would put it here for anyone who has a problem or will have the next time you change your header.  This has apparently been going on since May and you only really find out about when you try to change your header. Blogger has not fixed this problem yet.  So here it is ...

* * * * *

Cleo Coyle

5/22/21

I have discovered a workaround. Scroll down and you'll find out how I fixed this manually -- 

Here is the issue stated clearly -- BLOGGER appears to have CHANGED its HEADER WIDGET to automatically reduce the size of your uploaded Header to 150 px height and 300 px length. And it automatically flushes this postage-stamp size Header to the left of the screen, making your blog look ridiculous when viewed on a computer or tablet screen. I am guessing someone at BLOGGER was attempting to change the widget to accommodate mobile devices???? Just a guess for this mess. But if BLOGGER ADMINS are reading this forum thread, then let me assure you that there are PLENTY of people who are still reading blogs on devices larger than a mobile phone screen!

HERE IS HOW I RESOLVED THIS PROBLEM FOR OUR GROUP BLOG:

1 - I went to my Dashboard and hit THEME. 

2 - I hit the arrow next to CUSTOMIZE

3 - On the dropdown menu, I hit EDIT HTML

4 - Do you see the line of symbols in the upper right heading of the page? Hit the little building blocks that read "Jump to Widget" when you hover your cursor over them.

5 - A dropdown list should appear. Move your cursor over HEADER or maybe it will say HEADER1

6 - This will jump you to the HTML for the HEADER on your blog.

7 - Here you can adjust the size of your Header UP to where you want it simply by changing 2 numbers in the HTML. See the bolded sizes of 500 and 1000 in the HTML below, which is how we have displayed  our Header for 12 years on Blogger!

<b:widget-setting name='displayHeight'>500</b:widget-setting>

            <b:widget-setting name='sectionWidth'>1022</b:widget-setting>

            <b:widget-setting name='useImage'>true</b:widget-setting>

            <b:widget-setting name='shrinkToFit'>false</b:widget-setting>

            <b:widget-setting name='imagePlacement'>REPLACE</b:widget-setting>

            <b:widget-setting name='displayWidth'>1000</b:widget-setting>

8 - At this point, you will want to hit the EYE SYMBOL in the upper right heading of this page to PREVIEW the Theme. If it looks the way you want it to look, then save it. 

9 - One more thing. This is important If you are seeing a blurry header, there is another workaround.

BLURRY HEADER FIX -- It appears the faulty or "re-programmed" buggy Header Widget automatically uploads and shrinks your Header image to that postage-stamp 150x300 px. size. So when you go in and adjust the HTML to increase your HEADER's display size (as shown above), then blogger simply "blows up" the shrunken image it uploaded and you get a blurry header. 

Here is how to fix this. Go to the HEADER HTML and look at the lines ABOVE the lines you were just working with to increase the size of your HEADER. See the bolded URL (web address) below. That's what you need to replace. Upload your HEADER in a LARGE SIZE somewhere on your blog. I suggest an old blog post. Get the "image URL" of that large version of the Header that you uploaded and paste it into the code, as shown below. Now the software will pull the large image you uploaded separately from the faulty widget and re-size it. 

<b:widget-settings>

            <b:widget-setting name='displayUrl'>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5gUe-10bzyz-12ZMGBzekd63Q9TgGGNnxyCdlEQ-bVMmPUGhvyop6PFsemxUsbWolTyaRTSt598fXd1WvN4p9eqCjMJqdnimZz7Kx5U_y-BS_ycwit3a39D-8sXr_sHm3l2xFc6MKJw8/s16000/MLK+HEADER+2021-NEW.jpg</b:widget-setting>

            <b:widget-setting name='displayHeight'>500</b:widget-setting>

            <b:widget-setting name='sectionWidth'>1022</b:widget-setting>

            <b:widget-setting name='useImage'>true</b:widget-setting>

I hope that works for you. It worked for our blog and it took me 3 long hours to narrow down the problem and find workable solutions.

BLOGGER TECHS -- I hope you will look into the Widget programming and resolve the issue.  

In the meantime, if anyone out there has a tech blog, feel free to share my solution. 

CLEO COYLE

www.MysteryLoversKitchen.com

Last edited 5/22/21

* * * * * 

I hope this helps you as much as it helped me.  I did have to adjust the numbers mentioned above in order to get my header to fit the way I wanted it to, but that's something you can play with :-)

I'm just glad that after 3 days of struggling, I got it to work.

If you're one of my followers, then you know that I like to change the look of my blog with the seasons so this was a major headache for me.

Good luck everyone!

Hugs,