If you are a serious blogger, you will not only write blog posts, but also tweak your blog layout. You will add widgets, fine-tune the layout, add navigation features, icons etc…
This takes up a significant amount of time and effort. As an example of “The Life of a Blog Master”, take a look at change log for my personal blog, The Road To the Horizon.
That blog, running on Blogger, is two and a half years old, has about 1,500 blog posts and gets +-15,000 visitors a month, so it is very dear to my heart.
Came a time though, I got tired of the limitations imposed my old Blogger template. A narrow and two column layout had become outdated and I wanted to swap it for something more appealing. That time was last weekend.
The Road's old template
From the moment I decided to take “the big step”, until the new site was up, I spent about 50 hours, often with cold sweat on my forehead as no matter how well I prepared the migration, things still went wrong.
In this post, I want to share how I swapped my template and what typical problems one should be prepared for.
- Find a template:
The first thing to do, of course, is to scout around for a new template. I found the Business Template, a free three-column template made by OurBlogTemplates: - Test the new template:
I knew changing a Blogger template was not easy, so I created a test blog on Blogger, uploaded the new template and experimented with its features. I created some dummy posts to check the styling for tables, images, videos, and the widgets, etc.. - On a test blog, customize the new template to your liking:
I tweaked the CSS styling, the column width and imported several scripts I use in my blog. It took me a full evening until the new template did what I had in mind. All of it still on the test blog.
I did not style the site with all details as I thought it would be double work and might lose some in the migration from the test site onto the new site anyway, I thought… In hind sight, that was a good approach. - Migrate the widgets onto the test template:
As Blogger does not support the automatic migration of widgets when you swap templates, I recreated all widgets on my test blog. I manually cut and pasted the content from my “old” blog onto the test blog.
There are short cuts available so you don’t have to manually cut and paste all widgets, but that did not work for me: all HTML/Java widgets gave errors. “Better safe than sorry”, I thought so old fashioned cut and paste, it was…
Five hours later, all widgets were copied and properly debugged.I had to reformat some widgets as the new template’s side columns and bottom widgets had different widths than on my old blog. - Make backups:
I made a “Blogger” backup of the “old” site. A Blogger back only contains the posts on the home page, but it has all the styling and widgets codes as if it were an independent web page. The following days, I used the backup to check “how my old site looked like”. I use a developer tool like Firebug to double check some HTML codes and CSS styling. - Copy the CSS styling and customizations of the templates:
I downloaded the template XML files of the “old” site, the test site and the news one. I opened them in three separate windows (that is where a wide screen comes in handy)…
I copied all CSS styling and Javascript-calls from the test site template onto the new one.
Then I copied all customization from the old site template onto the new one. These included the Google Analytics scripts, all meta tags for the SEO (Search Engine Optimization), the code for Yahoo SiteExplorer and Google Webmaster (explained in this post), …. There was plenty of other stuff to transfer. I had forgotten how much I tweaked my template in two and a half years..
I went through the old template line by line to ensure that all bug fixes and oddities I added over the years were properly migrated onto the new template. Preparing the new template took me about three hours. - Upload the new template. And pray:
Then came moment “X”: after a deep breath, I clicked on ‘upload’ to pull the newly customized template onto my ‘live’ blog. I refreshed the browser view and sure enough, my blog posts appeared. All still without widgets of course, but I had not lost anything. - Re-create the widgets:
First thing I did on my blog – now with the new template-, was to create a prominent widget to warn my visitors I was working on the site. Always a good practice, pampering your visitors…
Then, one by one, I re-created all widgets and copied their contents from the test blog onto the “live” blog.
Another three hours went by. - Debug the obvious formatting problems:
Now the real work started… I navigated around the site, as a user would, and soon enough found all kinds of oddities: Some of my customized styling and home made JavaScripts conflicted with the template. It had all kinds of weird effects. Nothing major but nasty enough to give a sloppy impression. Sloppiness is not a feeling I want my users to have, so I literally worked through the night debugging the new template. - Debug text re-wrapping in the posts:
A quick nap and three coffees to wake me up later, I took a fresh look at my new site.. It looked nice, but as I browsed through the posts, I found some with miss-formatted tables. As the width of the main post column was slightly wider, I also noticed some posts had odd text wrapping, with plenty of orphans and widows (single lines above and below images, videos and built-in widgets)… - Ask your visitors for feedback:
While I was working on the blog, I tweeted the URL of my migrated blog asking for feedback. During the next days. I tweaked the template based on “the demands from my clients”.. - Go through all of your posts:
I was surprised about the number of formatting glitches that came to light with the new template. Not because the template was bad, but because many posts relied on the CSS styling of the old template. Some posts looked pretty darned bad.. I decided to go through all posts, one by one.
And spent about next three evenings doing so… Of my 1,500 posts, probably I probably re-edited about 200. Some took half an hour, , some of them were ok in two seconds.. Still, this is the part I had totally underestimated when planning this migration. - And while checking the posts, check for dead links and the like:
I found plenty of oddities while checking all posts. Many of them had nothing to do with the migration itself. Some posts I had not checked for months, or even years, so I found dead links to videos and pictures, which I corrected on the fly. I also discovered that two and a half years ago, as a beginner in blogging, I had used the Blogger’s WYSIWYG editor a lot. And I can tell you, the HTML code the editor generates is sloppy, making reformatting some posts a pain.
The Business Template
But now, about a week later, I have the site where I want it. I still have a stack of posts I need to correct, but they are really minor changes. That can waituntil I scraped together enough energy to do it.
The Road's new template, 50 hours later...
Main lessons learned in migrating a Blogger template:
- Test your new template on a temporary blog first.
- Implement all customization on your test blog to see if it works.
- Do the migration work in a weekend, when you have time to concentrate on the job at hand.
- Migrate the customization systematically, ensure you don’t get distracted or you will loose track of what you are doing.
- Ask for feedback from your visitors.
- If you planned a certain amount of time, rest assured you will spend at least five times as much.
- Serious bloggers don’t use Blogger’s WYSIWYG editor. It makes reformatting a nightmare.
- Consider migrating your Blogger blog onto Wordpress. Migrating a Wordpress template is a breeze.
Peter. Flemish, European, aid worker, blogger, expeditioner, sailor, traveller, husband, father, friend, nutcase. Not necessarily in that order. (
