Templates to Layouts

Now that I was off FTP publishing, I decided to take the plunge and upgrade the other antiquated part of the blog - move from classic templates to layouts. Seemed to me, with the recent Google spurt of cleaning house, old versions of technologies were not going to be around for long, and it was best to keep up with the times.

Things did not get off to a great start. Blogger preview function started to fail citing:

The following errors were found:
securityToken: Your request could not be processed. Please try again.

I could do little but wait, while finally Google solved the problem. When I finally had my preview function working, I decided to take the plunge. Saving a copy of my old template, I went to Template > Customize Design and hit the "UPGRADE YOUR TEMPLATE" button.

The key with the upgrade for me, was to get the layout pixel perfect with my existing template. My blog is tightly integrated with the rest of the website. I had customized the original template to work with the same CSS as my site. Now I had to make the layout publish the same HTML or customize CSS locally to mimic the original.

I chose the simplest of the templates to begin with, hoping the HTML would be the closest to my original code. It took a few seconds for the upgrade, and then I was presented with the new layout screen. I headed over to "Edit HTML", and began.

The first thing I did was to get rid of existing CSS, called the skin. The blogger layout requires the skin tags to be in place, but I deleted everything in between the opening and closing tags.

<b:skin><![CDATA[
... /* Delete everything in between */
]]></b:skin>

Then began the hacking in earnest. First - the basics. The layout is made up of sections. A section contains widgets. When a section is expanded, it shows up as a <div> tag in the final HTML code. A section looks like the below.

<b:section id='header' class='header' maxwidgets="1" showaddelement="no">
</b:section>

Every *thing* in the layout is a widget. Like a section, a widget expands into its own <div> tags when the final HTML is generated. A widget however, encapsulates a ton of additional code. To see the actual code that makes up a widget, check the box that "Expand Widget Templates". And that opens up all the code that makes up the widget.

<b:includable id='main' var='thiswidget'>
[widget code found here when expanded]
</b:includable>

Widget code is made subroutines called "includable"s, presumably because they produce code that is included(?) into the final HTML. One of them, with the id "main", that is the default subroutine, which is always executed (included?). Other subroutines (includables, with a different id) are called ("include"d) as required.

<b:includable id='main'>
 <b:loop var='i' values='posts'>
  <b:include name='post' data='i'/>
 </b:loop>
 <b:if cond='condition'>
  [content to display if condition is true]
 <b:else/>
  [content to display if condition is false]
 </b:if>
</b:includable>

The final thing to note is data. Information available from the blog can be accessed using data tag. A bunch of such data is available; play around with the conditional tags and the data tags to discover everything that is available for access through code.

<data:title/>
or
<data:photo.url/>

Hacking the code took about half a day - alternating between the code, the generated HTML and the original HTML code, trying to align the them. All extra HTML (the menu code for example) was included inside widgets, so that they are included directly into the final HTML. Tracing through the code, I customized a bunch of the original HTML to ensure the correct ids and classes were included in the final HTML, allowing my standard CSS to render the page correctly. Then I added some CSS skinning to counter the effects of the default <div> tags included for the sections and widgets.

Viola: we are done! Now I had access to a ton more widgets, and a lot more blogger code to hack. Ah the bliss!