Tuesday 10 August 2010

Blogger Template Designer

Google have continued to enhance the blogger tool with a WYSIWYG template designer with some nice new templates. A word of warning though - remember to save your old template first because the old templates seem to have vanished completely so there is no going back if you do not save first.

Still, having learnt that lesson it is time to press boldly on into the unknown.

Luckily one can change the background image in the new templates to your own - all you need to do is make sure you have an appropriate resolution image to hand & accessible online (eg in Picasa) and change the image link in the template.

As easy as that, well pretty much :

1) Create an appropriate image. The one I had from stock on the designer was 1800x1200 so I altered one of my own images to 1920x1200 as a nice catch all - it will work fine with lower resolutions too. Note, my initial image was around 200k which was a bit slow to load.

2) Upload to somewhere online - Picasa is good, just make sure it is a full size image, I set the album to unlisted and that seems to still work. Then goto the picture and click on "link to this photo", copy the "embedded link" string into notepad and search for the string commencing
img src="http://
followed by a URL looking something like this : "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWUJbgjmjAwfaUzF2q5GWGK3haj-CrbQNLJlPeusL0hXP39YpG7M2NReM3_ujFCPAIxud6sQo-EPHYy7FxdGPlSMH1d9T_DSyyragB1_4qwJd9NgNdpm5XJ7wEor7BPzFmeQ1R8IF9a7r8/s144/20100626FlowerForSite.jpg"
Now copy the link in the speech marks and paste that into a browser, remove the /s144 or similar string you may have and hit return - one working link.

3) Now goto the Design page in Blogger and goto HTML (don't forget about backups). In the HTML, just near the beginning of the variable definitions you will find the following string, starting :
Now replace the url in the brackets of the 2nd URL (the first points to the original template image (why, who knows) and the second points to the current template image) with the URL you created above.

4) Click on Preview

Job done.

Now you've got your eyes open and you have checked your new page thoroughly haven't you.

Ah, you noticed the new "attribution" section at the bottom - it even appears on the Blogger design page but you can only add to it and not actually change it.

Well, to give credit to the person who produced the template is fair but you have just replaced the image with yours so why credit someone else?

Luckily for you immediately after the image URL you just pasted there will be an accreditation in what looks to me like a comment (it starts with
/*
and ends with
*/
Just change the text and the URL and all is fair.