More blogger template modification

So, after my previous post on hosting your domain name with Blogger I've been making more customistaions to the site layout, look and feel. I found that the Blogger template system is really good for basic use, and for people with little or no knowledge of HTML and CSS, but when it comes to making more advanced changes - such as adding a favicon (wikipedia) or more interesting CSS stuff - it can get a bit tricky. If you're like me, where you really like to get to the nitty-gritty of it all, it can be a right pain in the backside!

It's not immediately obvious how you can go about doing all this for free without shelling out more of your hard earned moolah but, with the help of Google pages, you can. Google very nicely provides you with 100MB of upload space that you can use to create pages using (yet another) simplified no-brainer interface, but the difference here is that you can also upload files. This means that you can upload (yup, you guessed it) CSS, HTML, JPG and even a good old favico, and then modify the XML of your Blogger template to reference this directly. Well, OK, so it's not really XML, more like XHTML with template bits in, but you get the idea.

The first thing I did was strip out all the messy CSS gumpf at the start of the template. This should really be in one (or more) CSS files.

Next, all the variable tags sections and the rest of the now-redundant CDATA section can go. Google requires at least one b:skin tag, but it doesn't need to have any data, so I just removed the entire b:skin section that was in the template and replaced it with

<b:skin/>

After saving this was automatically updated to:

<b:skin><![CDATA[]]></b:skin>

This will mean that you can no longer use the google "Fonts and Colours" tab in Blogger, but we don't mind as we know all about CSS, right?

Finally, in the template head section, add the link to the favico and CSS file as necessary:

<link href="'http://andpigswillfly.googlepages.com/dave_main.css'" rel="'stylesheet'" type="'text/css'/">
<link href="'http://andpigswillfly.googlepages.com/favico.ico'" rel="'shortcut" type="'image/x-icon'/">

Happy hacking!