Banner images in the new Blogger (previously known as Blogger Beta)

A brief and (for me) somewhat technical post that's nothing to do with Cyprus. Just for the record. Ignore, if you don't use Blogger yourself. And apologies to anyone who tried to read this blog last night, only to find missing images, or strangely ordered side-bar items.

(Oh, and if you've found this post because you want to know how to upload banner images to the new blogger, rather than reading my ramblings, scroll down quickly until you see the purple italic line of text, which explains the crux of my problem.)

I upgraded to 'Blogger beta' a few weeks ago. It's actually now out of beta, so it's just the new version of Blogger, and rather nice it is too. About a year ago I filled in a survey asking what people would like from the service, and I requested two things: 1) labels or tags 2) an easier method of editing the sidebar. Both have been implemented! So I started adding labels immediately to all my blogs - particularly useful for the recipes and book reviews - but decided not to update the layouts immediately.

Yesterday afternoon, I thought I'd experiment with the new layout system. I have five blogs, so I began with the most straightforward. Rather than a lengthy page of scripted html, which I find a bit daunting, there was a simple diagram enabling me to add page elements wherever I wished. It was remarkably easy, and within about fifteen minutes I had the first blog fully updated, looking just as it did previously. Phew!

The next three were equally straightforward, if a little more long-winded due to having more elements in the side-bars. But I opened the page-source of each one before upgrading, and then simply pasted in the relevant links or java, and it all seemed to work.

So, finally, to this blog which has more in the sidebar than all the others put together. I nearly put it off, but thought it best to get it done while I was in the swing of updating, before I forgot how it all worked. It took longer, but just about everything worked, and I juggled the positioning around until it looked much as it did before.

Except that I didn't have the image behind my title any more. My blog was back to having the blue background that goes with the default tictac blue template. I wanted a new picture anyway, now the Christmas season is just about finished, so I made myself a new banner showing the beach in winter. 768 pixels wide, with 40 pixels of border each side in the same colour as the blog background.

But there was nowhere in the new layout interface that dealt with background image for the title. I could edit the title, or insert a sub-title, or change the colour or font of the title. I could insert pictures anywhere else in the blog... but not behind the title.

However, since it's possible to access the html of the blog template as well as the graphical interface, I thought I'd do it as I used to, just subsituting my banner for the image picture.

So I uploaded the banner to blogger, as usual, and saved as draft.

I looked at the html of the draft post, highlighted and copied the URL of the photo, so I could use it in the banner.

Then I went to the html view of the blog template. Rather different from how it used to look, but I searched for the bit labelled 'header' and checked a couple of the .gif images until I found the one that matched the default blog header image.

(I know, I know, it would all be obvious, so far, to someone technically aware. But there must be other bloggers like me who have to take it a step at a time, surely...?)

I confidently pasted my new banner image into the place where the default image was, and clicked 'preview'.

No change.

I refreshed the screen, hopefully... but it made no difference.

Sigh.

So then I started searching with Google. Surely I couldn't be the only person to have this problem. Indeed, I was sure I had found a page explaining how to do this, for someone else asking the same question only a couple of weeks ago.

Sure enough, there were LOTS of pages - blog posts, forum posts, etc - explaining what to do.

Unfortunately, they all seemed to offer different advice.

Some of them simply described what I had done - which worked fine on the old blogger - so I rejected those.

Some of them gave complex pieces of 'script' which I was supposed to subsitute for another part of the script in the html. Too scary. And I couldn't figure out where it should go.

Some of them said confidently that it could be done using the new graphical interface, after making a couple of minor edits to the html, which allowed the current title to be deleted and further elements added.

I managed that bit.

Then advice varied: some suggested adding a picture element, so I tried that. It didn't work.

Others suggested copying the html and adding that to an html element. I tried that, but it either did nothing, or added part of my picture while keeping part of the original.

I was going around in circles.

Another suggestion was to have the text of the title on the banner itself, and delete the original title, so I even tried that.

Nope. And a bit worrying as I now had a blog with half a default banner and no title. Thankfully I managed to retrieve the title code again. I don't think it's a good idea to delete it, even for people who do have the title as part of their banner, as the blog would then lose its name from the point of view of people searching for it.

Almost tearing my hair out, I asked Tim if he could help. He understands html and scripting reasonably well, so he fiddled around a bit with my code, but he couldn't get it to work either.

Then... about 10pm (and I've usually switched the computer off at least an hour earlier) we noticed something in this page, one of the many Google had found for me earlier: Blogger beta banner problems resolved.

Right in the middle of the post, was a comment which nobody else, as far as I can tell, had mentioned.

The new blogger cannot use images which it hosts itself for banners.

The problem was not with my stupidity or lack of technical awareness, or with the template I used. The problem was that the new blogger couldn't access my new banner because I had stored it on Blogger itself.

So, as a test, I uploaded it to Flickr, and tried what I did orginally: simply pasting the URL instead of the default image URL.

It worked!!!!

Only one problem remained. Flickr's terms and conditions state that any photo used elsewhere must have a direct link back to the Flickr site. But the code they gave to do that wouldn't work in the Blogger template. At least, I couldn't get it to work. No doubt more technically-minded people could figure that one out and use it. But I thought it best to put it somewhere else - and cheated somewhat, creating a new image directory on my home education site, at Tim's suggestion, as that's hosted on one of Richard's servers.

Thus endeth my brief foray into the technicalities of Blogger. Normal service will now be resumed.