Monday, February 19, 2007

[Migration] Migrating from classical template to new template in New Blogger

I'm no technical expert and I'm sure many people will understand much more on this topic than I do, but I thought that some of the less technical readers would benefit from understanding something of what I've just done (with help from my dad) to upgrade my blog. I'm hoping that because I’m not that technical myself, my notes will be more easily understood by others like me. You may still need professional help, but at least this may help you understand the basics. This note is a bit long, but I hope nobody will mind. Clarifications and additions from those more expert would be most welcome.

Like many of us, I made quite a few changes to my template during the months since I started blogging. When Blogger Beta/New Blogger came along I was keen to migrate, but when it came to it I realized that the only way to keep all my changes intact was to select the "classical template" option and paste in my existing template html.

This was fine in terms of migrating to the new service, but I soon realized the drawbacks. Had I started under New Blogger, I would have used a new style template with all the advantages of the page element display and widgets. By keeping the old template, this was lost to me.

Essentially, everything that belongs to your site under Blogger lives in one of two places – in your template or in your postings. The postings are saved separately, so if you changed your template the posts were still there. A problem if you changed column widths or something that meant old displays no longer laid out the same as before, but otherwise OK. But when you changed your template you lost all the hacks and mods you'd made. These might be colours, fonts, code for recent comments, Google Analytics, etc, etc.

Worse still, mucking about with your template could introduce errors that weren't noticed when you made the changes. You could add some code that generated expanded summaries, for instance, only to find much later that your main background colour changed on linking through an external search because some <div> or similar had disappeared or an extra one appeared and this only had an effect under this one particular circumstance, so you never spotted the problem.

Perhaps worst of all is the incompatibility between browsers. I used to check everything in Firefox and IE, but at some point I had to introduce "conditional code" to check for the browser type – a certain path to eventual disaster. And it was ages before Haalo kindly pointed out to me that my site did not render properly in Safari.

The long and the short of it is that standard templates are properly checked against all main browsers (well, that's the theory anyway), whereas we don't have time to run comprehensive checks. So ideally you want a standard template, but you also want your own code.

New Blogger offers the opportunity to come close to this. Headers, footers, sidebar contents, etc. are all coded into "widgets". Now you have three components to your blog – a template, widgets and posts. In theory you could use a standard template and make your personalisations in widgets that are automatically saved (keeping copies in case they screw up!). In practice you probably still need to make some changes to your template, but they are relatively small, compared with under old Blogger. And the new template is much neater, with variables extracted as labels and put in one place. You can even make minor mods in-between widget code sections to segment your sidebar, for instance. In other words, you interfere with your template less and in a more controlled manner.

There are many advantages to this. The fewer changes the more likely your blog is to render at all, to render identically under different browsers and to work properly when stressed through hyperlinking, etc. It also makes it easier to note your changes and re-implement them after changing to a different template. It's easier to debug anything that does go wrong. And you can use widgets!

It was this last point that drove me to change to the new template structure. Finding hacks for the old template will get harder and harder, whereas there are loads of ready-made hacks for widgets. There are even sites out there such as Beautiful Beta which have facilities allowing you to add a hack to your blog in widget form with a single click. So all those features like flickr displays, clocks, calendars, comments, archive drawers, etc. can be added so easily.

So, how did I manage the migration?

Firstly, I set up a new account on my PC as a development testbed. The idea was to recreate my blog and make all the changes without touching my live blog until everything was working properly on the testbed.

So I recreated by blogs (I've got five interlinked blogs carrying my main page, my archives and three specialist areas) in the new directory under boring names such as "mn67e4testmainpage" and, most importantly, changed the settings so they did not index on Blogger, did not generate xml feeds, were not visible to anyone except me, etc. You just go through the settings and make the testbed as invisible as possible.

The way I created my test pages was to start from scratch each time and create a new blog with a new template. The default contains widgets for the header, sidebar and footer. I then took a copy of my current template and split out all of the changes I had made. I put everything I could into widgets, adding new ones as necessary. There were some changes I had to make to the new template - for colours, column widths, navbar hiding, meta coding for site verification by Google Webmaster Tools, etc – but these were relatively small changes and I recorded them as I went. Almost all of the other changes I had made to my old template were either removed as no longer necessary or put into widgets. I took advantage of adding some new widgets at the same time.

Eventually my blogs all looked as I wanted them and I tested the hyperlinks between them by making temporary changes (these must be changed back of course to link to the right urls when upgrading the real blog). It would be easy, of course, to create new blogs under new urls but this would mean losing external and internal links, rankings, etc. So each blog was upgraded under its existing url.

Now I'd done the hard work of creating a parallel set of blogs that all looked the way I wanted, I waited for a quiet time to perform the upgrade. The first action was to save all my templates carefully. Then I posted a note on my main page saying upgrade was in progress.

Working on my subsidiary blogs first and finishing with the main blog, I selected the "Customise Design" option and clicked on "Upgrade Your Template". You get a stern warning about all template changes being lost, but of course this didn't matter because I'd already used all my changes in the testbed design and in any event had a fallback option to the classical templates. I chose the same basic template so the structure was the same. Working quickly but carefully, I added the template changes first – widening the columns, changing colours, and feeding in the other bits of code. Then I worked on the widgets. By and large the 'widgetable' code appeared in widgets automatically, but some were in the wrong place and needed to be drag-and-dropped into place. Then I simply transferred the widget code from my testbed to the live blog, bit by bit, until my blog was fully migrated.

Whereas I spent about a week on and off building the testbed – because there are some significant differences between the old and new templates that you have to master - the actual migration took only about 2 hours and was smooth as clockwork. I've had no complaints yet and was delighted to receive an email from the ever-helpful Haalo telling me that I was now rendering properly on the Macintosh. I now have blogs that are all in the new format, have relatively few changes to their templates and are ready for whatever new code is made available for me to implement as widgets.

I'm sure I've missed some things here and confused some others, but I'd be happy to answer any questions and correct errors. The point of all this is to encourage anyone who is using the classical template under New Blogger to go the extra step and upgrade the way I did. As long as you are careful and methodical, I'm sure you won't regret it.

This Post was written by Trig from Aidan Brooks: Trainee Chef


nika said...

Oh man, that sounds so complex and exhausting! I am glad it worked out in the end.
I took the easy way out and took 5 mins to install wordpress on my site, another minute or so to select my fav theme and then I hit the import from blogger button. In about a minute my old blogger blog was alive in it's new WP home.

Ellen said...

Nice write-up and very informative! Question--does anyone know why I don't see the "Customize Design" on my blogs? I sign into the new Blogger, can create new blogs with the new cool stuff...but my old blogs still don't allow me the option to upgrade.

Meeta said...

This was fantastic. I went through the same a few weeks a go, changing my old template to the new Blogger layout. The advantages of the widgets as you said are brilliant and I love the fact that I do not have to mess around with my main template as often as I used to.
Just one thing you said - have you backed up all the codes and formats from your widgets in a separate file? I back up my template always - every couple of weeks, but never thought of doing it for the widgets. I guess it would make sense in doing that too though.

Mike said...

If you are on New Blogger but have previously selected "Classical Template", then when you click on "Template" you should see "Edit Html", "Choose New", "Customize Design" and "AdSense" tabs.

Kalyn said...

Your blog does look great. Nice job.

Sam said...

thanks Trig - this is fantastic.
Really - I hope I eill find enough patience to use it some day - and as Kalyn says - your blog does look really really great.

Amy Sherman said...

Aidan your links in the left nav are really great, very unique way of doing them. On my Mac the header takes a long time to load, otherwise nice job!

Trig said...

Thanks guys. Sorry about the header but I simply haven't found a way to convert it from a .png to a .jpg without seriously losing quality. If anyone knows how to generate my header using less space I'd be very grateful.

kitchenMage said...

Trig, thx for the detailed walk-through. I've got a 48k jpg of your header, could probably make it smaller if I tried (i just saved it at 40% compression) but you don't have an email address anywhere I could see...

Trig said...

KitchenMage thanks. My email address is in the footer of my blog. I don't know how you've done this because a simple conversion from .png to .jpg creates fuzziness around the text characters when I try it. So I'm looking forward to seeing your conversion.

Ellen said...

Mike, Yes, that's what I'm SUPPOSED to see, but instead I have the old AdSense tab and no "customize" tab. I dug around in the forums and finally found out that you cannot access the new features if you use ftp to publish to your own domain. Aaargh. Thought I'd mention that here in case anyone else is going crazy.

Scott at Real Epicurean said...

You had far too much time on your hands to write such a long post ;)

I wish I could join in, but I'm a Wordpress boy.

Trig said...

Funny you should say that, Scott. Someone else (even more famous than you) is reported to have commented that I had far too much time on my hands recently.

It's half-term. I've got time to sleep, party, watch football, post articles and cook. It's a tough life.

Trig said...

Sorry about that Ellen. I don't know how to publish using ftp so I didn't realise this.

SusanV said...

Hi Ellen--I was about to answer your question but I see you figured it out. From what I read, those of us who FTP to our own domains will probably never be given the widgets or dynamic publishing that everyone else gets. One day I just may take Nika's advice and migrate to Wordpress.

Trig said...

For ftp posters on New Blogger, try this:
Recent Posts Widget for FTP Blogs and other widgets on this site.