Change Your Header - OLD Blogger

OLD Blogger instructions. Here we go. Please bear in mind that this will come in two parts - OLD and NEW-Blogger. Why? Because I hacked away at both, and it would be a waste if I didn't at least mention OLD-Blogger for some 'peeps' who are still using it.

So, before we get down and dirty with the template changes, have you got your image ready? You probably have or you wouldn't be interested in attempting to change it. Make sure that the image is the width of your current template. In 'Rounders-3' and 'Rounders-4' the width of the image is the same as the width of the template - 740 pixels. The height is whatever you want it to be, but I suggest 150 pixels for a balanced display.

The following is the picture I settled on after much editing in Photoshop. You will see a screen-caliper I use as an aid when 'measuring' stuff for the web and it clearly shows that the width of the picture is 740 pixels. Measuring things using the 'artists thumb' method isn't much good for web design. It has to be precise or your display will look shoddy!

OK, we have the replacement ready so let's go see what we need to attack. Once again, please let me remind you that this is OLD-Blogger that we are working on. If you want the information for NEW-Blogger, read the post that follows this one.

--------------------------------------------------------------------------------

1. Backup your old template. Either by using the built-in backup feature in Blogger, or by copy/pasting it to a text editor of your choice, and saving it in a location you can find easily and with a name that makes sense to you!

--------------------------------------------------------------------------------

2. Upload your image so that it gets to lodge itself on Blogger's servers, because you're going to have to call it up during the editing process. You can do this in a new draft post that you won't be publishing:

--------------------------------------------------------------------------------

3. The highlighted bit is what you need when replacing the template's own image. The rest is superfluous:

--------------------------------------------------------------------------------

4. Now choose the 'Template' tab and choose to 'Edit HTML' (if you're still reading this and you are a NEW-Blogger user, please note the differences in the options offered to you). Follow the instructions in the graphic below:

--------------------------------------------------------------------------------

5. And here are the changes:

--------------------------------------------------------------------------------

6. Still in the 'Edit HTML' window, find <!-- Blog Header --> and delete the bits that I've highlighted. This is so that the 'Blog Title' and 'Blog Description' don't show up over (or through) your carefully constructed graphic!

--------------------------------------------------------------------------------

7. That should have been all you needed to do, but when I made the changes to David's blog, one of his visitors commented that the 'link' that the original header provided back to the home page of the blog was now broken, and that she found it disconcerting that clicking on the new banner didn't take her anywhere! That's the strength of 'feedback', that a simple oversight made a visitor's browsing experience less than satisfactory. So I went back in and did another small change that the next couple of graphics describe. I would recommend that you do it as well. This graphic shows what needs to be edited . . .

--------------------------------------------------------------------------------

8. And this graphic shows it after it has been edited . . .

--------------------------------------------------------------------------------

That's all folks. If you haven't already done so, take a wander across to David McMahon's blog. What you see is precisely what was achieved editing his banner while he was still using OLD-Blogger.

He is, of course, now using NEW-Blogger. Which means I can use his site as an example for the 'tute' on changing things in NEW-Blogger as well. Watch out for the next post . . .

 

TIP - Copyright . . . (for Cecilia's picture © info)

Cecilia asked about placing copyright information below a picture, possibly in a different font and colour so that it did not merge with the text of the post. My response was that she should highlight the copyright text and then select to 'center' it after choosing the 'font', its 'color' and its 'size'.

She managed this pretty easily when she elected to have the photograph showing in the middle of the page; the copyright caption just became another line of text, centred under the photograph! But when she tried that with a pic aligned to the left of the text, everything went 'pear-shaped'. And I suspect that exactly the same problem will occur if the pic is aligned to the right of the text.

Hmmmmm! Time to revisit the problem.

---------------------------------------------------------------------------------

Photograph: © Cecilia Mercado

Much research of Blogger Help lines uncovered the fact that the new Blogger engine does NOT support captioning of pictures so, to get the effect, one has to 'fiddle' with the template HTML and the post AFTER you've uploaded the picture and saved the post, as a Draft, so that you can return to it and edit the HTML. No need to throw your hands up in horror. It really is a simple exercise!

In the next post I will walk you through the procedure. However, until I have managed to get comprehensive screenshots of each step I will try not to post anything that ends up confusing the reader. I will also try to add 'plain-text' code that needs to replace what Blogger produces so that you can literally copy/paste the 'edits'.

Stay tuned!