New Blogger Layout Conversion No Picnic

Whew! After hours of frustration, I have succeeded in moving this blog's template over into New Blogger. I did my best to maintain the same look and feel, but there are subtle differences. (You can see the old template by clicking on the thumbnail at left.)

And what a learning curve it's been. Hopefully, the results will prove worth it. One of the major benefits of New Blogger (and certainly my primary motivation in upgrading to widgets view) is the new labels/categories feature, evidence of which you can see at right below. Those who have been with me for a while will be familiar with the various not-so-successful code hacks and workarounds I have employed over the years in an effort to give this blog that all-important missing functionality.

I posted recently on the changes needed to get the 3-column Minima template that I give away here working properly in New Blogger layout view. That was a piece of cake compared to this blog's template, because of all the customization I had done. New Blogger didn't like my classic template at all, and the easiest approach to feeding New Blogger widget view something it could digest proved to be to rebuild it from scratch. I started with the 3-column Minima template, but you can only get so far dragging widgets around the screen. To get the functionality and look and feel I wanted, I had to delve into New Blogger's XHTML code, which is a whole lot more obtuse and less forgiving than Old Blogger's code. (Tip: all tags must be closed, even IMG tags, or they will generate error messages.)

More Internet Explorer Grief

Lots of challenges followed, including the usual crazy-making peek-a-boo float and IE box model problems. I employed an inelegant code hack (child selectors) to solve the latter problem and get the template performing roughly the same in both Firefox and IE. The peek-a-boo float problem was solved by adding {position: relative} to the div in question. There are still infuriating inconsistencies though, which I am at a loss to explain: the left padding of some of the sidebar contents seems to mysteriously reset for no apparent reason, jumping the headings and web badges all over the place in IE. I can find nothing in the code to account for this, and I'm truly mystified. There's a limit, however, to the energy I'm prepared to expend in pursuit of perfection.

Adding Post Auto Links

A tougher challenge, critical to the business goals of this blog, was getting the small WebLens badge that you see at the top of this post into the default post configuration. In Old Blogger, this was easy to do and I had previously shared the necessary code tweak here. In New Blogger's Page Element view, you can insert a link (or anything else) by adding a new HTML/Javascript widget to the center column. This will add the inserted object to the individual post pages. But call me obsessive: I wanted it to also appear on all posts on the main index, archive, and category pages. This required getting up close and personal with New Blogger's expanded widgets code view.

Trouble is, there is nothing obvious in the code to indicate where posts begin and end. Instead, there are plenty of convoluted loops, if/then/elses, cryptic widgets, and mysterious includables. See for yourself in the tiny snippet at right.

It took hours of trial and error to find the right spot to paste the link. After much experimentation, it finally came down to two possibilities, which I have highlighted in red. Pasting the link after either of these seems to work. I opted for the first, as you can see. I might never have solved this if it weren't for Bonnie Calhoun's fantastic blog, How Can I Do That?, which I found in the Blogger Help Groups. Her post on inserting Adsense code finally pointed me in the right direction.

Anyway, I hope you like the new look and feel, and — above all — enjoy the ability to easily find relevant posts on topics that interest you. Let me know what you think.