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 . . .

 

Cracked it . . .

This is just here to tell you that I've managed to crack the prickly problem of making 'Thickbox' work with Blogger-uploaded pictures.

More will be added to this post . . . standby!

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

Update: - (later in the day)

We will have to tackle this in two parts.

• The first is the 'edit' you need to apply to your template.
• The second will be what you need to do to get your picture(s) to display in the sexy Thickbox format.

The next couple of posts will deal with each scenario and, just to show that everything actually works as it should, I will display the larger graphics as a Thickbox image!

Edit: change of plan - I will display the pictures as full-sized images so that you can READ the text the image displays!

If you are still not clear about what a 'Thickbox' display looks like, you can scroll down the page to a couple of earlier posts, or if you prefer, click on the following links: Test Post and Picture displays - 101b.

All this is in response to something started by David McMahon, who emailed me with a 'suggestion' that I respond to some questions on his blog, and then subsequent questions and comments by papoosue, phaseoutgirl and B.T.Bear (esq.) (who does a mean tutorial, too)!

Gather round, and the first to claim success will get an 'honourable mention' on David McMahon's authorblog.

 

TIP - Copyright

This post is in response to a question by phaseoutgirl (Cecilia) who hosts a blog called 'Dance with the Sun' (what a terrific name; doesn't it just invite you to visit?). She wished to know how to post a copyright note at the bottom of her pictures, similar to how David manages to copyright his own pictures. So let's deal with that first:

Thyson being introduced to a baby lovebird!
Photograph © 2007 Terry Fletcher

 

Follow the normal steps you use to post a message and an image, by using the 'Compose' (WYSIWYG) editing window. After you've inserted the picture and arranged it to display where you want it, hit return once and type in your copyright information. Then highlight those words and select 'center' and the text 'font-size-colour' you want it to display in (note: If you didn't already know, you can get the © symbol by simply using the key combination "Alt+0169" on your number pad - doesn't work with the numbers on the top row of your keyboard!).

Done!

Not one to stop with just a single example (hey, that's my weakness and you'll just have to put up with it) I decided to add these, too:

 

 

If you use a graphics programme that supports 'layers' (Photoshop, etc.), you can type in information as in the example above and superimpose it over the original picture.

• the first is Cecilia's copyright info on a transparent background so that it can be copy/pasted over any of her photographs just by lifting it off this page (go for it, Cecilia!).

• the second is displaying the same information over a gradient background composed of the colours from the background colour of my page and that of Cecilia's page to show that, regardless of the background, the lettering always shows through clearly.

• the third displays the same info over a gradient of white leading to the background colour of Cecilia's page background, showing that regardless of what the background colours are, the lettering will always show up clearly.

If you use this idea you should make the lettering white (hex #FFFFFF) and give the layer drop shadow properties of the following:

Opacity=100% | Angle=120º | Distance=1px | Spread=0% | Size=1px

and you will find that wherever you place the copyright information on your picture it will always show through.

That's all, folks!