Getting around the Blogger template upload problem

Ah, the geniuses of Blogger have been doing naughty things - so naughty that they have messed up the back end of the Blogger platform, leaving thousands of poor blooging souls like myself to go crazy in our pajamas (bloggers are supposed to work in PJs). Have a look.

The problem has been summarized thus -

In the design back end of Blogger, you can not use the following features.

1. Expand Widget Template.
2. Preview your Template Savings.
3. Clear Your HTML Template Savings.
4. Save your Template in HTML Mode.

A couple of possible work arounds till blogger gathers it's marbles back.





First, from a user called Blog Technics-

Possible Solution: Until Blogger fixes this problem only one possible thing you can do from your side to update (edit) your Blog Template in HTML Mode. Follow steps.

1. Go To Design.
2. Edit HTML
3. Download your Template
4. Open in Wordpad or any other HTML Editor.
5. Makes Changes you Needed.
6. Save This.
7. Now Upload it to Blogger.
8. Done!

Note: You Can not Delete any Widget by using This method because when you upload the template it will show some Widget is missing. And the options available can not be accessed due to the problem discussed above. But you can make all other changes form this method.  

Second workaround from me!
(and I pulled a lot of hair to discover this -all mine!)(and because the above fix fixed nothing on my blog)

For where Blog Technics workaround does not work(it didn't for me).

Here's a somewhat winded solution -actually,a work around, not a solution- that works for me, at least till Blogger comes out with a true fix.

First, my situation - I am using a heavily customized template and in the middle of making some changes in it this Blogger problem happened. Just my luck! So I was left with a blog that looked really weird -I was experimenting with the design -with no apparent way to change it.That maddening 'keep widgets' 'delete widgets' block kept frustrating every effort to upload my template.



After a lot of hair splitting I found that the following fix can work for those who have a saved template that you would like to upload to Blogger but are not able to because of the 'keep widgets' 'delete widgets' block. I shall call your saved template, well, 'Saved Template'.

1) Go to Design -> Template designer

2) Apply a simple template to your blog -in my case the template I applied is simply called 'Simple' itself

3) Now to Design -> Page Elements and remove all the widgets

4) Two widgets remain that cannot be deleted from here -
Header
Attribution
Just let them be

5) Now download the full template and open it in notepad or preferably a text editor like notepad++ to make the code easier to see for now follows a little tricky bit. What you have to do is find the code for the above two widgets that could not be deleted and paste it in your own 'Saved Template'. So that when you upload this 'Saved Template', the 'keep widgets' 'delete widgets' message does not appear.

Or if you have applied the 'Simple' template then just copy the code from (6) and (7) below. Much easier!

6)The code for header is -

<br /> <b:section class='header' id='header' maxwidgets='1' showaddelement='no'><br /> <b:widget id='Header1' locked='true' title='Liberty News Central (Header)' type='Header'><br /> <b:includable id='main'><br /> <br /> <b:if cond='data:useImage'><br /> <b:if cond='data:imagePlacement == "BEHIND"'><br /> <!-- Show image as background to text. You can't really calculate the width reliably in JS because margins are not taken into account by any of clientWidth, offsetWidth or scrollWidth, so we don't force a minimum width if the user is using shrink to fit. This results in a margin-width's worth of pixels being cropped. If the user is not using shrink to fit then we expand the header. --><br /> <b:if cond='data:mobile'><br /> <div id='header-inner'> <div class='titlewrapper' style='background: transparent'> <h1 class='title' style='background: transparent; border-width: 0px'> <b:include name='title'/><br /> </h1> </div> <b:include name='description'/><br /> </div> <b:else/><br /> <div expr:style='"background-image: url(\"" + data:sourceUrl + "\"); " + "background-position: " + data:backgroundPositionStyleStr + "; " + data:widthStyleStr + "min-height: " + data:height + "_height: " + data:height + "background-repeat: no-repeat; "' id='header-inner'> <div class='titlewrapper' style='background: transparent'> <h1 class='title' style='background: transparent; border-width: 0px'> <b:include name='title'/><br /> </h1> </div> <b:include name='description'/><br /> </div> </b:if><br /> <b:else/><br /> <!--Show the image only--><br /> <div id='header-inner'> <a expr:href='data:blog.homepageUrl' style='display: block'><br /> <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_headerimg"' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/><br /> </a><br /> <!--Show the description--><br /> <b:if cond='data:imagePlacement == "BEFORE_DESCRIPTION"'><br /> <b:include name='description'/><br /> </b:if><br /> </div> </b:if><br /> <b:else/><br /> <!--No header image --><br /> <div id='header-inner'> <div class='titlewrapper'> <h1 class='title'> <b:include name='title'/><br /> </h1> </div> <b:include name='description'/><br /> </div> </b:if><br /> </b:includable><br /> <b:includable id='title'><br /> <b:if cond='data:blog.url == data:blog.homepageUrl'><br /> <data:title/><br /> <b:else/><br /> <a expr:href='data:blog.homepageUrl'><data:title/></a><br /> </b:if><br /> </b:includable><br /> <b:includable id='description'><br /> <div class='descriptionwrapper'> <p class='description'><span><data:description/></span></p> </div></b:includable><br /> </b:widget><br /> </b:section><br /> <br />


Just paste the in your header div in your 'Saved Template'

7)The code for Attribution is -

<br /> <b:section class='foot' id='footer-3' showaddelement='no'><br /> <b:widget id='Attribution1' locked='true' title='' type='Attribution'><br /> <b:includable id='main'><br /> <b:if cond='data:feedbackSurveyLink'><br /> <div class='mobile-survey-link' style='text-align: center;'> <data:feedbackSurveyLink/><br /> </div> </b:if><br /> <br /> <div class='widget-content' style='text-align: center;'> <b:if cond='data:attribution != ""'><br /> <data:attribution/><br /> </b:if><br /> </div><br /> <b:include name='quickedit'/><br /> </b:includable><br /> </b:widget><br /> </b:section><br />

Just paste the in your footer div in your 'Saved Template'

8) Now upload your 'Saved Template'.

You might see two Blog titles, as I did since my own 'Saved Template' already had a section for blog title. To delete one, delete this bit from the code in(6)-

<br /> <b:if cond='data:useImage'><br /> <b:if cond='data:imagePlacement == "BEHIND"'><br /> <!-- Show image as background to text. You can't really calculate the width reliably in JS because margins are not taken into account by any of clientWidth, offsetWidth or scrollWidth, so we don't force a minimum width if the user is using shrink to fit. This results in a margin-width's worth of pixels being cropped. If the user is not using shrink to fit then we expand the header. --><br /> <b:if cond='data:mobile'><br /> <div id='header-inner'> <div class='titlewrapper' style='background: transparent'> <h1 class='title' style='background: transparent; border-width: 0px'> <b:include name='title'/><br /> </h1> </div> <b:include name='description'/><br /> </div> <b:else/><br /> <div expr:style='"background-image: url(\"" + data:sourceUrl + "\"); " + "background-position: " + data:backgroundPositionStyleStr + "; " + data:widthStyleStr + "min-height: " + data:height + "_height: " + data:height + "background-repeat: no-repeat; "' id='header-inner'> <div class='titlewrapper' style='background: transparent'> <h1 class='title' style='background: transparent; border-width: 0px'> <b:include name='title'/><br /> </h1> </div> <b:include name='description'/><br /> </div> </b:if><br /> <b:else/><br /> <!--Show the image only--><br /> <div id='header-inner'> <a expr:href='data:blog.homepageUrl' style='display: block'><br /> <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_headerimg"' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/><br /> </a><br /> <!--Show the description--><br /> <b:if cond='data:imagePlacement == "BEFORE_DESCRIPTION"'><br /> <b:include name='description'/><br /> </b:if><br /> </div> </b:if><br /> <b:else/><br /> <!--No header image --><br /> <div id='header-inner'> <div class='titlewrapper'> <h1 class='title'> <b:include name='title'/><br /> </h1> </div> <b:include name='description'/><br /> </div> </b:if><br />

Whew! I hope Blooger finds a solution before anybody spends a minute on these tricks!

(sorry about all that code flying off the page. Fighting Blogger jinxes has left me drained right now.)


P.S.-
I meant to say 'Blogger' and not 'Blooger' .
A Freudian slip, I guess!


P.S. -
if you have trouble viewing the code above(and I don't blame you), I have posted the same fix here.

Update -
Flying code fixed


Update 2-
more from Lynhea-

Here's a solution for those that have backed up their template within the last couple of days and only need to make minor changes to your template.
Open your template in wordpad, make the changes, then upload it to blogger. Once you upload it the expand template widget starts working. I was able to make several changes this way and it saved my template!

However if you navigate away from the page or refresh the page the "expand template check box stops working and directs you to the 404 error page.

Hope this helps!!!