Change a Two Column Blog to Three Column: Dummies Style

Update [16-Jun-2012]: Surprisingly, people still visit this post. From the time I posted this 2-to-3 column experience of mine Blogger has gone through a sea of change. All of what I have documented below might not be applicable anymore if you are already on the new Blogger. At most this could probably serve as a basic guide or informative piece. Any which ways, thanks for dropping in!

I have wanted to change my two column blog to a three column one for a long time now. I had opted for the Rounders 2 column template and very soon realised I was not using 'page real estate' very well. The post column was too narrow for my liking. Long posts tend to make the blog look like an unending strip of toilet paper. There are many free three column templates available but I wanted to try to fiddle with the code and change it to a three column format. After a couple of tries I knew I was not doing something right. The rounded corners in the layout added to my woes because increasing the column width meant changing the URL from where the image of the rounded corners could be loaded. Somehow the workarounds didn't work very well with me either.
I decided to ditch the Rounders template altogether and go for a different three column one. I wasn't able to complete those step-by-step code tweaks that I found on other blogs. Many left comments that the instructions helped them. But I never ended up being one of them.

Change Template, Lose Gadgets
I was about to switch to a new three column template one day when I was warned that all gadgets will be lost with the template change. Woh!! That is something I did not want to happen. My blog is not some Web 2.0 site with any fancy elements but I had put in a lot of time and effort in trying out gadgets, tweaking stuff and had just about got around to adding AdSense banners. So I was not going to lose my gadgets so easily.
Weeks went by and I kept wondering if there was a way to change to a three column layout and keep my gadgets intact.I know there are ways to back up the gadgets from Blogger by looking the particular tag. It's all good. But it was not fool proof for me and searching for the xml tags left me with dry eyes. Plus, some gadgets like Blogger Profile are not backed up. You need to add them once again.

Eureka!
That's when it came to me...I could use my test blog to hold my gadgets! This would mean minimal code-digging. Some might say this method is too cumbersome but it beats deciphering code and looking for XML tags till you start seeing double. The most that you will have to do is copy-paste.

So this is what you can do:

1. Back up your blog.
2. Create a Test Blog (Had created one thanks to Marco's idea, when he started his blog.)
3. Choose a suitable 3 column template. (I loaded many templates on the test page before deciding on the current one.)
4. Replicate the gadgets that I had created in the Live Blog into the Test Blog. How?
   Open each Gadget one at a time...
   If it has code (like ads, visitor map, etc.) - copy, paste the code into the Test Blog gadget. Give it a title, just so you know at a glance, what the gadget is about.
   If it is not code, simply copy the settings into the gadget in the Test Blog. It could be a Link List, Blogger Profile or an AdSense item.
5. Copy-paste the Live Blog title and line.
6. Recheck to confirm you have copied all the gadgets.

Additional Tips:

• Don't forget to copy the blog title and description.
• Copying your 'site counter' code into the Test Blog will cause the count to increase (since your visits to the Test Blog will also be included). Either create a blocking cookie on the site counter's website for the Test Blog or keep the code in Notepad for later. Just keep an empty gadget with a 'Stat Counter' title, so you don't forget to add the code when the three column blog goes live.
• Make sure only you have access to your Test Blog. This can be done from the blog 'Dashboard', under Settings> Permissions.
  
  
  
  
• After copying one gadget save the layout and view the blog.
• Use dummy text and post a few entries into the Test Blog. (Use Lorem Ipsum for dummy text.)
• If need be take a screenshot of the Live Blog as reference later on.

Final Migration

1. Download the full Test Blog template from Layout> Edit HTML> Download Full Template.
   
2. In the Live Blog, upload this new template.
3. Confirm the changes. (including the warning about losing your gadgets).
4. View your blog. Now move the gadgets around to fill the additional column.

Issues
I did face two issues after using this method to migrate to a three column template.

1. Code Swap!
   Even after copy-pasting code into the right gadgets, the HTML ended up being swapped around. For example, my Site Stat code was under the Adbrite ad gadget. The Adbrite ad code was in another gadget...and so on. Very weird indeed. I had to use Notepad as a buffer to juggle the code back into the right place. Or I could have just changed the gadget titles! (I just thought of it. Sheesh.)
2. Invisible Ad Elements
   Two gadgets that are related to Google Ads have stopped functioning. They do not appear. The footer ad is generated through code that I manually copy-pasted. The second 'island ad' is in the third column, which is a simple AdSense gadget — no code. I have tried troubleshooting in different browsers, gone through the step-by-step guide on the AdSense page, and even mailed AdSense support. Nothing has helped. The fight continues...

---

Finally figured out what was happening, while tinkering around the layout settings. The AdSense units were not appearing because AdSense policies restrict you to a total of 3 units per page. I had set ads to appear after every post and there were units on the right plus there was one in the footer. I disabled ads within posts and the missing ad units came back.

Additional Tweaks (with Code)
You must have noticed I have further tweaked this three column blog. These tweaks involved meddling with code — which is why I am not including them here. Will do in another blog where I will give credit to all those bloggers whose valuable tips have helped me out and made understand 'blogger code' better. Some tips worked like a charm while others took more time (like creating a new gadget 'island' element in the layout). These tweaks include,
- Hiding the blog search bar at the top.
- Adding a gadget element under the header (so that I can add another AdSense gadget)
- Adding a gadget element in the right column.

This I will leave for another blog post. For now, I hope this guide is simple enough and works for you. Do leave your suggestions, if you have any...for me as well as for others who visit this page.

Some super blogs that I always refer to:
Peter Chen's Blogger Tips and Tricks
Pocket's Blog Bulk