Sunday, 29 July 2007

Change Your Header - NEW Blogger

NEW Blogger instructions, probably for the majority of users, and probably the one that will interest most of the visitors to this site looking for simple instructions on how to change a 'Header' or 'Banner'.

Have you got your image ready? Is the image width set to the width of your current template? Please remember I am dealing specifically with 'Rounders-3' and 'Rounders-4', and in those the width of the image is the same as the width of the template - 740 pixels. The height of the image is what you choose to make it, but I suggest 150 pixels for a balanced display.


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. Clicking on 'Customise' on your main page, or 'Layout' on your Dashboard will bring you to the "Add and Arrange Page Elements" of the 'Template' tab. This is the new feature of NEW-Blogger in which you can literally 'drag-and-drop' modules wherever you wish. The one we are interested in is the 'Header' panel at the top:


3. When you click on 'Edit' (see pic on top) it takes you to a new window in which you are asked to make a few choices. I have annotated the choices you should make so I won't reiterate them here:


4. Nearly done - but not quite! Those pesky codes in the /* Blog Header still need to be changed so that the image will sit exactly where you want it, centred at the top of the page. It is exactly the same criteria that was edited in OLD-Blogger, so take a look at the graphic below and do the editing . . .


That's it. You wanted more?

The examples for this sort of editing are all around you. The banner header on this site was inserted using exactly the same editing techniques. The banner header on David McMahon's blog (using the Rounders-3 template), and the banner header on Cecilia Mercado's blog, Dance with the Sun (using the Rounders-4 template), were also edited using the same instructions I've posted above.

If things don't work out first time, just restore the site to the way it was by using the saved template you copied before you started. Then e-mail me directly and I will visit your site and see what I can do for you. Don't forget to add as much information about what went wrong.

Over to you . . .

back to the top



david mcmahon said...

Great tutorial, El Tel.

Fletch said...

Thanks, David.

I hope somebody benefits!