HEADERS

Headers.  Someone at Blogger changed the Header formatting so that it might look good on a cell phone.  One day Kay found her newly posted header a tiny thing in the left hand corner.  She doesn’t remember how she fixed it, but she did fix it.  

I thought since she solved her problem, that I could upload a new image to my header space.  Nope.  I found myself with a tiny little image over in the left upper corner of my blog.

What I did find with G’s help, is this cure via Google

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/AVvXsEhTxCAlZMJvFcCX-Tvs8CMEXn2f7bFI0eg44RapHLo7zimhYnvTcV75yS52w3oSYApdZf24oeduFqeKKamEFZGlenYO4a0pynuGe7UfKG9gi0aE20AUrfyoUnVhjyC4abXtVhNcDWKkigY/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

----------------------------------------------------------------------------------------------

 

<A HREF=http://geeeee-zer.blogspot.com/>Himself:</A>   Very frustrated by my tech abilities.  Got my old computer set up for Zoe.

Myself:   Blogger needs to fix this problem.  Had a wonderful  few hours reading with granddaughter while G set up my old computer at daughter’s house.

Reading:  The last Craig Johnson.

Watching:  KPBS:   More TGBBS.  Still season 3.

Photo:   Mine.  San Diego Harbor.

Weather:  Sunny and hot.

Gratitude's:  That the header is fixed.